- HTML #
- Usage #
- Inline content #
- Declarative #
- Hello, world!
- Programmatic #
- Videos #
- Declarative #
- Programmatic #
- Iframes #
- Declarative #
- Programmatic #
- Google maps #
- Declarative #
- Programmatic #
- Ajax #
- Programmatic #
- Options #
- ajax #
- autoSize #
- iframeAttr #
- preload #
- videoAutoplay #
- videoTpl #
- videoFormat #
- videoRatio #
- vimeo #
- youtube #
- Модальные окна на Fancybox 3
- Подключение через CDN:
- Контент в скрытом блоке
- Вызов Fancybox через атрибуты
- Пример:
- Вызов Fancybox через JavaScript
- Контент в IFrame
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> 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 Dialogbutton> Hello, world!
Try hitting the tab key and notice how the focus stays within the dialog itself.
To close dialog hit the esc button, click on the overlay or just click the close button.
Element used to launch the modal would receive focus back after closing.
Add data-fancybox-close data attribute to any element to close the modal when clicked.
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">Defaultsa> 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 filea> 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 > Launch 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 AJAXa> 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
Document | XMLHttpRequestBodyInit | null
autoSize #
If resize the iframe element to match the dimensions of the iframe page content
iframeAttr #
Attributes of an iframe element
allow: "autoplay; fullscreen", scrolling: "auto", > preload #
If wait for iframe content to load before displaying
videoAutoplay #
If videos should start playing automatically after they are displayed
videoTpl #
HTML5 video element template
videoFormat #
Default HTML5 video format
videoRatio #
Aspect ratio of the video element
vimeo #
byline: 0 | 1; color: string; controls: 0 | 1; dnt: 0 | 1; muted: 0 | 1; > byline: 1, color: "00adef", controls: 1, dnt: 1, muted: 0, > youtube #
controls: 0 | 1; enablejsapi: 0 | 1; rel: 0 | 1; fs: 0 | 1; > controls: 1, enablejsapi: 1, rel: 0, fs: 1, > Модальные окна на Fancybox 3
Fancybox 3 плагин галерей и модельных окон, в отличии от второй версии существенно изменилась скорость работы, дизайн и немного API, далее подробнее о вызове модальных окон.
Подключение через CDN:
Контент в скрытом блоке
Вызов Fancybox через атрибуты
Плагин позволяет вызвать всплывающие окна через специальные атрибуты (без вставок JS-кода):
Открыть Fancybox (Inline) Пример:
Вызов Fancybox через JavaScript
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim vulputate eros.
Donec hendrerit efficitur ex vitae euismod. Maecenas ut leo vitae ipsum dictum cursus vel vitae nulla.