Easily and effectively display images with FancyBox

fancybox Easily and effectively display images with FancyBoxFancyBox is a plugin for jQuery that allows you to easily display images in the same window with a simple yet effective code. The plugin takes no time to set up and all that is required is that you include the jQuery javascript library within the pages that you are using the FancyBox plugin on.

Features:

  • Display single images
  • Create image galleries
  • Display iFrame
  • Execute Ajax
  • Include Flash, movies or audio files

Using FancyBox

First of all we need to link to the jQuery and FancyBox file after we have downloaded.

<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/jquery.fancybox.js"></script>


Next we add the stylesheet that is included with FancyBox:

<link rel="stylesheet" href="path-to-file/fancybox.css" type="text/css" media="screen">

Then to link to an image we simply set the id of an image to "single_image":

<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

All that is left to do is execute the jQuery code when the DOM is loaded.

$(document).ready(function() {
 
    $("a#single_image").fancybox();
 
}

That is all the code that is needed to display a single image. To learn how to do things such as ajax calls, view the documentation for FancyBox here.

Other lightbox alternatives

Is there another lightbox alternative that you have used that you would like to share with all the readers? Post a comment below.

Bookmark and Share
Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • email
  • FriendFeed
  • LinkedIn
  • Ping.fm
  • Tumblr
  • Twitter

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

, , , , ,

4 Responses to Easily and effectively display images with FancyBox

  1. Chris May 17, 2010 at 11:12 pm #

    Code needs --

    $(document).ready(function() {

    $("a#single_image").fancybox();

    });

    Just incase someone can't get it to work.

  2. Rich June 14, 2010 at 6:19 pm #

    I can't get the fancybox to open on this page:

    http://www.discoverspark.net/FancyBoxTest.html

    Any idea what I'm missing?

    Thanks!

    Rich
    richcaton@netzero.com

  3. Wez Pyke June 14, 2010 at 6:24 pm #

    Just taking a look at your code, I'll upload the changes when I solve it.

  4. Wez Pyke June 14, 2010 at 6:31 pm #

    All you need to do is remove this line

    Here's the working version:
    http://cl.ly/efbe27f94a98c2d91ddb

Leave a Reply