https://liuchang.men/js/third-party/fancybox.js

1/* global Fancybox */
2
3document.addEventListener('page:loaded', () => {
4
5  /**
6   * Wrap images with fancybox.
7   */
8  document.querySelectorAll('.post-body :not(a) > img, .post-body > img').forEach(image => {
9    const imageLink = image.dataset.src || image.src;
10    const imageWrapLink = document.createElement('a');
11    imageWrapLink.classList.add('fancybox');
12    imageWrapLink.href = imageLink;
13    imageWrapLink.setAttribute('itemscope', '');
14    imageWrapLink.setAttribute('itemtype', 'http://schema.org/ImageObject');
15    imageWrapLink.setAttribute('itemprop', 'url');
16
17    let dataFancybox = 'default';
18    if (image.closest('.post-gallery') !== null) {
19      dataFancybox = 'gallery';
20    } else if (image.closest('.group-picture') !== null) {
21      dataFancybox = 'group';
22    }
23    imageWrapLink.dataset.fancybox = dataFancybox;
24
25    const imageTitle = image.title || image.alt;
26    if (imageTitle) {
27      imageWrapLink.title = imageTitle;
28      // Make sure img captions will show correctly in fancybox
29      imageWrapLink.dataset.caption = imageTitle;
30    }
31    image.wrap(imageWrapLink);
32  });
33
34  Fancybox.bind('[data-fancybox]');
35});