A jQuery Fancy box is a good plug-in and is easy to understand and use. I came across using this while developing a web application where I wanted to show a Quick view of a product on click of a button or image but the bootstrap model didn’t work with the installed theme as the jQuery version conflicts and to resolve these conflicts seemed far too cumbersome. Fancy box can do lots of things but here we will see how to set up fancy box to open a popup on click of a button

What exactly the Fancy box is?

Fancy Box is a tool which helps to display images, videos, other media and html data in a form like modal called “lightbox” to a web page. This tool provides an elegant way to add zoom in functionality for images, multi-media and html content on your web pages.

Fancy box script built with the help of jQuery library and is licensed under the both MIT and GPL licenses.

It is a great way to display large images with the help of such scripts on a page without leaving the page or breaking up the layout to accommodate the large image. Also, it allows viewer to focus on the large image with minimum distraction from the rest of the page. Finally you will get the large image without redirecting to new page.

Features of Fancy Box:

• Fancy Box helps to display images, Html Data, videos, Iframes and Ajax requests.
• Fancy box can easily be customized with the help of CSS and settings.
• In fancybox you can easily group’s related items and add navigation for the items.
• If you want to use the mouse wheel events then you have to include the plug-in for it.
• Support fancy transitions with the help of easing plug-in
• Adds a nice drop shadow under the zoomed item

How to use:

• To use Fancybox to a webpage first of all you have to add the latest version of jQuery and fancy box script to a webpage.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

· Define an anchor on click of it the fancybox will be called and displays. The class of this anchor is “album_link” which works as a trigger.

<a href="#galleryimages_cust_image_1" class="album_link " />

• Define a div block where the content of pop up added. We have applied the style as display none because onload this div is hidden and when we called it, it will displays.

<div id=” galleryimages_cust_image” style=”display: none ;”>

    <p> Content in lightbox</p>

</div>

• Now we will add Script for displaying our pop up,

<script>

jQuery (".fancybox").fancybox({

    openEffect  : 'none',

    closeEffect : 'none',

    afterLoad   : function() {

        this.content = '<h3> First Fancybox</h3>' + this.content.html();

    }

});

</script>

• There are lots of effects which we can add from script as,

Cyclic : false (When true galleries will be cyclic, allowing you to keep pressing next/back),

width : 250px (you can set width of the iframe) etc.

Snehal Asodekar

Snehal holds 1+ year of experience in web Design and Development using PHP, MySQL, Magento. Expertise in Magento 1, Module development & theme customization.