Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Add thumbnails to Orbit Bullets in Zurb Foundation 4.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.