Fancybox

Fancybox saves you time and helps to easily create beautiful, modern overlay windows containing images, iframes, videos or any kind of HTML content.

This is the 4th generation of Fancybox and brings lots of fresh features. Both Carousel and Panzoom components are used under the hood and help ensure a best-in-class user experience. In addition, they are easy to integrate with each other.

Key features​

• No external dependencies
• Touch and mobile optimized with swipe, drag and pinch-to-zoom gestures
• Highly customizable with configuration options, Sass and CSS variables
• Multiple zoom levels
• Properly manages focus
• Closes with Back Button
• Accessible
• Smooth, natural animations
• Multiple instances
• Widely used, battle-tested
• Best user and developer experience

Quick demo​

Click on any image thumbnail to open image gallery with default look and feel.

This is just a tip of the iceberg, Fancybox can do so much more, check out Showcase for real-world examples for your inspiration.

Usage​

There are two main styles of coding when using Fancybox. Each of these styles has advantages and disadvantages, and you can combine the two.

Declarative​

Add a data-fancybox attribute to any element to enable Fancybox. Use data-src or href attribute to specify the source of the content.

If you wish to customize options, simply overwrite default click handler:

Fancybox.bind("[data-fancybox]", {
  // Your options go here
});

You can choose any CSS selector here to attach click handler to the currently selected set of elements as well as all future matching elements.

Grouping​

Galleries are created by adding the same attribute data-fancybox value to multiple elements. For example, adding data-fancybox="gallery" attribute to multiple elements, will create a gallery from all these elements.

You can also use groupAll and groupAttr options to control grouping, see these examples.

Caption​

Optionally, use data-caption attribute to show a caption under the content. Additionally, you can use caption option to change its content, example (demo):

Fancybox.bind('[data-fancybox="gallery"]', {
  caption: function (fancybox, carousel, slide) {
    return (
      `${slide.index + 1} / ${carousel.slides.length} <br />` + slide.caption
    );
  },
});

Use CSS to change position of the caption. For example, this will put caption at the top (demo):

.fancybox__slide {
  flex-direction: column-reverse;
}

Using data attributes​

Add these data attributes to any element to automatically add a click event that performs the action (demo).

Programmatic​

Use API to launch Fancybox programmatically from anywhere in the code.

Combine with Carousel​

To sync Fancybox with Carousel, follow two simple steps:

1. Create a carousel with elements that have the data-fancybox attribute (alternatively, use Fancybox.bind()).
2. Use Carousel.change event to detect changes of the gallery item, and set the carousel position to the corresponding page.

Example (full demo):

Fancybox.bind('[data-fancybox="gallery"]', {
  Carousel: {
    on: {
      change: (that) => {
        // Sync Carousel slide
        mainCarousel.slideTo(mainCarousel.findPageForSlide(that.page), {
          friction: 0,
        });
      },
    },
  },
});

You can also display multiple items on each slide, demo.

Media types​

Fancybox itself only displays HTML content. Additional media type support is provided by plugins that are included by default:

• Image for images;
• HTML for inline content, iframes, videos (HTML5, Youtube and Vimeo), Google maps, and Ajax.

A frequent question is - "Does it support PDF?". First, you have to understand that PDF is a complex file format. Parsing and rendering PDFs is outside the scope of this project.

However, there are two options:

• Simply link to a PDF file (optionally, use data-type="pdf" attribute):

  <a data-fancybox data-type="pdf" href="YOUR_PDF_FILE.pdf">Click me</a>
  

  Copy

  Fancybox will then create iframe element and will use file URL as src attribute. It will work very well on computers with modern browsers.

• If you're concerned about users using outdated browsers or using mobile devices, you can use PDF.js. Download and extract files on the root directory of your project. Then create links like this:

  <a
    data-fancybox
    data-type="pdf"
    href="/pdfjs/web/viewer.html?file=YOUR_PDF_FILE.pdf"
    >Click me</a
  >
  

  Copy

Animations​

By default, Fancybox animates images with a zoom animation from a thumbnail. Here's how to disable it (demo):

Fancybox.bind('[data-fancybox="gallery"]', {
  Image: {
    zoom: false,
  },
});

If zoom animation is disabled for images or another type of content is displayed, the default animations are used when opening / closing Fancybox. They are created by adding the corresponding CSS classes. Use showClass and hideClass options to choose what class names to use. Here you can see what class names are available by default and use them as a template to create your own animations, example (demo):

.fancybox-zoomIn {
  animation: 0.25s ease both fancybox-zoomIn;
}

.fancybox-zoomOut {
  animation: 0.15s ease both fancybox-zoomOut;
}

@keyframes fancybox-zoomIn {
  from {
    opacity: 0;
    transform: scale(0.75);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fancybox-zoomOut {
  to {
    opacity: 0;
    transform: scale(1.25);
  }
}

If you set showClass: false and hideClass:false, you will disable animation of the content, but you will notice that the background and other interface elements will still be animated (faded). If you want to disable all animations completely, you also have set animated: false.