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.

<script>
    $(".fancybox").fancybox();
</script>

 

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.

Advertisements