Examples - Thumbnails

HTML Markup

<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>

jQuery

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;
});

CSS

/* 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);
        }
      }
    }
  }
}