Thumbnails #

This built-in plugin seamlessly integrates the Carousel Thumbs plugin to create thumbnail image bar. Manages the visibility of the thumbnail bar.

Examples #

Modern thumbnails #

const options = {
  Thumbs: {
    type: "modern",
  },
};

JSFiddle Example

Classic thumbnails #

const options = {
  Thumbs: {
    type: "classic",
  },
};

JSFiddle Example

Disable thumbnails #

If you want to disable thumbnails completely, set Thumbs:false:

const options = {
  Thumbs: false,
};

JSFiddle Example

But if you want to just hide thumbnails initially, use the showOnStart option:

const options = {
  Thumbs: {
    showOnStart: false,
  },
};

JSFiddle Example

Usage #

If you use Fancybox declaratively, the first image in the trigger element will be used as the thumbnail source:

<a href="image-a.jpeg" data-fancybox>
  <img src="thumbnail-a.jpeg" />
</a>

Use data-thumb attribute to set a different thumbnail source or to specify a source for elements that do not contain images:

<a href="image-a.jpeg" data-fancybox data-thumb="thumbnail-a.jpeg">
  Click me
</a>

When launching Fancybox programmatically, use thumb key:

Fancybox.show([
  {
    src: "image-a.jpeg",
    thumb: "humbnail-a.jpeg",
  },
]);

It is also possible to set an image DOM element as the thumbnail source, in which case Fancybox will launch with zoom-in animation:

Fancybox.show([
  {
    src: "image-a.jpeg",
    thumb: document.querySelector("img"),
  },
]);

Options #

key #

Keyboard shortcut to toggle thumbnail container

Type

string

Default

t

parentEl #

Change the location where the thumbnail container is added

Type

HTMLElement | null | (() => HTMLElement | null)

Default

null

showOnStart #

If thumbnail bar should appear automatically after Fancybox is launched

Type

boolean

Default

true

Carousel #

Customize carousel options

Type

Partial<CarouselOptionsType>

Default

{
    classes: {
        container: "f-thumbs f-classic-thumbs",
        viewport: "f-classic-thumbs__viewport",
        track: "f-classic-thumbs__track",
        slide: "f-classic-thumbs__slide",
    },
}

classes #

Class names for DOM elements

Type

Record<string, string>

Default

{
    container: "f-thumbs f-modern-thumbs",
    track: "f-modern-thumbs__track",
    slide: "f-modern-thumbs__slide",
    inSync: "in-sync",
    isSelected: "is-selected",
    isLoading: "is-loading",
    hasThumbs: "has-thumbs",
}

minCount #

Minimum number of slides with thumbnails in the carousel to create Thumbs

Type

number

Default

2

parentEl #

Change where thumbnail container is appended

Type

HTMLElement | null | (() => HTMLElement | null)

Default

null

thumbTpl #

Template for the thumbnail element

Type

string

Default

<button type="button" aria-label="{{GOTO}}"><img class="f-thumb" data-lazy-src="{{%s}}" alt="" /></button>

type #

Choose a type - "classic" (syncs two instances of the carousel) or "modern" (Apple Photos style)

Type

"classic" | "modern"

Default

modern