Preface

In this post I explained how to add Fancybox to the cactus theme. I later swapped my comment system to Twikoo. While upgrading today I stumbled across: Integrate Twikoo with lightGallery to zoom comment images. Since Fancybox is already installed, I might as well hook Twikoo to Fancybox.

Process

Following the author’s idea, locate the twikoo.init code and modify it. I’ll focus on what changed rather than pasting the original.

Here’s the final code:

Final result

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

twikoo.init({
  // envId: 'abcdef',
  // ...
  onCommentLoaded: function () {
    var commentContents = document.getElementsByClassName('tk-content');
    for (var i = 0; i < commentContents.length; i++) {
      var commentItem = commentContents[i];
      var imgEls = commentItem.getElementsByTagName('img');
      if (imgEls.length > 0) {
        for (var j = 0; j < imgEls.length; j++) {
          var imgEl = imgEls[j];
          // Skip emoji, only wrap normal images
          if (imgEl.className != 'tk-owo-emotion') {
            var aEl = document.createElement('a');
            aEl.setAttribute('data-fancybox', 'gallery');
            aEl.setAttribute('data-src', imgEl.getAttribute('src'));
            aEl.setAttribute('data-caption', 'Comments: '+imgEl.getAttribute('alt'));
            aEl.appendChild(imgEl.cloneNode(false));
            imgEl.parentNode.insertBefore(aEl, imgEl.nextSibling);
            imgEl.remove();
          }
        }
      }
    }
  }
});

Below is how I arrived here—use the idea even if your theme code differs.

Read the original code

For reference, here’s the original snippet:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

twikoo.init({
  // envId: 'abcdef',
  // ...
  onCommentLoaded: function () {
    var commentContents = document.getElementsByClassName('tk-content');
    for (var i = 0; i < commentContents.length; i++) {
      var commentItem = commentContents[i];
      var imgEls = commentItem.getElementsByTagName('img');
      if (imgEls.length > 0) {
        for (var j = 0; j < imgEls.length; j++) {
          var imgEl = imgEls[j];
          var aEl = document.createElement('a');
          aEl.setAttribute('class', 'tk-lg-link');
          aEl.setAttribute('href', imgEl.getAttribute('src'));
          aEl.setAttribute('data-src', imgEl.getAttribute('src'));
          aEl.appendChild(imgEl.cloneNode(false));
          imgEl.parentNode.insertBefore(aEl, imgEl.nextSibling);
          imgEl.remove();
        }
        lightGallery(commentItem, {
          selector: '.tk-lg-link',
          share: false
        });
      }
    }
  }
});

The idea: find images (img) inside the comment area (tk-content), wrap each with the plugin-specific <a> markup, insert it, then remove the original image.

You can swap in other plugins by adjusting the markup:

lightgallery:

<a class="tk-lg-link" data-src="xxx.png" href="xxx.png"><img src="xxx.png" alt="xxx"></a>

fancybox:

<a data-fancybox="gallery" data-src="xxx.png" data-caption="xxx"><img src="xxx.png" alt="xxx"></a>

Change the tags

Copy the structure and switch attributes to Fancybox. For example, lightGallery needs class="tk-lg-link", whereas Fancybox needs data-fancybox="gallery". So replace aEl.setAttribute('class', 'tk-lg-link'); with aEl.setAttribute('data-fancybox', 'gallery');, and so on.

Remove unused code

lightGallery also required:

1
2
3
4

lightGallery(commentItem, {
          selector: '.tk-lg-link',
          share: false
        });

Fancybox doesn’t need this, so delete it. After these changes, try it out—and you’ll hit another issue.

Comment images vs emoji

Emoji are also <img> elements (class="tk-owo-emotion"), so the plugin was wrapping emoji too, which is unnecessary.

Handle emoji

Add a simple check to skip emoji:

1
2
3
4
5
6
7
8
9

if (imgEl.className != 'tk-owo-emotion') {
  var aEl = document.createElement('a');
  aEl.setAttribute('data-fancybox', 'gallery');
  aEl.setAttribute('data-src', imgEl.getAttribute('src'));
  aEl.setAttribute('data-caption', 'Comments: '+imgEl.getAttribute('alt'));
  aEl.appendChild(imgEl.cloneNode(false));
  imgEl.parentNode.insertBefore(aEl, imgEl.nextSibling);
  imgEl.remove();
}

Make sure this condition sits inside the second for-loop.

Result

Final effect

That’s it—clean galleries without wrapping emoji.

Thanks

iMaeGoo

twikoo

fancybox