Image popup

Fancybox 2.1.5 is nice tool that offers a nice way to add zooming functionality for images. The basic structure is given below

1. HTML code

<a rel="gallery" class="fancybox" href="images/portfolio/item-2.jpg">Demo</a>

class fancybox for popup and href image path is to popup the image.

2. Initialize the fancybox in jQuery

// fancybox
$(".fancybox").fancybox({
    padding: 0,

    openEffect : 'elastic',
    openSpeed  : 450,

    closeEffect : 'elastic',
    closeSpeed  : 350,

    closeClick : true,
    helpers : {
        title : { 
            type: 'inside' 
        },
        overlay : {
            css : {
                'background' : 'rgba(0,0,0,0.8)'
            }
        }
    }
});

know more about fancybox setting in this link – http://fancyapps.com/fancybox/

Was this article helpful to you? Yes No

How can we help?