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).
$(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>