RPeraltaJr
4/29/2020 - 9:39 PM

Gallery Lightbox

Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device (for jQuery or Zepto.js).

Source: https://dimsemenov.com/plugins/magnific-popup/

$(document).ready(function() {
    $('#gallery').magnificPopup({
        delegate: '.item__image',
        type: 'image',
        gallery:{
            enabled:true
        }
    });
});

// * Add swipe support 
// * Requires: jquery.touchswipe (https://cdnjs.com/libraries/jquery.touchswipe)
(function() {
    /* Define a variável que dá swipe no lightbox */
    var magnificPopup = $.magnificPopup.instance;
  
    /* Carrega a função quando clica no lightbox (senão não pega a classe utilizada) */
    $("a.image-lightbox").click(function(e) {
  
      /* Espera carregar o lightbox */
      setTimeout(function() {
          /* Swipe para a esquerda - Próximo */
          $(".mfp-container").swipe( {
            swipeLeft:function(event, direction, distance, duration, fingerCount) {
              console.log("swipe right");
              magnificPopup.next();
            },
  
          /* Swipe para a direita - Anterior */
          swipeRight:function(event, direction, distance, duration, fingerCount) {
            console.log("swipe left");
            magnificPopup.prev();
          },
          });
      }, 500);
    });
  
  }).call(this);
<div id="gallery">
	<a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" title="The Cleaner"><img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" width="75" height="75"></a>
	<a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" title="Winter Dance"><img src="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_s.jpg" width="75" height="75"></a>
	<a href="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_b.jpg" title="The Uninvited Guest"><img src="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_s.jpg" width="75" height="75"></a>
</div>