slick-zoom.js

//= require vendor/slick.js
//= require vendor/photoswipe.js
//= require vendor/photoswipe-ui-default.js

function SlickZoom(options) {
  options = options || {};

  if (!(options.selector && options.item)) {
    return console.error('selector and item required');
  }

  $(options.selector).each(function(i) {
    var container = $(this);
    var items = container.find(options.item);
    var slickInstance = null;
    var slickOption = options.slickOption || {
      dots: true,
      arrows: true,
      speed: 300,
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: false,
      accessibility: false,
      centerPadding: '60px',
      centerMode: true
    };

    // init slick carousel if more than 2 items
    if (items.length >= 2) {
      slickInstance = container.slick(slickOption);
    }

    // init photoswipe
    container
      .attr('data-pswp-uid', i+1)
      .on('click', options.item, function (e) {
        e.preventDefault();
        var slideItem = $(this);
        var index = slideItem.index() - (slideItem.siblings('.slick-slide.slick-cloned').length / 2);
        openPhotoSwipe(index, container);
      });


    function parseThumbnailElements(el) {
      var data = [];
      el.find(options.item + ':not(.slick-cloned) img').each(function() {
        var img = this;
        data.push({
          el: img,
          src: img.src,
          msrc: img.src,
          w: img.naturalWidth,
          h: img.naturalHeight
        });
      });

      return data;
    };

    function openPhotoSwipe(index, $gallery) {

      if (isNaN(parseInt(index, 10))) { return; }

      var pswpElement = $('.pswp')[0];
      var gallery;

      var items = parseThumbnailElements($gallery);

      // define options (if needed)
      var options = {
        galleryUID: $gallery.attr('data-pswp-uid'),
        getThumbBoundsFn: function(index) {
          // See Options->getThumbBoundsFn section of docs for more info
          var thumbnail = items[index].el,
            pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
            rect = thumbnail.getBoundingClientRect();

          return {
            x: rect.left,
            y: rect.top + pageYScroll,
            w: rect.width
          };
        }
      };

      options.index = parseInt(index, 10);
      options.fullscreenEl = false;

      // Pass data to PhotoSwipe and initialize it
      gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);

      gallery.listen('beforeChange', function() {
        var slideItem = $(gallery.currItem.el).closest(options.item);
        var currentIndex = slideItem.index() - (slideItem.siblings('.slick-slide.slick-cloned').length / 2);;
        if (slickInstance) {
          slickInstance.slick('slickGoTo', currentIndex);
        }
      });
      gallery.init();
    };

  });
}