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).
Attribute | Description |
---|---|
data-fancybox-close | Close current Fancybox instance |
data-fancybox-next | Slide current Fancybox instance to next slide |
data-fancybox-prev | Slide current Fancybox instance to previous slide |
data-fancybox-trigger | Start gallery from other element, #1 demo, #2 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:
- Create a carousel with elements that have the
data-fancybox
attribute (alternatively, useFancybox.bind()
). - 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 assrc
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
.