The demo pages already include the following code. These steps are only necessary if you are building a page from scratch. Remove these references if you are not using this plugin to improve page load times.
Copy the script tag below and paste in the foot of your page. Add this where you see the other library scripts. This line should be inserted after jquery.min.js and before custom.js.
1. Link the CSS right before the head closing tag of your page, where you see the other library scripts. This line should be inserted before main.css.
<!-- Fancybox Stylesheet -->
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css"/>
2. Link the js before the body closing tag of your page, where you see the other library scripts. This line should be inserted before custom.js.
<!-- Fancybox Js -->
<script type="text/javascript" src="assets/js/jquery.fancybox.min.js"></script>
Alternatively you may wish to load this resource from a CDN to potentially improve page load times.
<!-- Fancybox Js -->
<script type="text/javascript" src="https://unpkg.com/@fancyapps/[email protected]"></script>
Basic Usage
The most basic way to use fancybox is by adding the data-fancybox attribute to your element.
This will automatically bind a click event handler that will start fancybox. Use href or data-src attribute to specify source of your content.
<a href="image.jpg" data-fancybox data-caption="Caption for single image">
<img src="thumbnail.jpg" alt="Thumbnail Image" />
</a>
Consult the Fancybox Documentation for more details.