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/