https://vlsi1217.github.io/js/gallery.js

1(function($){
2  // Caption
3  $('.content').each(function(i){
4    $(this).find('img').each(function(){
5      if (!$(this).hasClass('nofancybox')){
6        var alt = this.alt;
7        if (alt){
8          $(this).wrap('<a href="' + this.src + '" title="' + alt + '" class="fancybox" rel="gallery' + i + '" />');
9        } else {
10          $(this).wrap('<a href="' + this.src + '" class="fancybox" rel="gallery' + i + '" />');
11	    }
12      }
13    });
14  });
15
16  // Gallery
17  var play = function(parent, item, callback){
18    var width = parent.width();
19
20    item.imagesLoaded(function(){
21      var _this = this[0],
22        nWidth = _this.naturalWidth,
23        nHeight = _this.naturalHeight;
24
25      callback();
26      this.animate({opacity: 1}, 500);
27      parent.animate({height: width * nHeight / nWidth}, 500);
28    });
29  };
30
31  $('.gallery').each(function(){
32    var $this = $(this),
33      current = 0,
34      photoset = $this.children('.photoset').children(),
35      all = photoset.length,
36      loading = true;
37
38    play($this, photoset.eq(0), function(){
39      loading = false;
40    });
41
42    $this.on('click', '.prev', function(){
43      if (!loading){
44        var next = (current - 1) % all;
45        loading = true;
46
47        play($this, photoset.eq(next), function(){
48          photoset.eq(current).animate({opacity: 0}, 500);
49          loading = false;
50          current = next;
51        });
52      }
53    }).on('click', '.next', function(){
54      if (!loading){
55        var next = (current + 1) % all;
56        loading = true;
57
58        play($this, photoset.eq(next), function(){
59          photoset.eq(current).animate({opacity: 0}, 500);
60          loading = false;
61          current = next;
62        });
63      }
64    });
65  });
66})(jQuery);