FancyBox-Custom  is a lightweight JavaScript plugin to use it for the Image-Gallery in websites.

It is like LightBox plugin which is a very commonly used for Image-Gallery.

To see the effect of using FancyBox-Custom, see this Demo.

The source code is provided at the end of this article.

Integration Process

Integrate these lines within “head” tag in your HTML code.

<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/jquery.fancybox.css">
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>


After that, write these lines within “body” tag.

<a class="fancybox" href="img/1_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="img/1_s.jpg" alt="" />


Here, two image links are provided within the link “a” tag.

The hiper-refenced one within the href=”img/1_b.jpg” is for the big image which will come out when clicking on the small image which is in the “img” tag.

After that, initialize the JavaScript plugin within the body.



For getting scrolling on MouseScroll, add this JavaScript(.js) file.

<script type="text/javascript" src="js/jquery.mousewheel-3.0.6.pack.js"></script>

github GITHUB Link is Here.