FancyBox
FancyBox offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages.
FancyBox documentationHow to use?
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="./assets/vendor/@fancyapps/fancybox/dist/jquery.fancybox.min.css">
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="./assets/vendor/@fancyapps/fancybox/dist/jquery.fancybox.min.js"></script>
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(document).on('ready', function () {
// INITIALIZATION OF FANCYBOX
// =======================================================
$('.js-fancybox').each(function () {
var fancybox = $.HSCore.components.HSFancyBox.init($(this));
});
});
</script>
Single image
<div class="row">
<div class="col-sm-4 mb-3">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"speed": 700
}'
data-src="..."
data-caption="Front in frames - image #01">
<img class="img-fluid rounded" src="..." alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon">
<i class="fas fa-plus"></i>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"speed": 700
}'
data-src="..."
data-caption="Front in frames - image #02">
<img class="img-fluid rounded" src="..." alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon">
<i class="fas fa-plus"></i>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"speed": 700
}'
data-src="..."
data-caption="Front in frames - image #03">
<img class="img-fluid rounded" src="..." alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon">
<i class="fas fa-plus"></i>
</span>
</span>
</a>
</div>
</div>
Gallery
Galleries are created from elements which have the same ID and class "selector": "#fancyboxGallery1 .js-fancybox", attribute value.
<div id="fancyboxGallery1" class="row">
<div class="col-sm-4 mb-3">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"selector": "#fancyboxGallery1 .js-fancybox",
"speed": 700
}'
data-src="..."
data-caption="Front in frames - image #01">
<img class="img-fluid rounded" src="..." alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon">
<i class="fas fa-plus media-viewer-icon-inner"></i>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"selector": "#fancyboxGallery1 .js-fancybox",
"speed": 700
}'
data-src="..."
data-caption="Front in frames - image #02">
<img class="img-fluid rounded" src="..." alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon">
<i class="fas fa-plus media-viewer-icon-inner"></i>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"selector": "#fancyboxGallery1 .js-fancybox",
"speed": 700
}'
data-src="..."
data-caption="Front in frames - image #03">
<img class="img-fluid rounded" src="..." alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon">
<i class="fas fa-plus media-viewer-icon-inner"></i>
</span>
</span>
</a>
</div>
</div>
Enable infinity slideshow with "loop": true helper.
<div id="fancyboxGallery2" class="row">
<div class="col-sm-4 mb-3">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"selector": "#fancyboxGallery2 .js-fancybox",
"speed": 700,
"loop": true
}'
data-src="..."
data-caption="Front in frames - image #01">
<img class="img-fluid rounded" src="..." alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon">
<i class="fas fa-plus media-viewer-icon-inner"></i>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"selector": "#fancyboxGallery2 .js-fancybox",
"speed": 700,
"loop": true
}'
data-src="..."
data-caption="Front in frames - image #02">
<img class="img-fluid rounded" src="..." alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon">
<i class="fas fa-plus media-viewer-icon-inner"></i>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"selector": "#fancyboxGallery2 .js-fancybox",
"speed": 700,
"loop": true
}'
data-src="..."
data-caption="Front in frames - image #03">
<img class="img-fluid rounded" src="..." alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon">
<i class="fas fa-plus media-viewer-icon-inner"></i>
</span>
</span>
</a>
</div>
</div>
There is a built-in "overlayBg": "rgba(color, .opacityValue)" helper. Set your custom option.
<div class="row">
<div class="col-sm-4 mb-3">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"overlayBg": "rgba(255, 255, 255, .9)"
}'
data-src="../assets/img/documentation/img21-lg.jpg"
data-caption="Front in frames - image #01">
<img class="img-fluid rounded" src="..." alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon">
<i class="fas fa-plus media-viewer-icon-inner"></i>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"overlayBg": "rgba(0, 0, 0, .9)"
}'
data-src="../assets/img/documentation/img22-lg.jpg"
data-caption="Front in frames - image #02">
<img class="img-fluid rounded" src="..." alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon">
<i class="fas fa-plus media-viewer-icon-inner"></i>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"overlayBg": "rgba(255, 255, 255, .3)"
}'
data-src="../assets/img/documentation/img23-lg.jpg"
data-caption="Front in frames - image #03">
<img class="img-fluid rounded" src="..." alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon">
<i class="fas fa-plus media-viewer-icon-inner"></i>
</span>
</span>
</a>
</div>
</div>
Or you can apply "overlayBlurBg": true helper.
<div class="row">
<div class="col-sm-4 mb-3">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"overlayBlurBg": true,
"speed": 700,
"loop": true
}'
data-src="..."
data-caption="Front in frames - image #01">
<img class="img-fluid rounded" src="..." alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon">
<i class="fas fa-plus media-viewer-icon-inner"></i>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"overlayBlurBg": true,
"speed": 700,
"loop": true
}'
data-src="..."
data-caption="Front in frames - image #02">
<img class="img-fluid rounded" src="..." alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon">
<i class="fas fa-plus media-viewer-icon-inner"></i>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"overlayBlurBg": true,
"speed": 700,
"loop": true
}'
data-src="..."
data-caption="Front in frames - image #03">
<img class="img-fluid rounded" src="..." alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon">
<i class="fas fa-plus media-viewer-icon-inner"></i>
</span>
</span>
</a>
</div>
</div>
Also control the the popup opening, autoplay and the slideshow speed with "slideShow": {
"autoStart": true,
"speed": 5000
} helpers.
<div id="fancyboxGallery4" class="row">
<div class="col-sm-4 mb-3">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"selector": "#fancyboxGallery4 .js-fancybox",
"speed": 700,
"loop": true,
"slideShow": {
"autoStart": true,
"speed": 5000
}
}'
data-src="..."
data-caption="Front in frames - image #01">
<img class="img-fluid rounded" src="..." alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon">
<i class="fas fa-plus media-viewer-icon-inner"></i>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"selector": "#fancyboxGallery4 .js-fancybox",
"speed": 700,
"loop": true,
"slideShow": {
"autoStart": true,
"speed": 5000
}
}'
data-src="..."
data-caption="Front in frames - image #02">
<img class="img-fluid rounded" src="..." alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon">
<i class="fas fa-plus media-viewer-icon-inner"></i>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"selector": "#fancyboxGallery4 .js-fancybox",
"speed": 700,
"loop": true,
"slideShow": {
"autoStart": true,
"speed": 5000
}
}'
data-src="..."
data-caption="Front in frames - image #03">
<img class="img-fluid rounded" src="..." alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon">
<i class="fas fa-plus media-viewer-icon-inner"></i>
</span>
</span>
</a>
</div>
</div>
Fancybox types
Script uses the "src": "" attribute of the matched elements to obtain the location of the content and to figure out content type you want to display.
<!-- Fancybox Form -->
<button type="button" class="btn btn-sm btn-primary transition-3d-hover" data-toggle="modal" data-target="#fancyboxForm">
Open Form
</button>
<!-- End Fancybox Form -->
<!-- Form -->
<div class="modal fade" id="fancyboxForm" tabindex="-1" role="dialog" aria-labelledby="fancyboxFormlTitle" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<h4 id="fancyboxFormlTitle" class="mb-0">Form modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<svg aria-hidden="true" class="mb-0" width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</button>
</div>
<!-- End Header -->
<!-- Body -->
<div class="modal-body">
<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>
</div>
</div>
</div>
<!-- End Form -->
<!-- Video -->
<a class="js-fancybox btn btn-sm btn-primary transition-3d-hover" href="javascript:;"
data-hs-fancybox-options='{
"src": "//youtube.com/0qisGSwZym4",
"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-hs-fancybox-options='{
"src": "assets/include/fancybox-ajax.html",
"type": "ajax",
"speed": 700
}'>
Ajax
</a>
<!-- End Ajax -->
Multiple inner images
Multiple inner (hidden) images within slideshow.
<div id="fancyboxGallery5">
<div class="row">
<div class="col-sm-4 mb-3">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"selector": "#fancyboxGallery5 .js-fancybox",
"speed": 700
}'
data-src="..."
data-caption="Front in frames - image #01">
<img class="img-fluid rounded" src="..." alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon">
<i class="fas fa-plus media-viewer-icon-inner"></i>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"selector": "#fancyboxGallery5 .js-fancybox",
"speed": 700
}'
data-src="..."
data-caption="Front in frames - image #02">
<img class="img-fluid rounded" src="..." alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon">
<i class="fas fa-plus media-viewer-icon-inner"></i>
</span>
</span>
</a>
</div>
<div class="col-sm-4 mb-3">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"selector": "#fancyboxGallery5 .js-fancybox",
"speed": 700
}'
data-src="..."
data-caption="Front in frames - image #03">
<img class="img-fluid rounded" src="..." alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon media-viewer-icon-active">
<span class="media-viewer-icon-inner">+3</span>
</span>
</span>
</a>
</div>
</div>
<img class="js-fancybox d-none" alt="Image Description"
data-hs-fancybox-options='{
"selector": "#fancyboxGallery5 .js-fancybox",
"speed": 700
}'
data-src="../assets/img/documentation/img24-lg.jpg"
data-caption="Front in frames - image #04">
<img class="js-fancybox d-none" alt="Image Description"
data-hs-fancybox-options='{
"selector": "#fancyboxGallery5 .js-fancybox",
"speed": 700
}'
data-src="../assets/img/documentation/img25-lg.jpg"
data-caption="Front in frames - image #05">
<img class="js-fancybox d-none" alt="Image Description"
data-hs-fancybox-options='{
"selector": "#fancyboxGallery5 .js-fancybox",
"speed": 700
}'
data-src="../assets/img/documentation/img26-lg.jpg"
data-caption="Front in frames - image #06">
</div>
Multiple inner videos
Multiple inner (hidden) videos within slideshow.
<div id="fancyboxGallery6">
<div class="row">
<div class="col-sm-4 mb-3">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"selector": "#fancyboxGallery6 .js-fancybox",
"speed": 700,
"buttons": ["fullScreen", "close"],
"media": {
"youtube": {
"params": {
"autoplay": 0
}
}
}
}'
data-src="//youtube.com/0qisGSwZym4"
data-caption="Front in frames - video #01">
<img class="img-fluid rounded" src="..." alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon">
<span class="media-viewer-icon media-viewer-icon-active">
<span class="media-viewer-icon-inner">+3</span>
</span>
</span>
</span>
</a>
</div>
</div>
<iframe class="js-fancybox d-none"
data-hs-fancybox-options='{
"selector": "#fancyboxGallery6 .js-fancybox",
"speed": 700,
"buttons": ["fullScreen", "close"],
"media": {
"vimeo": {
"params": {
"autoplay": 0
}
}
}
}'
data-src="//vimeo.com/167434033"
data-caption="Front in frames - video #02"></iframe>
</div>
Multiple inner videos (Autoplay)
Multiple inner (autoplay) videos within slideshow.
<div id="fancyboxGallery7">
<div class="row">
<div class="col-sm-4 mb-3">
<a class="js-fancybox media-viewer" href="javascript:;"
data-hs-fancybox-options='{
"selector": "#fancyboxGallery7 .js-fancybox",
"speed": 700,
"buttons": ["fullScreen", "close"],
"youtube": {
"autoplay": 1
}
}'
data-src="//youtube.com/0qisGSwZym4"
data-caption="Front in frames - video #01">
<img class="img-fluid rounded" src="..." alt="Image Description">
<span class="media-viewer-container">
<span class="media-viewer-icon">
<span class="media-viewer-icon media-viewer-icon-active">
<span class="media-viewer-icon-inner">+3</span>
</span>
</span>
</span>
</a>
</div>
</div>
<iframe class="js-fancybox d-none"
data-hs-fancybox-options='{
"selector": "#fancyboxGallery7 .js-fancybox",
"speed": 700,
"buttons": ["fullScreen", "close"],
"vimeo": {
"autoplay": 1
}
}'
data-src="//vimeo.com/167434033"
data-caption="Front in frames - video #02"></iframe>
</div>
Extend
By assigning a variable, you can call the standard methods of the plugin:
<script>
$(document).on('ready', function () {
// INITIALIZATION OF FANCYBOX
// =======================================================
$('.js-fancybox').each(function () {
var fancybox = $.HSCore.components.HSFancyBox.init($(this), {
afterClose: function() {
console.log('Closed!!!');
}
});
});
});
</script>
Attributes
By assigning a variable, you can call the standard methods of the plugin:
data-hs-fancybox-options='{
...
// Custom
"transitionEffectCustom": {
"onShow": "fadeIn",
"onHide": "fadeOut"
},
"overlayBg": "#ff0000",
"overlayBlurBg": true
}' - array
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-fancybox-options='{}'. For more detailed or missing attributes/functions, see the official FancyBox documentation page.
| Parameters | Description |
|---|---|
|
|
Reveal effect |
|
|
Hide effect |
|
|
Overlay color |
|
|
if true, then turns on the background blur effect |