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.

Fancybox automaticaly attaches click handler to [data-fancybox] selector. That means, clicking any DOM element having data-fancybox attribute will launch Fancybox with default options by default.

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. You can control grouping using groupAll and groupAttr options, 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
    );
  },
});

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) => {
        mainCarousel.slideTo(mainCarousel.findPageForSlide(that.page), {
          friction: 0,
        });
      },
    },
  },
});

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