Ecommerce Shopify WordPress Discussion

I have issue with fancybox on my shopify store

when I click on any image it always opens from the first image.I just copy and paste the code from fiddle. <div> <a data-fancybox="gallery" href="https://lipsum.app/id/2/1024x768" data-caption="Optional caption,<br />that can contain <em>HTML</em> code" > <img src="https://lipsum.app/id/2/200x150" /> </a> <a data-fancybox="gallery" href="https://lipsum.app/id/3/1024x768"> <img src="https://lipsum.app/id/3/200x150" /> </a> <a data-fancybox="gallery" href="https://lipsum.app/id/4/1024x768"> <img src="https://lipsum.app/id/4/200x150" /> </a> </div>
So what you have here is only a snippet of what you need to activate a FancyBox v5 slider. (If you are using v3 as you have tagged you need the docs for that version) If you look at the full jsfiddle for the latest fancybox it has a full HTML dom including the script that activates the fancybox functionality: <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script> <script> Fancybox.bind('[data-fancybox="gallery"]', { // }); </script> You need these scripts to activate any form of functionality. If you match the setup of the Fancybox official fiddle (https://jsfiddle.net/tgcpey0m/), you should not be getting the error you described.

December 29, 2023

Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.