HTML
This built-in plugin adds support for inline content, videos (HTML5, Youtube and Vimeo), iframes, Google maps, and Ajax content. Supported websites can be used with Fancybox by simply specifying the URL of the page.
Usage
Inline content
Create the HTML element you want to display in the modal, give it a unique id
attribute and hide it using CSS.
<div id="dialog-content" style="display:none;max-width:500px;">
<h2>Hello, world!</h2>
<p>
<input type="text" value="" />
</p>
<p>
Try hitting the tab key and notice how the focus stays within the dialog
itself.
</p>
<p>
To close dialog hit the esc button, click on the overlay or just click the
close button.
</p>
<p>
Element used to launch the modal would receive focus back after closing.
</p>
</div>
TIP
To make text selectable, add the "data-selectable" attribute to the entire element, or just part of it.
Declarative
Use data-src
attribute to specify target ID. If you prefer to display a copy of the element, use data-type="clone"
attribute.
<button data-fancybox data-src="#dialog-content">Launch Dialog</button>
Programmatic
// Show HTML element
Fancybox.show([{ src: "#dialog-content", type: "inline" }]);
// Show a copy of the element
Fancybox.show([{ src: "#dialog-content", type: "clone" }]);
Videos
Fancybox supports YouTube, Vimeo and HTML5 videos out of the box. The video will pause whenever it's not visible and resume as soon as it becomes visible again. Control video sizes using CSS or the data-width
and data-height
attributes.
Note. Modern browsers such as Chrome, FireFox and Safari can block videos from playing automatically if the sound is on by default.
Declarative
An example of an HTML5 video with custom dimensions:
<a href="video.mp4" data-fancybox data-width="640" data-height="360">
HTML5 video
</a>
MP3 audio file with a poster:
<a
href="file_example.mp3"
data-fancybox
data-type="html5video"
data-thumb="https://lipsum.app/id/28/200x150"
>
MP3 file
</a>
Video gallery with thumbnails:
<a href="video-a.mp4" data-fancybox="gallery">
<img src="thumbnail-a.jpeg" />
</a>
<a href="video-b.mp4" data-fancybox="gallery">
<img src="thumbnail-b.jpeg" />
</a>
<a href="video-c.mp4" data-fancybox="gallery">
<img src="thumbnail-c.jpeg" />
</a>
Examples of supported links:
// YouTube video
https://www.youtube.com/watch?v=z2X2HaTvkl8
// YouTube video with custom start time
https://www.youtube.com/watch?v=dZRqB0JLizw&t=40s
// Vimeo video
https://vimeo.com/259411563
// Vimeo video with custom start time
https://vimeo.com/577635596#t=11m11s
// Private Vimeo video with hash
https://vimeo.com/705652986/edf22302ef
Programmatic
// Single video
Fancybox.show([
{
src: "https://www.youtube.com/watch?v=z2X2HaTvkl8",
type: "video",
ratio: 16 / 10,
width: 640,
height: 360,
},
]);
// Video gallery with thumbnails
Fancybox.show([
{
src: "https://www.youtube.com/watch?v=z2X2HaTvkl8",
thumb: "http://i3.ytimg.com/vi/z2X2HaTvkl8/hqdefault.jpg",
},
{
src: "https://www.youtube.com/watch?v=dZRqB0JLizw",
thumb: "http://i3.ytimg.com/vi/dZRqB0JLizw/hqdefault.jpg",
},
{
src: "https://vimeo.com/259411563",
thumb: "https://f.vimeocdn.com/images_v6/lohp/video1_thumbnail.png",
},
]);
Iframes
Fancybox will preload iframed pages and resize self to fit the content. It is also possible to set only width, then Fancybox will calculate the corresponding height. Note that due to browser security policies, auto-sizing will only work for local files. You can use preload
option to disable this feature.
Declarative
<a href="iframe.html" data-fancybox data-type="iframe">Defaults</a>
<a href="iframe.html" data-fancybox data-type="iframe" data-preload="false">
Preloading is disabled
</a>
<a
href="iframe.html"
data-fancybox
data-type="iframe"
data-width="300"
data-height="400"
>
Custom width and height
</a>
<a href="data:text/html,<p>Some HTML</p>" data-fancybox data-type="iframe">
Dynamic iframe content
</a>
<a data-fancybox data-type="pdf" href="your.pdf">PDF file</a>
Programmatic
Fancybox.show([
{
src: "https://www.w3.org/",
type: "iframe",
preload: false,
width: 600,
height: 300,
},
]);
Google maps
Fancybox automatically recognizes and displays various Google maps links.
Declarative
<a
href="https://www.google.com/maps/@51.5039653,-0.1246493,14.12z"
data-fancybox
>
Map
</a>
Examples of supported links:
https://www.google.com/maps/place/Googleplex/@37.4220041,-122.0833494,17z/data=!4m5!3m4!1s0x0:0x6c296c66619367e0!8m2!3d37.4219998!4d-122.0840572
https://maps.google.com/?ll=48.857995,2.294297&spn=0.007666,0.021136&t=m&z=16
https://www.google.com/maps/@37.7852006,-122.4146355,14.65z
https://www.google.com/maps/search/Empire+State+Building/
https://www.google.com/maps/search/?api=1&query=centurylink+field
https://www.google.com/maps/search/?api=1&query=47.5951518,-122.3316393
It is also possible to use a direct link to an embedded iframe page:
<a
href="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d10500.902039411158!2d2.2913514905137315!3d48.85391001859112!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1slv!2slv!4v1622011463926!5m2!1slv!2slv"
data-fancybox
data-type="iframe"
data-preload="false"
data-width="640"
data-height="480"
>
Direct link to the map
</a>
Programmatic
Fancybox.show([
{
src: "https://www.google.com/maps/@51.5039653,-0.1246493,14.12z",
width: 800,
height: 600,
},
]);
Ajax
Declarative
To load your content via AJAX, add data-type="ajax"
to your links, example:
<a data-fancybox data-type="ajax" href="ajax.html">Load content using AJAX</a>
To show only part of an AJAX response, use data-filter
attribute with a selector, example:
<a data-fancybox data-type="ajax" data-src="ajax.php" data-filter="#content_B">
Load content using AJAX and show only element with ID `content_B`.
</a>
Programmatic
Fancybox.show([
{
src: "ajax.html",
type: "ajax",
},
]);
Options
ajax
A body of data to be sent in the XHR request
Type
Document | XMLHttpRequestBodyInit | null
Default
null
autoSize
If resize the iframe element to match the dimensions of the iframe page content
Type
boolean
Default
true
preload
If wait for iframe content to load before displaying
Type
boolean
Default
true
videoAutoplay
If videos should start playing automatically after they are displayed
Type
boolean
Default
true
videoTpl
HTML5 video element template
Type
string
Default
<video class="fancybox__html5video" playsinline controls controlsList="nodownload" poster="{{poster}}"><source src="{{src}}" type="{{format}}" />Sorry, your browser doesn't support embedded videos.</video>
videoFormat
Default HTML5 video format
Type
string
Default
""
videoRatio
Aspect ratio of the video element
Type
number
Default
16 / 9
vimeo
Vimeo embedded player parameters
https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Player-parameters-overview
Type
{
byline: 0 | 1;
color: string;
controls: 0 | 1;
dnt: 0 | 1;
muted: 0 | 1;
}
Default
{
byline: 1,
color: "00adef",
controls: 1,
dnt: 1,
muted: 0,
}
youtube
YouTube embedded player parameters
https://developers.google.com/youtube/player_parameters#Parameters
Type
{
controls: 0 | 1;
enablejsapi: 0 | 1;
rel: 0 | 1;
fs: 0 | 1;
}
Default
{
controls: 1,
enablejsapi: 1,
rel: 0,
fs: 1,
}