If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

JS Animated. How to implement jQuery “FancyBox” lightbox plugin

This tutorial is going to show you how to implement the jQuery "FancyBox" lightbox plugin into your JS Animated template.

JS Animated. How to implement jQuery “FancyBox” lightbox plugin

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats over a web page and is built using the jQuery library.

To add it to your page:

  1. Download the plugin library from http://fancybox.net/ on your computer and unpack it.

    js_animated_jquery_fancybox_lightbox_plugin_implementing_1

  2. Copy the fancybox folder from the unzipped package and paste it into the site folder of your template package.

    js_animated_jquery_fancybox_lightbox_plugin_implementing_2

  3. Open the .html file with the image you want to apply the plugin to and add the libraries and the table of styles to it in Dreamweaver to the <head> tag:

    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.easing-1.4.pack.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <link rel="stylesheet" href="./fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
    

    js_animated_jquery_fancybox_lightbox_plugin_implementing_3

  4. Find the line with the image, e.g.

  5. <img src="images/image_small.jpg" alt="" />
    
  6. And change it to

  7. <a class="fancybox" href="images/image_big.jpg"><img src="images/image_small.jpg" alt=""/></a>
    

    js_animated_jquery_fancybox_lightbox_plugin_implementing_4

  8. In the images folder, there should be image_big.jpg and image_small.jpg accordingly.

  9. js_animated_jquery_fancybox_lightbox_plugin_implementing_5

  10. Initialize the gallery: add the following to your .html file right before the closing </head> tag:

    <script type="text/javascript">
        $(document).ready(function() {
       		$("a.fancybox").fancybox();
        });
    </script>
    

    js_animated_jquery_fancybox_lightbox_plugin_implementing_6

  11. Save the changes and check your page in a web browser: the image should be opening in a lightbox.

    js_animated_jquery_fancybox_lightbox_plugin_implementing_7

Using the table of available options from http://fancybox.net/api, you can pass them as key/value object to the fancybox() function.

For more information on how to use the plugin, please refer to the official manual at http://fancybox.net/howto.

Feel free to check the detailed video tutorial below:

JS Animated. How to implement jQuery “FancyBox” lightbox plugin