Fancybox thumbnail change structure

[deepaks-sylvane]

The thumbnail of fancybox has following structure -

<div class="carousel__track" style="transform: translate3d(380px, 0px, 0px) scale(1);">
	<div data-index="0" class="carousel__slide has-thumb has-image is-selected is-nav-selected">
		<div class="fancybox__thumb" style="background-image:url('https://lipsum.app/id/46/200x150')"></div>
	</div>
	<div data-index="1" class="carousel__slide has-thumb has-image is-selected">
		<div class="fancybox__thumb" style="background-image:url('https://lipsum.app/id/47/200x150')"></div>
	</div>
	<div data-index="2" class="carousel__slide has-thumb has-image is-selected">
		<div class="fancybox__thumb" style="background-image:url('https://lipsum.app/id/51/200x150')"></div>
	</div>
</div>

I want to change the background-image to img tags. Like below -

<div class="carousel__track" style="transform: translate3d(380px, 0px, 0px) scale(1);">
	<div data-index="0" class="carousel__slide has-thumb has-image is-selected is-nav-selected">
		<div class="fancybox__thumb">
			<img src="https://lipsum.app/id/46/200x150">
		</div>
	</div>
	<div data-index="1" class="carousel__slide has-thumb has-image is-selected">
		<div class="fancybox__thumb">
			<img src="https://lipsum.app/id/47/200x150">
		</div>
	</div>
	<div data-index="2" class="carousel__slide has-thumb has-image is-selected">
		<div class="fancybox__thumb">
			<img src="https://lipsum.app/id/51/200x150">
		</div>
	</div>
</div>

Is it possible to accomplish the above without editing any of the core module files?

[fancyapps]

Hi,

There is currently no option for that. You could copy/paste source code of Thumbs plugin and use it as template to create your own plugin.

[deepaks-sylvane]

Yes, I will try creating a new plugin with Thumbs source.
But how do you add a new plugin to fancybox?

[fancyapps]

Well, it depends if you are using esm or umd build. But, you know, I decided to add new tpl option for Thumbs plugin (v4.0.31), example:

Fancybox.show(
      [
        {
          src: "https://lipsum.app/id/1/800x600",
          type: "image",
        },
        {
          src: "https://lipsum.app/id/2/800x600",
          type: "image",
        },
      ],
      {
        Thumbs: {
          tpl: `<div class="fancybox__thumb"><img src="{{src}}"></div>`,
        },
      }
    );

Just remember to use CSS to remove top padding from .fancybox__thumb {}.

[deepaks-sylvane]

Works perfectly
Thanks for that quick update and release