FancyBox
FancyBox offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages.
Official documentation
For more detailed information and examples, see the official documentation: FancyBox .
How to use?
Wrap any block in a parent element with an ID or class and add the same ID or the class in the JS INIT function of the plugin, include the data-src="" attribute with the image which should be opened in a lightbox.
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="../../assets/vendor/fancybox/jquery.fancybox.css">
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="../../assets/vendor/fancybox/jquery.fancybox.min.js"></script>
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script src="../../assets/js/components/hs.fancybox.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of popups
$.HSCore.components.HSFancyBox.init('.js-fancybox');
});
</script>
Single image
<div class="row">
<div class="col-sm-4 mb-3">
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../../assets/img/1920x1080/img10.jpg"
data-caption="Front in frames - image #01"
data-speed="700">
<img class="img-fluid rounded" src="../../assets/img/480x320/img2.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../../assets/img/1920x1080/img13.jpg"
data-caption="Front in frames - image #02"
data-speed="700">
<img class="img-fluid rounded" src="../../assets/img/480x320/img4.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../../assets/img/1920x1080/img14.jpg"
data-caption="Front in frames - image #03"
data-speed="700">
<img class="img-fluid rounded" src="../../assets/img/480x320/img5.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
</div>
Gallery
Galleries are created from elements who have the same data-fancybox-group="" attribute value.
<div class="row">
<div class="col-sm-4 mb-3">
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../../assets/img/1920x1080/img10.jpg"
data-fancybox="fancyboxGallery1"
data-caption="Front in frames - image #01"
data-speed="700">
<img class="img-fluid rounded" src="../../assets/img/480x320/img2.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../../assets/img/1920x1080/img13.jpg"
data-fancybox="fancyboxGallery1"
data-caption="Front in frames - image #02"
data-speed="700">
<img class="img-fluid rounded" src="../../assets/img/480x320/img4.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../../assets/img/1920x1080/img14.jpg"
data-fancybox="fancyboxGallery1"
data-caption="Front in frames - image #03"
data-speed="700">
<img class="img-fluid rounded" src="../../assets/img/480x320/img5.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
</div>
Enable infinity slideshow with data-is-infinite="" helper.
<div class="row">
<div class="col-sm-4 mb-3">
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../../assets/img/1920x1080/img10.jpg"
data-fancybox="fancyboxGallery2"
data-caption="Front in frames - image #01"
data-speed="700"
data-is-infinite="true">
<img class="img-fluid rounded" src="../../assets/img/480x320/img2.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../../assets/img/1920x1080/img13.jpg"
data-fancybox="fancyboxGallery2"
data-caption="Front in frames - image #02"
data-speed="700"
data-is-infinite="true">
<img class="img-fluid rounded" src="../../assets/img/480x320/img4.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../../assets/img/1920x1080/img14.jpg"
data-fancybox="fancyboxGallery2"
data-caption="Front in frames - image #03"
data-speed="700"
data-is-infinite="true">
<img class="img-fluid rounded" src="../../assets/img/480x320/img5.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
</div>
There is a built-in data-overlay-bg="" helper. Set your custom option.
<div class="row">
<div class="col-sm-4 mb-3">
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../../assets/img/1920x1080/img10.jpg"
data-fancybox="fancyboxGallery3"
data-caption="Front in frames - image #01"
data-speed="700"
data-overlay-bg="rgba(255, 255, 255, .9)">
<img class="img-fluid rounded" src="../../assets/img/480x320/img2.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../../assets/img/1920x1080/img13.jpg"
data-fancybox="fancyboxGallery3"
data-caption="Front in frames - image #02"
data-speed="700"
data-overlay-bg="rgba(255, 255, 255, .9)">
<img class="img-fluid rounded" src="../../assets/img/480x320/img4.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../../assets/img/1920x1080/img14.jpg"
data-fancybox="fancyboxGallery3"
data-caption="Front in frames - image #03"
data-speed="700"
data-overlay-bg="rgba(255, 255, 255, .9)">
<img class="img-fluid rounded" src="../../assets/img/480x320/img5.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
</div>
Or you can apply data-overlay-blur-bg="" helper.
<div class="row">
<div class="col-sm-4 mb-3">
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../../assets/img/1920x1080/img10.jpg"
data-fancybox="fancyboxGallery4"
data-caption="Front in frames - image #01"
data-speed="700"
data-overlay-blur-bg="true">
<img class="img-fluid rounded" src="../../assets/img/480x320/img2.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../../assets/img/1920x1080/img13.jpg"
data-fancybox="fancyboxGallery4"
data-caption="Front in frames - image #02"
data-speed="700"
data-overlay-blur-bg="true">
<img class="img-fluid rounded" src="../../assets/img/480x320/img4.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../../assets/img/1920x1080/img14.jpg"
data-fancybox="fancyboxGallery4"
data-caption="Front in frames - image #03"
data-speed="700"
data-overlay-blur-bg="true">
<img class="img-fluid rounded" src="../../assets/img/480x320/img5.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
</div>
Also control the the popup opening and the slideshow speed with data-speed="" and data-slideshow-speed="" helpers.
<div class="row">
<div class="col-sm-4 mb-3">
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../../assets/img/1920x1080/img10.jpg"
data-fancybox="fancyboxGallery5"
data-caption="Front in frames - image #01"
data-speed="300"
data-slideshow-speed="1000">
<img class="img-fluid rounded" src="../../assets/img/480x320/img2.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../../assets/img/1920x1080/img13.jpg"
data-fancybox="fancyboxGallery5"
data-caption="Front in frames - image #02"
data-speed="300"
data-slideshow-speed="1000">
<img class="img-fluid rounded" src="../../assets/img/480x320/img4.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../../assets/img/1920x1080/img14.jpg"
data-fancybox="fancyboxGallery5"
data-caption="Front in frames - image #03"
data-speed="300"
data-slideshow-speed="1000">
<img class="img-fluid rounded" src="../../assets/img/480x320/img5.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
</div>
Fancybox types
Script uses the data-fancybox-group="" attribute of the matched elements to obtain the location of the content and to figure out content type you want to display. Use title="" or data-caption="" attribute to specify item caption.
<!-- Fancybox Form -->
<a class="js-fancybox btn btn-sm btn-primary transition-3d-hover" href="javascript:;"
data-src="#fancyboxForm"
data-speed="700">
Open Form
</a>
<!-- End Fancybox Form -->
<!-- Form -->
<div id="fancyboxForm" class="clearfix" style="display: none; min-width: 400px;">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- End Form -->
<!-- Video -->
<a class="js-fancybox btn btn-sm btn-primary transition-3d-hover" href="javascript:;"
data-src="//www.youtube.com/embed/BNpiwOkKIJ8?autoplay=0"
data-speed="700">
Open Video
</a>
<!-- End Video -->
<!-- Ajax -->
<a class="js-fancybox fancybox.iframe btn btn-sm btn-primary transition-3d-hover" href="javascript:;"
data-type="ajax"
data-src="../assets/ajax/fancybox/ajax.html"
data-filter="#one"
data-speed="700">
Ajax
</a>
<!-- End Ajax -->
Multiple inner images
Multiple inner (hidden) images within slideshow.
<div class="row">
<div class="col-sm-4 mb-3">
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../../assets/img/1920x1080/img10.jpg"
data-fancybox="fancyboxGallery6"
data-caption="Front in frames - image #01"
data-speed="700">
<img class="img-fluid rounded" src="../../assets/img/480x320/img2.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../../assets/img/1920x1080/img13.jpg"
data-fancybox="fancyboxGallery6"
data-caption="Front in frames - image #02"
data-speed="700">
<img class="img-fluid rounded" src="../../assets/img/480x320/img4.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fas fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../../assets/img/1920x1080/img14.jpg"
data-fancybox="fancyboxGallery6"
data-caption="Front in frames - image #03"
data-speed="700">
<img class="img-fluid rounded" src="../../assets/img/480x320/img5.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon u-media-viewer__icon--active">
<span class="u-media-viewer__icon-inner">+3</span>
</span>
</span>
</a>
</div>
</div>
<img class="js-fancybox d-none" alt="Image Description"
data-fancybox="fancyboxGallery6"
data-src="../assets/img/img81-lg.jpg"
data-caption="Front in frames - image #04"
data-speed="700">
<img class="js-fancybox d-none" alt="Image Description"
data-caption="Front in frames - image #05"
data-src="../assets/img/img82-lg.jpg"
data-fancybox="fancyboxGallery6"
data-speed="700">
<img class="js-fancybox d-none" alt="Image Description"
data-fancybox="fancyboxGallery6"
data-src="../assets/img/img83-lg.jpg"
data-caption="Front in frames - image #06"
data-speed="700">
Multiple inner videos
Multiple inner (hidden) images within slideshow.
<div class="row">
<div class="col-sm-4 mb-3">
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../../assets/img/1920x1080/img10.jpg"
data-fancybox="fancyboxGallery7">
<img class="img-fluid rounded" src="../../assets/img/480x320/img2.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="u-media-viewer__icon u-media-viewer__icon--active">
<span class="u-media-viewer__icon-inner">+3</span>
</span>
</span>
</span>
</a>
</div>
</div>
<iframe class="js-fancybox d-none"
data-src="//www.youtube.com/embed/vlDzYIIOYmM?autoplay=0"
data-fancybox="fancyboxGallery7"
data-type="iframe"></iframe>
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-fancybox="".
| Attribute | Description |
|---|---|
|
|
Defines a group of images united in one gallery. |
|
|
The title of the image. |
|
|
The type of content that will be uploaded to the page. Valid values are:
|
|
|
You must specify the original width of the image, while loading the image, the quality improves as you download from the server. This effect of image loading can be seen on the Apple website. |
|
|
You must specify the initial height of the image, while loading the image, the quality improves as you download from the server. This effect of image loading can be seen on the Apple website. |
|
|
Path to the image, video, uploaded content or hidden block ID. |
|
|
If data-type="" is set to ajax, the value of the attribute is passed the ID of a particular block from the page being paged, as a result only this block will be loaded, not the whole page. |
|
|
Transmits the object with the settings, which allows you to specify the standard plug-in settings in one attribute. |
|
|
Appearing effect of the popup |
|
|
Disappearing effect of the popup |
|
|
Opening speed of the pop. |
|
|
The speed of the slide show inside the popup. |
|
|
Includes background blur effect. |
|
|
Color of the overlay. |
|
|
If true, then turns on the function of infinite scrolling of the slides (in a loop). |