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 class="fancybox" title="Wall street 6" data-fancybox-group="works" href="img/portfolio/item-6.jpg"><i class="ion-ios-search"></i></a>

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

2. Initialize the fancybox in jQuery

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

 openEffect : elastic,  
 openSpeed : 650,

 closeEffect : elastic,  
 closeSpeed : 550,

 closeClick : true,

 beforeShow: function () {  
 this.title = $(this.element).attr(title);  
 this.title = <h3> + this.title + </h3>’ + ‘<p>’ + $(this.element).parents(‘.portfolio-item’).find(‘img’).attr(‘alt’) + ‘</p>’;  
 },

 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/