Image Lightbox Effect with jQuery

LightBox is a popup window that is used to open up images, html contents & other multimedia stuffs. This effect can be produced with css and js but using addons will simplify the task. In this tutorial I will show you how to add such lightbox effect to images with a jQuery plugin, called FancyBox. FancyBox plugin lets you produce clean and elegant lightbox effect with smooth animations. Download the latest version of the plugin here, extract the contents and move the folder 'source' to your working folder.

Add Image LightBox Effect using jQuery

First we need to include the required js and css files. FancyBox plugin is built over the jQuery library so we should load the jquery file first for the plugin to work.

Recommended Read: How to add Photo Frame Effect to Images using pure CSS

<!-- include jQuery library -->
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<!-- include fancyBox JS and CSS files -->
<script type="text/javascript" src="fancybox_assets/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox_assets/jquery.fancybox.css" media="screen" />

Next add image(s) with anchor link like this.

<a class="fancybox-elastic" title="Lorem ipsum dolor" href="images/1.jpg"><img src="images/1.jpg" alt="Butterfly1" /></a>
 
<a class="fancybox-fade" title="Lorem ipsum dolor" href="images/2.jpg"><img src="images/2.jpg" alt="Butterfly2" /></a>

<a class="fancybox-over" title="Lorem ipsum dolor" href="images/3.jpg"><img src="images/3.jpg" alt="Butterfly3" /></a>

<a class="fancybox-inside" title="Lorem ipsum dolor" href="images/4.jpg"><img src="images/4.jpg" alt="Butterfly4" /></a>

<a class="fancybox-outside" title="Lorem ipsum dolor" href="images/5.jpg"><img src="images/5.jpg" alt="Butterfly5" /></a>

Now time for some general CSS styles.

body {
    margin: 0 auto;
    padding: 20px;
}

img {
    width: 150px;
    height: 150px;
}

.fancybox-custom .fancybox-skin {
    box-shadow: 0 0 50px #222;
}

Next invoke the fancybox window with jQuery.

Recommended Read: 10 Amazing CSS Drop Cap Effects you can Copy Paste

$(document).ready(function() {
    $(".fancybox-elastic").fancybox({
        openEffect : 'elastic',
        openSpeed  : 150,
        closeEffect : 'elastic',
        closeSpeed  : 150,
        closeClick : true,

        helpers: {
            title : {
                type : 'inside',
            },
            overlay : null
        }
    });
    
    $(".fancybox-fade").fancybox({
        padding: 0,
        openEffect : 'fade',
        openSpeed  : 300,
        closeEffect : 'fade',
        closeSpeed  : 300,

        helpers: {
            title : {
                type : 'float',
            }
        }
    });
    
    $(".fancybox-over").fancybox({
        openEffect : 'none',
        closeEffect : 'none',
        closeClick : true,
        helpers: {
            title : {
                type : 'over',
            },
            overlay : null
        }
    });

    $(".fancybox-inside").fancybox({
        openEffect : 'elastic',
        openSpeed  : 'slow',
        closeEffect : 'elastic',
        closeSpeed  : 'slow',
        closeClick : true,
        helpers: {
            title : {
                type : 'inside',
                position: 'top'
            }
        }
    });

    $(".fancybox-outside").fancybox({
        openEffect : 'fade',
        openSpeed  : 'normal',
        closeEffect : 'fade',
        closeSpeed  : 'fast',
        helpers: {
            title : {
                type : 'outside',
                position: 'bottom'
            }
        }
    });
});

I have used css class selector to define the fancybox, but you can also use id's, but they should be used to a single element.

To create the image lightbox effect we've used some properties of fancybox plug-in. Let’s see them in detail one by one.

1. The properties 'openEffect', 'closeEffect' are for animation effect and it can be any one of elastic, fade or none value.
2. Properties 'openSpeed' & 'closeSpeed' defines the transition speed and should be of slow, normal, fast or ms(milli seconds).
3. If 'closeClick' is set to true, fancyBox window will be closed when user clicks the content.

FancyBox Plugin Helpers

The plug-in comes with Helpers to extend the capabilities. 'overlay' and 'title' are the two built-in helpers and can be set with custom properties or disabled if not required.

The title type could be any one of float, inside, outside or over.

Download CodeView Demo

Hope you have enjoyed this image lightbox effect tutorial. Kindly share it in your circle and help spread our word.