jquery Fancy Box

Sep 04, 2013, by admin

jquery Fancy Box

It is a tool for displaying images, HTML content and multi-media in a Mac-style “lightbox” that floats overtop of web page

Features

1. Can display images, HTML elements, SWF movies, Iframes and also Ajax requests
2. Customizable through settings and CSS
3. Groups related items and adds navigation.
4. If the mouse wheel plugin is included in the page then FancyBox will respond to mouse wheel events as well
5. Support fancy transitions by using easing plugin
6. Adds a nice drop shadow under the zoomed item

Steps to go with jquery Fancy box

Download the jquery fancy box latest package here 

1. Set the headers
The first thing to do is include the required files in the header of your page.
For the FancyBox, first the jQuery library, then the plugin script, and an additional stylesheet files.

  /* Include jQuery – try to use latest version */
    <script type=”text/javascript” src=”your_path_to/jquery.js”></script>

    /* jQuery fancybox plugin */
    <script type=”text/javascript” src=”your_path_to/jquery-fancybox.js”></script>

    /* Additional Style for fancybox */
    <link href=”your_path_to/fancybox.css” rel=”stylesheet” type=”text/css” />

2. Next step is to declare how and when the FancyBox will be displayed on your page.The below code tells that every link that has a class fancybox will have its content opened in a fancybox.
It can be added in the page header (as below) or in a separate (.js) file.

  <script type=”text/javascript”>

    $(document).ready(function(){
    $(“.fancybox”).fancybox();
    });

    </script>

3. Finally, you just need to create a link whose class will have to be fancybox (as you have declared in fancybox function) and whose href attribute will need to contain the path of the page/element you wish to open within the fancybox.

<a href=”page_target_path” class=”fancybox”>How’s it!!</a>

For demo click here