Thumbnails

The Carousel Thumbs plugin adds a thumbnail preview. Here are examples of how to use and customize it for Fancybox.

Basic usage

Declarative

By default, the first image found in the trigger element will be used as the source for the thumbnail:

<a href="https://lipsum.app/id/1/1800x1200" data-fancybox="gallery">
  <img src="https://lipsum.app/id/1/300x200" alt="Gallery picture #1" />
</a>

A different source can be set using the data-thumb-src attribute. Here is a list of supported data attributes:

Name	Description
data-thumb-src	Custom thumbnail source
data-thumb-alt	Custom alt attribute value for thumbnail
data-thumb-class	Custom class name for a carousel slide containing a thumbnail

<a
  href="https://lipsum.app/id/1/1800x1200"
  data-fancybox="gallery"
  data-thumb-src="https://lipsum.app/id/1/150x100"
  data-thumb-alt="My custom description #1"
  data-thumb-class="my_custom_thumb_class"
>
  <img src="https://lipsum.app/id/1/300x200" alt="Gallery picture #1" />
</a>

Programmatic

Supported slide keys correspond to declarative usage data attributes:

Name	Type
thumbSrc	string | HTMLImageElement
thumbAlt	string
thumbClass	string

Fancybox.show(
  [
    {
      src: "https://lipsum.app/id/1/1800x1200",
      caption: "Sample image #1",
      thumbSrc: "https://lipsum.app/id/1/150x100",
      thumbAlt: "My custom description #1",
      thumbClass: "my_custom_thumb_class",
    },
    {
      src: "https://lipsum.app/id/2/1800x1200",
      caption: "Sample image #2",
      thumbSrc: "https://lipsum.app/id/2/150x100",
      thumbAlt: "My custom description #2",
      thumbClass: "my_custom_thumb_class",
    },
    {
      src: "https://lipsum.app/id/3/1800x1200",
      caption: "Sample image #3",
      thumbSrc: "https://lipsum.app/id/3/150x100",
      thumbAlt: "My custom description #3",
      thumbClass: "my_custom_thumb_class",
    },
  ],
  {
    // Your custom options
  }
);

JS Bin Example

Change type

The default thumbnail type is "modern". Here’s how to change it to "classic":

Fancybox.bind("[data-fancybox]", {
  Carousel: {
    Thumbs: {
      type: "classic",
    },
  },
});

JS Bin Example

Vertical thumbnails

It is also possible to display thumbnails vertically. This is currently only supported for the "classic" type. You'll probably want to align the thumbnails to the top when they fit within the available area. Use this snippet to archive it:

Fancybox.bind("[data-fancybox]", {
  Carousel: {
    Thumbs: {
      type: "classic",
      Carousel: {
        vertical: true,
        center: (ref) => {
          return ref.getTotalSlideDim() > ref.getViewportDim();
        },
      },
    },
  },
});

It is also recommended to use the carousel breakpoints option to change the carousel direction depending on the screen size. Example:

Fancybox.bind("[data-fancybox]", {
  Carousel: {
    Thumbs: {
      type: "classic",
      Carousel: {
        center: (ref) => {
          return (
            !ref.isVertical() || ref.getTotalSlideDim() > ref.getViewportDim()
          );
        },
        vertical: false,
        breakpoints: {
          "(min-width: 640px)": {
            vertical: true,
          },
        },
      },
    },
  },
});

JS Bin Example

Hide thumbnails

Hide initially using the Carousel Thumbs plugin's showOnStart option:

Fancybox.bind("[data-fancybox]", {
  Carousel: {
    Thumbs: {
      showOnStart: false,
    },
  },
});

If you want to not show them at all, then disable the Thumbs plugin:

Fancybox.bind("[data-fancybox]", {
  Carousel: {
    Thumbs: false,
  },
});