Skip to main content

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.

info

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. 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).

AttributeDescription
data-fancybox-closeClose current Fancybox instance
data-fancybox-nextSlide current Fancybox instance to next slide
data-fancybox-prevSlide current Fancybox instance to previous slide
data-fancybox-triggerStart gallery from other element, #1 demo, #2 demo

Programmatic

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

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>

    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
    >

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.