https://ciphersaw.me/js/third-party/fancybox.js

1document.addEventListener('page:loaded', () => {
2
3  /**
4   * Wrap images with fancybox.
5   */
6  document.querySelectorAll('.post-body :not(a) > img, .post-body > img').forEach(element => {
7    const $image = $(element);
8    const imageLink = $image.attr('data-src') || $image.attr('src');
9    const $imageWrapLink = $image.wrap(`<a class="fancybox fancybox.image" href="${imageLink}" itemscope itemtype="http://schema.org/ImageObject" itemprop="url"></a>`).parent('a');
10    if ($image.is('.post-gallery img')) {
11      $imageWrapLink.attr('data-fancybox', 'gallery').attr('rel', 'gallery');
12    } else if ($image.is('.group-picture img')) {
13      $imageWrapLink.attr('data-fancybox', 'group').attr('rel', 'group');
14    } else {
15      $imageWrapLink.attr('data-fancybox', 'default').attr('rel', 'default');
16    }
17
18    const imageTitle = $image.attr('title') || $image.attr('alt');
19    if (imageTitle) {
20      // Do not append image-caption if pandoc has already created a figcaption
21      if (!$imageWrapLink.next('figcaption').length) {
22        $imageWrapLink.append(`<p class="image-caption">${imageTitle}</p>`);
23      }
24      // Make sure img title tag will show correctly in fancybox
25      $imageWrapLink.attr('title', imageTitle).attr('data-caption', imageTitle);
26    }
27  });
28
29  $.fancybox.defaults.hash = false;
30  $('.fancybox').fancybox({
31    loop   : true,
32    helpers: {
33      overlay: {
34        locked: false
35      }
36    }
37  });
38});