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:
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.