0

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,&lt;br /&gt;that can contain &lt;em&gt;HTML&lt;/em&gt; 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>
1
  • Sorry, but it is not possible to help you without seeing your live page/demo. Also, you used "fancybox-3" tag, but the code seems to be copied from docs for Fancybox5.
    – Janis
    Commented Nov 14, 2023 at 10:09

1 Answer 1

0

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/[email protected]/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.

2
  • The code is picked from that fiddle. I have used the fancybox 5. But unfortunately added the wrong tag here. I have the same code as it is there.
    – Abubakar
    Commented Nov 14, 2023 at 13:04
  • Do you have a full html page example you can post so we can see what order you have the styles, scripts and content added? It could be that you have a js error or clash with another piece of code Commented Nov 15, 2023 at 14:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.