https://eloquent-khapse-98a9d2.netlify.app/js/wrapImage.js

1$(document).ready(function () {
2  wrapImageWithFancyBox();
3});
4
5/**
6 * Wrap images with fancybox support.
7 */
8function wrapImageWithFancyBox() {
9  $(".post-detail")
10    .find("img")
11    .not(".swiper-slide img")
12    .not(".sidebar-image img")
13    .not("#author-avatar img")
14    .not(".post-donate img")
15    .not(".post-donate img")
16    .not(".friend-avatar img")
17    .not("[title=notice]")
18    .not("#myComment img")
19    .not(".social-share .qrcode img")
20    .not(".ghcard img")
21    .not("img.inline")
22    .not(".site-card img")
23    .not(".link-card img")
24    .not(".btns img")
25    .not(".gallery-group-img")
26    .not('.getJsonPhoto-api img')
27    .not('.getJsonTalk-api img')
28    .each(function () {
29      var $image = $(this);
30      var imageCaption = $image.attr("alt");
31      var $imageWrapLink = $image.parent("a");
32      var $linkWrapDiv = $imageWrapLink.parent("div");
33      if ($imageWrapLink.length < 1) {
34        var src = this.getAttribute("data-src") || this.getAttribute("src");
35        var idx = src.lastIndexOf("?");
36        if (idx != -1) {
37          src = src.substring(0, idx);
38        }
39        $imageWrapLink = $image
40          .wrap('<a href="' + src + '" class="fancybox"></a>')
41          .parent("a");
42        $linkWrapDiv = $imageWrapLink
43          .wrap('<div class="fancybox"></div>')
44          .parent("div");
45      }
46
47      $imageWrapLink.attr("data-fancybox", "images");
48      if (imageCaption) {
49        $imageWrapLink.attr("data-caption", imageCaption);
50        if (!$linkWrapDiv.hasClass('image-caption')) {
51          $linkWrapDiv.append(
52            '<span class="image-caption">' + imageCaption + "</span>"
53          );
54        }
55      }
56    });
57  
58  Fancybox.bind('[data-fancybox="images"]', {
59    Toolbar: {
60      display: {
61        left: ["infobar"],
62        middle: [
63          "zoomIn",
64          "zoomOut",
65          "toggle1to1",
66          "rotateCCW",
67          "rotateCW",
68          "flipX",
69          "flipY",
70        ],
71        right: ["slideshow", "thumbs", "close"],
72      },
73    },
74  });
75}