Due to popular demand an example showing how to build a custom pager with thumbnails. Of course this is only one way of doing it :)
<ul id="thumbnails">
<li>
<a href="#slide1">
<img src="/assets/img/image-1.jpg" alt="This is caption 1 <a href='#link'>Even with links!</a>">
</a>
</li>
<li>
<a href="#slide2">
<img src="/assets/img/image-2.jpg" alt="This is caption 2">
</a>
</li>
<li>
<a href="#slide3">
<img src="/assets/img/image-3.jpg" alt="And this is some very long caption for slide 3. Yes, really long.">
</a>
</li>
<li>
<a href="#slide4">
<img src="/assets/img/image-4.jpg" alt="And this is some very long caption for slide 4.">
</a>
</li>
</ul>
<div class="thumb-box">
<ul class="thumbs">
<li><a href="#1" data-slide="1"><img src="/assets/img/image-1.jpg" alt="This is caption 1 <a href='#link'>Even with links!</a>"></a></li>
<li><a href="#2" data-slide="2"><img src="/assets/img/image-2.jpg" alt="This is caption 2"></a></li>
<li><a href="#3" data-slide="3"><img src="/assets/img/image-3.jpg" alt="And this is some very long caption for slide 3. Yes, really long."></a></li>
<li><a href="#4" data-slide="4"><img src="/assets/img/image-4.jpg" alt="And this is some very long caption for slide 4."></a></li>
</ul>
</div>
var thumbs = jQuery('#thumbnails').slippry({
// general elements & wrapper
slippryWrapper: '<div class="slippry_box thumbnails" />',
// options
transition: 'horizontal',
pager: false,
auto: false,
onSlideBefore: function (el, index_old, index_new) {
jQuery('.thumbs a img').removeClass('active');
jQuery('img', jQuery('.thumbs a')[index_new]).addClass('active');
}
});
jQuery('.thumbs a').click(function () {
thumbs.goToSlide($(this).data('slide'));
return false;
});
/* Thumbnails */
.thumb-box {
padding: 1.4em 0 1em;
margin-left: -1%;
width: 102%;
.thumbs {
@include clearfix;
li {
float: left;
width: 25%;
text-align: center;
padding: 0 1%;
img {
width: 100%;
opacity: .8;
@include transition(opacity .32s);
border-bottom: 4px solid transparent;
&.active {
border-color: $bc-rk-blue;
opacity: 1;
}
}
&:hover {
img {
opacity: 1;
@include transition(opacity .2s);
}
}
}
}
}