Open fancybox gallery from SVG icon but display original images in right side thumbs list issue

0
votes

I have been using fancybox in many projects. Normally I trigger the image popup screen from the image thumb, but now I have to trigger it from SVG icon that is inside img class. Fancybox takes the icon and shows it on the right side thumb list. It should show the actual image from the a tag that has data-fancybox attribute.

enter image description here enter image description here

Here is how it works normally with having image thumb as popup trigger:

<a href="image.jpg" data-fancybox="gallery">
   <img class="thumb" src="image.jpg">
</a>

This will result as expected, the gallery popup opens, right side has correct images in the list.

But now when I use SVG icon to trigger the popup it shows the SVG on the right side gallery thumbs list.

<a href="image.jps" data-fancybox="gallery">
   <img src="img/zoom_plus.svg" style="height:50px;">
</a>

Has anyone had the same need and how did you solve it? Did not find info from the original documentation here: https://fancyapps.com/fancybox/3/docs/

2
javascripthtmlcssfancybox

2 Answers

0
votes

I have made a dirty solution by adding the image before the icon image and set it's display to none. It's working now but would like to know how it's done the right way.

<a href="image.jps" data-fancybox="gallery">
   <img src="image.jpg" style="display:none;">
   <img src="img/zoom_plus.svg" style="height:50px;">
</a>
0
votes

Use data-fancybox-trigger attributes, see docs - https://fancyapps.com/fancybox/3/docs/#usage