Custom vertical thumbs

by glebcha

HTML

<link rel="stylesheet" href="http://fotorama.s3.amazonaws.com/fotorama.css">
<script src="http://fotorama.s3.amazonaws.com/fotorama.js"></script>
<!-- Just don’t want to repeat this prefix in every img[src] -->
<base href="http://s.fotorama.io/">

<div class="fotorama-wrap">
<!-- Future fotorama -->
<div class="thumbs">
  <a href="okonechnikov/1-lo.jpg"><img src="okonechnikov/1-thumb.jpg" alt="description"></a>
  <a href="okonechnikov/2-lo.jpg"><img src="okonechnikov/2-thumb.jpg"></a>
  <a href="okonechnikov/4-lo.jpg"><img src="okonechnikov/4-thumb.jpg"></a>
  <a href="okonechnikov/5-lo.jpg"><img src="okonechnikov/5-thumb.jpg"></a>
  <a href="okonechnikov/6-lo.jpg"><img src="okonechnikov/6-thumb.jpg"></a>
  <a href="okonechnikov/7-lo.jpg"><img src="okonechnikov/7-thumb.jpg"></a>
  <a href="okonechnikov/8-lo.jpg"><img src="okonechnikov/8-thumb.jpg"></a>
  <a href="okonechnikov/9-lo.jpg"><img src="okonechnikov/9-thumb.jpg"></a>
  <a href="okonechnikov/10-lo.jpg"><img src="okonechnikov/10-thumb.jpg"></a>
  <a href="okonechnikov/7-lo.jpg"><img src="okonechnikov/7-thumb.jpg"></a>
  <a href="okonechnikov/8-lo.jpg"><img src="okonechnikov/8-thumb.jpg"></a>
  <a href="okonechnikov/9-lo.jpg"><img src="okonechnikov/9-thumb.jpg"></a>
  <a href="okonechnikov/10-lo.jpg"><img src="okonechnikov/10-thumb.jpg"></a>
  <a href="okonechnikov/7-lo.jpg"><img src="okonechnikov/7-thumb.jpg"></a>
  <a href="okonechnikov/8-lo.jpg"><img src="okonechnikov/8-thumb.jpg"></a>
  <a href="okonechnikov/9-lo.jpg"><img src="okonechnikov/9-thumb.jpg"></a>
  <a href="okonechnikov/10-lo.jpg"><img src="okonechnikov/10-thumb.jpg"></a>
</div>
</div>

<!-- © -->    
<p>Photos <a href="http://okonet.ru/">by Andrey Okonetchnikov</a></p>

CSS

body {
    margin: 10px;
}

.fotorama-wrap {
    overflow: hidden;
    position: relative;
    padding: 2px 0 0;
}

.thumbs {
    margin: 2px 2px 0 0;
}

.thumbs a {
    display: inline-block;
    vertical-align: top;
    visibility: visible;
    text-decoration: none;
    color: #34457b;
}
.thumbs a:hover {
    color: #af1d05;
}
.thumbs img {
    display: block;
    width: 48px;
    height: auto;
    border: 2px solid #fff;
    opacity: .75;
    transition: opacity .5s;
}

.thumbs a:hover img, .thumbs a.active img {
    border-color: #00afea;
    opacity: 1;
    transition: none;
}

.fotorama {
    overflow: hidden;
    position: relative;
}

JavaScript

$('.thumbs').each(function () {
  $('a', this).each(function () {
    var $a = $(this);
    // set ids, will use them later
    $a.attr({id: $a.attr('href').replace(/[\/\.-]/g, '')});
  });

  var $thumbs = $(this),
      $fotorama = $thumbs.clone();

  $fotorama
      .on('fotorama:show', function (e, fotorama) {
        // pick the active thumb by id
        $('#' + fotorama.activeFrame.id)
            .addClass('active')
            .siblings()
            .removeClass('active');
      })
      .addClass('fotorama')
      .removeClass('thumbs')
      .insertBefore(this)
      .fotorama({nav: false, width: '100%', maxHeight: 400, ratio: 3/2});

  // get access to the API
  var fotorama = $fotorama.data('fotorama');

  $thumbs.on('click', 'a', function (e) {
    e.preventDefault();
    // show frame by id
    fotorama.show(this.id);
  });
});