gbxPEB

gbxpeb.markdown

gbxPEB

A Pen by Nir Bartov on CodePen.

License.

index.html

<base href="http://s.fotorama.io/">
    
<!-- Future fotorama -->
<div class="gallery">
<div class="thumbs">
  <a href="okonechnikov/1-lo.jpg"><img src="okonechnikov/1-lo.jpg"></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/11-lo.jpg"><img src="okonechnikov/11-thumb.jpg"></a>
  <a href="okonechnikov/12-lo.jpg"><img src="okonechnikov/12-thumb.jpg"></a>
  <a href="okonechnikov/13-lo.jpg"><img src="okonechnikov/13-thumb.jpg"></a>
  <a href="okonechnikov/14-lo.jpg"><img src="okonechnikov/14-thumb.jpg"></a>
  <a href="okonechnikov/15-lo.jpg"><img src="okonechnikov/15-thumb.jpg"></a>
  <a href="okonechnikov/16-lo.jpg"><img src="okonechnikov/16-thumb.jpg"></a>
  <a href="okonechnikov/20-lo.jpg"><img src="okonechnikov/20-thumb.jpg"></a>
  <a href="okonechnikov/21-lo.jpg"><img src="okonechnikov/21-thumb.jpg"></a>
  <a href="okonechnikov/22-lo.jpg"><img src="okonechnikov/22-thumb.jpg"></a>
  <a href="okonechnikov/23-lo.jpg"><img src="okonechnikov/23-thumb.jpg"></a>
  <a href="okonechnikov/24-lo.jpg"><img src="okonechnikov/24-thumb.jpg"></a>
  <a href="okonechnikov/17-lo.jpg"><img src="okonechnikov/17-thumb.jpg"></a>
  <a href="okonechnikov/18-lo.jpg"><img src="okonechnikov/18-thumb.jpg"></a>
  <a href="okonechnikov/19-lo.jpg"><img src="okonechnikov/19-thumb.jpg"></a>
</div>
</div>

script.js

$('.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: 520, maxwidth:782, transition: 'crossfade', loop: true, keyboard: true, });

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

style.css

*, *:before, *:after {
  box-sizing: border-box;
}

body {
    margin: 10px;
}

.gallery{
  width:782px;
  margin: 0 auto;
}

.thumbs {
  width: 100%;
  margin-top:34px;
}

.thumbs a {
  visibility: visible;
  text-decoration: none;
  color: #34457b;
  margin-right: 30px;
}
.thumbs a:hover {
  color: red;
}
.thumbs img {
  width: 170px;
  height: 115px;
  border: 2px #fff solid;
  padding: 3px;
  opacity: 1;
  transition: opacity .5s;
  margin-bottom: 30px;
  
}

.thumbs a:nth-child(4n+0){
margin-right: 0px;
}

.thumbs a:hover img, .thumbs a.active img {
  border-color: black;
  padding:3px;
  opacity: 1;
  transition: none;
}