Field Formatter Template with CarouFredSel example 71

fft-carouFredSel-71.tpl.php

<?php
/*Template Name: CarouFredSel Example 71*/
// Organic Code http://coolcarousels.frebsite.nl/c/71/

// Add js
// You can download caroufredsel library and place at sites/all/libraries folder
// Or using cdn library.
drupal_add_js("//cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.2.1/jquery.carouFredSel.packed.js");

?>
<div id="outer">
  <div id="inner">
    <div id="carousel-fc" class="carousel">
      <?php
      foreach ($data as $key => $item) {
      print format_string('<img src="@path" width="@width" height="@height" />', array(
        '@path' => $item['path_1'], // chose Image Style 1 image, you need create a style create image 400x300.
        '@width' => $item['width_1'],
        '@height' => $item['height_1'],
      ));
      }
      ?>
    </div>
    <div id="carousel-zw" class="carousel">
      <?php
      foreach ($data as $key => $item) {
      print format_string('<img src="@path" width="@width" height="@height" />', array(
        '@path' => $item['path_1'], // chose Image Style 1 image, you need create a style create image 400x300.
        '@width' => $item['width_1'],
        '@height' => $item['height_1'],
      ));
      }
      ?>
    </div>
    <div id="carousel-txt" class="carousel">
      <?php
      foreach ($data as $key => $item) {
      // You can use $item['alt'] when you set alt for image.
      print "<h3>{$item['filename']}</h3>";
      }
      ?>
    </div>
    <div id="overlay"></div>
    <a href="#" id="prev">&lsaquo;</a>
    <a href="#" id="next">&rsaquo;</a>
  </div>
</div>


<script type="text/javascript">
(function($){
  $(document).ready(function() {
    $('#carousel-zw').carouFredSel({
      auto: false,
      items: {
      visible: 1,
      start: 1
  }
  });
  $('#carousel-txt').carouFredSel({
      auto: false,
      items: 1,
      scroll: {
      fx: 'fade',
      duration: 2000
  }
  });
  $('#carousel-fc').carouFredSel({
      synchronise: [ ['#carousel-zw'], ['#carousel-txt', false] ],
      items: 1,
      scroll: {
        duration: 1000,
        timeoutDuration: 3000
      },
      prev: '#prev',
      next: '#next'
    });
  });
})(jQuery);
</script>


<style type="text/css">
#outer {
  width: 100%;
  height: 100%;
  min-width: 800px;
  min-height: 400px;
  position: relative;
}
#inner {
  width: 800px;
  height: 300px;
  margin: -150px 0 0 -400px;
  position: absolute;
  top: 50%;
  left: 50%;
}
#inner:after {
  content: url( "http://coolcarousels.frebsite.nl/c/71/img/shadow.png" );
  opacity: 0.5;
  position: absolute;
  bottom: -50px;
  left: 70px;
}
.carousel {
  width: 400px;
  height: 300px;
  overflow: hidden;
  float: left;
}
.carousel img {
  display: block;
  float: left;
}
#carousel-txt {
  height: 30px;
  position: absolute;
  top: 135px;
  right: 0;
  z-index: 2;
}
#carousel-txt h3 {
  text-shadow: 0 2px 5px rgb( 150, 50, 50 );
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  line-height: 30px;
  width: 400px;
  height: 30px;
  padding-left: 30px;
  margin: 0;
  float: left;
}
#overlay {
  background: rgba( 150, 50, 50, 0.5 );
  width: 400px;
  height: 300px;
  position: absolute;
  top: 0;
right: 0;
}
#prev,
#next {
  background: rgb( 150, 50, 50 );
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  line-height: 37px;
  text-align: center;
  text-decoration: none;
  display: block;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  position: absolute;
  top: 50%;
  z-index: 4;
}
#prev {
  right: 50px;
}
#next {
  right: 0;
}
#prev:hover {
  text-indent: -5px;
}
#next:hover {
  text-indent: 5px;
}
</style>