1. Home
  2. Docs
  3. Timer
  4. Image popup

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
[code language=”html”]
<a rel="gallery" class="fancybox" href="images/portfolio/item-2.jpg">Demo</a>
[/code]

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

2. Initialize the fancybox in jQuery

[code language=”javascript”]
// 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)’
}
}
}
});
[/code]

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

Was this article helpful to you? Yes No

How can we help?