replete/zurb-foundation-4-orbit-thumbnails.html

## zurb-foundation-4-orbit-thumbnails.html
<!DOCTYPE html>
<html class="no-js" lang="en"><head>
<head>
  <title>Zurb Foundation 4 Orbit Thumbnails</title>
</head>
<body>
<style type="text/css">
.orbit-bullets.has-thumbs {
padding-left: 0;
bottom: 0;
}

.product.section .orbit-bullets.has-thumbs li {
width: auto;
height: auto;
border: 1px solid white;
background: #0059a2;
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
-ms-border-radius: 0 !important;
-o-border-radius: 0 !important;
border-radius: 0 !important;
}

.orbit-bullets.has-thumbs img {
width: 2.5625em; /* whatever you want */
display: block;
}
</style>

<ul class="carousel" data-orbit>
    <li data-thumb-src="/images/blah_thumb.jpg">
        <a href="#"><img src="/images/blah.jpg" alt=""/></a>
    </li>
    <li data-thumb-src="/images/blah_thumb.jpg">
        <a href="#"><img src="/images/blah.jpg" alt=""/></a>
    </li>
</ul>

<script src="path/to/jquery.js"></script>
<script src="path/to/foundation.js"></script>
<script src="path/to/foundation.orbit.js"></script>
<script>
$(function(){

  $('.carousel')
  .on('orbit:ready', function() {

      var $this = $(this),
          $slides = $this.children(),
          $bulletContainer = $this.siblings('.orbit-bullets'),
          $bullets = $bulletContainer.children();

      //Add styling hooks
      $bulletContainer
      .addClass('has-thumbs');

      //Insert thumbnail images for each slide bullet
      $bullets
      .each(function(index, item){

          console.log($slides.eq(index).data('thumb-src'));

          //Amends _thumb to filename of image (Umbraco automatically generates thumbs to uploaded media)
          var slideImageUrl = $slides.eq(index).find('img').attr('src'),
              umbracoThumbUrl = slideImageUrl.replace(/.([^.]*)$/,'_thumb.'+'$1'),
              $thumbImage = $("<img/>").attr('src', $slides.eq(index).data('thumb-src') ? $slides.eq(index).data('thumb-src') : umbracoThumbUrl);

          $(item).append($thumbImage);
      });
  })
  .foundation('orbit', {
      animation: 'fade'
      , timer_speed: 7000
      , animation_speed: 0
      , bullets: true
      , variable_height: true
      , timer: false
      , slide_number: false
  }, function (response) {
      // console.log('Carousel errors:');
      // console.log(response.errors);
      // alert('response');
  });
});
</script>

  </body>
</html>
	<!DOCTYPE html>
	<html class="no-js" lang="en"><head>
	<head>
	<title>Zurb Foundation 4 Orbit Thumbnails</title>
	</head>
	<body>
	<style type="text/css">
	.orbit-bullets.has-thumbs {
	padding-left: 0;
	bottom: 0;
	}

	.product.section .orbit-bullets.has-thumbs li {
	width: auto;
	height: auto;
	border: 1px solid white;
	background: #0059a2;
	-webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	-ms-border-radius: 0 !important;
	-o-border-radius: 0 !important;
	border-radius: 0 !important;
	}

	.orbit-bullets.has-thumbs img {
	width: 2.5625em; /* whatever you want */
	display: block;
	}
	</style>

	<ul class="carousel" data-orbit>
	<li data-thumb-src="/images/blah_thumb.jpg">
	<a href="#"><img src="/images/blah.jpg" alt=""/></a>
	</li>
	<li data-thumb-src="/images/blah_thumb.jpg">
	<a href="#"><img src="/images/blah.jpg" alt=""/></a>
	</li>
	</ul>

	<script src="path/to/jquery.js"></script>
	<script src="path/to/foundation.js"></script>
	<script src="path/to/foundation.orbit.js"></script>
	<script>
	$(function(){

	$('.carousel')
	.on('orbit:ready', function() {

	var $this = $(this),
	$slides = $this.children(),
	$bulletContainer = $this.siblings('.orbit-bullets'),
	$bullets = $bulletContainer.children();

	//Add styling hooks
	$bulletContainer
	.addClass('has-thumbs');

	//Insert thumbnail images for each slide bullet
	$bullets
	.each(function(index, item){

	console.log($slides.eq(index).data('thumb-src'));

	//Amends _thumb to filename of image (Umbraco automatically generates thumbs to uploaded media)
	var slideImageUrl = $slides.eq(index).find('img').attr('src'),
	umbracoThumbUrl = slideImageUrl.replace(/.([^.]*)$/,'_thumb.'+'$1'),
	$thumbImage = $("<img/>").attr('src', $slides.eq(index).data('thumb-src') ? $slides.eq(index).data('thumb-src') : umbracoThumbUrl);

	$(item).append($thumbImage);
	});
	})
	.foundation('orbit', {
	animation: 'fade'
	, timer_speed: 7000
	, animation_speed: 0
	, bullets: true
	, variable_height: true
	, timer: false
	, slide_number: false
	}, function (response) {
	// console.log('Carousel errors:');
	// console.log(response.errors);
	// alert('response');
	});
	});
	</script>

	</body>
	</html>