Skip to main content

Thumbnails

Thumbnail plugin provides a strip of thumbnail images. It basically creates new Carousel instance and uses Carousel Sync plugin to sync it with the main Fancybox carousel.

Use CSS to customize thumbnail dimensions, spacing and colors, for example (demo):

.fancybox__container {  --fancybox-thumbs-border-radius: 50%;  --fancybox-thumbs-ratio: 1;
  --fancybox-thumbs-width: 50px;  --fancybox-thumbs-height: 50px;
  --fancybox-accent-color: #f472b6;}

By default, Fancybox gallery items change without a sliding effect when you click thumbnails. Use JS options to add animation (demo):

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

Gallery can have an unlimited number of items, only visible thumbnails will be loaded. Since Carousel preloads next/previous page by default, they will also load be loaded. You can easily disable preloading:

Fancybox.Plugins.Thumbs.defaults.Carousel.preload = 0;

Options#

autoStart {Boolean}#

Automatically show thumbnails when opened. Default: true

minSlideCount {Number}#

The minimum number of images in the gallery to display thumbnails. Default: 2

key {String}#

Keyboard shortcut to toggle thumbnail container. Default: t

Carousel {Object}#

Customize Carousel instance. Default: {},

API#

You can check current state of Thumbnail plugin and toggle visibility of thumbnail strip using API:

Fancybox.getInstance().plugins.Thumbs.state;Fancybox.getInstance().plugins.Thumbs.toggle();