https://geranoilarisa.com/templates/tech/js/init_photoswipe.js

1// Inits photoswipe. A js library for responsive, mobile friendly, 
2// touch enabled lightbox.
3// This script should be loaded in the /inc/photoswipe.php file.
4
5$(document).ready(function() {
6
7  var launchPhotoswipe = function(pic, gallery) {
8    var pswpElement = document.querySelectorAll('.pswp')[0];
9    // Build items array
10    var phItems = [];
11    var itemCount = 0;
12    var picIndex = 0;
13    gallery.find('a').each(function() {
14      var cImg = $(this);
15      phItem = {
16          'src': cImg.attr('href'),
17          'w': 800,
18          'h': 600,
19          'title': cImg.attr('title')
20      };
21
22      // Small image placeholder, have to check if it exists first
23      if (cImg.find('img.thumb').length > 0) {
24        var cThumb = cImg.find('.thumb');
25        phItem.msrc = cThumb.attr('src');
26        phItem.w = cThumb.prop('naturalWidth');
27        phItem.h = cThumb.prop('naturalHeight');
28      }
29      phItems.push(phItem);
30      // Get the index of the current item so that the gallery opens with
31      // the image we clicked on.
32      if (pic.attr('href') === cImg.attr('href')) {
33        picIndex = itemCount;
34      }
35      itemCount += 1;
36    });
37
38    var thumbBounds = function(index) {
39      var th = pic.find('img');
40      var bounds = {
41        'x': th.offset().left, 
42        'y': th.offset().top,
43        'w': th.width()
44      };
45      return  bounds;
46    };
47
48    // Define options
49    var phOptions = {
50      index: picIndex, // start at first slide
51      getThumbBoundsFn: thumbBounds,
52      showHideOpacity:true,
53      bgOpacity: 0.8,
54      loop: true
55    };
56
57    // Initializes and opens PhotoSwipe
58    var pswGallery = new PhotoSwipe( 
59      pswpElement, 
60      PhotoSwipeUI_Default, 
61      phItems, 
62      phOptions
63    );
64    pswGallery.init();
65  };
66
67  function attachPicEvents(galleries) {
68    // Init photoswipe everytime we click on an image link in a gallery.
69    galleries.on('click', function(e) {
70      // Make sure we got the photoswipe element.
71      var thisEl = $(e.target);
72      var thisGallery = thisEl.closest('.photoswipe-gallery, .submenu-gallery');
73      if (! thisEl.is('a')) {
74        thisEl = thisEl.closest('a');
75      }
76      var imgFormats = ['.jpg', '.jpeg', '.png', '.JPG'];
77      // Check if our element links to an image. If it does then launch Photoswipe. Else let
78      // the event do what it is supposed to do.
79      $.each(imgFormats, function(index, value) {
80        if (thisEl.attr('href').indexOf(value) >= 0) {
81          e.preventDefault();
82          launchPhotoswipe(thisEl, thisGallery);
83          return false;
84        }
85      });
86    });
87  }
88
89  if ( $('body.gallery').length > 0 ) {
90    attachPicEvents($('.photoswipe-gallery, .submenu-gallery'));
91  } else {
92    setTimeout(function() {
93      attachPicEvents($('.photoswipe-gallery, .submenu-gallery'));
94    }, 1000);
95  }
96
97});