Articles

jQuery Plugin - imgBox

22 Oct 2009 / 565 comments

So, a couple of weeks ago I started working on challenging project - imgBox. imgBox is a jQuery plugin that implements a smooth zoom effect on images. Download it, try it, let me know what you think.

You can see the demo at this page, and you can download the complete source code with examples .

What’s So Great About this Plugin?

  • Elegant looking, Mac-like effect
  • Popup blockers are no problem. The content opens within the active browser window
  • Multiple images can be opened at the same time
  • Can be customized with settings and CSS
  • It’s just 7KB (packed)
  • All modern browsers supported, including IE6

How to Use

First, make sure that there is a XHTML DOCTYPE declaration at the very top of the page.

01.
02.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

1. Include necessary files

01.
02.
03.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="imgbox/jquery.imgbox.pack.js"></script>
<link rel="stylesheet" href="imgbox/imgbox.css" />

2. Create a link elements. You can set the title using the title attribute:

01.
<a class="zoom" title="Lorem ipsum dolor sit amet" href="big_image.jpg"><img src="thumb.jpg" alt="" /></a>

3. Apply a imgBox using jQuery's selectors like so:

01.
$("a.zoom").imgbox();

This will add the zoom effect to any a tag classed with zoom

Available options

You have 2 different ways to modify the settings:

  1. Directly modify $.fn.imgbox.defaults
  2. Set as parameter to the imgbox(); function, example:
    01.
    02.
    03.
    04.
    
    $("a.zoom").imgbox({
            'zoomOpacity'      : true,
            'alignment'        : 'center'
    });

Here is the complete usable settings list

padding Padding around full image
alignment Position of the full image in the client, either 'auto' or 'center'. By default it expands equally in all directions from the thumbnail
allowMultiple Allow more than one popup to be open at the same time
autoScale If true, images are scaled to fit in viewport
speedIn Speed in milliseconds of the zooming-in animation
(fading if set to 0)
speedOut Speed in milliseconds of the zooming-out animation
(fading if set to 0)
easingIn, easingOut Easing used for animations
zoomOpacity If true, changes image transparency when zooming
overlayShow If true, shows the overlay (false by default)
Overlay color is defined in CSS file
overlayOpacity Opacity of overlay (from 0 to 1)
hideOnOverlayClick Hides popup when clicked on overlay
hideOnContentClick Hides popup when clicked on full image

If you find a bug, report it! And if you have awesome feedback, drop word in the comments.

User Comments

  1. October 24th

    I use Fancybox on my portfolio but this looks like a cool upgrade. The thing is though, I am not able to use this the same way I use Fancybox. I don't know how to explain this w/ being confusing so here's an example. 1 Identity + Branding
    Cover Design
    With Fancybox, it wouldn't matter what would be clicked, FB would still load my image. However, with imgBox, only the first link works [and the second link loads the image in its own page]. Check out my portfolio and click on any of the numbered grids for an example [still uses FB] :

  2. October 24th

    Um, so my code actually didn't display. I'll change it a bit to display correctly : [div class="boxgrid_01 caption"] [a id="yah" rel="p" title="On Air Podcast Cover" href="projects/OnAirCover.JPG"] [img src="content/key_oaj.JPG" alt="On Air Podcast Cover" /] [/a] [a id="yah" rel="p" title="On Air Podcast Cover" href="projects/OnAirCover.JPG"] [div class="cover boxcaption"] [h3]1[/h3] [p]Identity + Branding[br]Cover Design[/p] [/div] [/a] [/div]

  3. linds October 25th

    is it possible to put links within the caption in the pop-up?

  4. jQueryGlobe October 25th

    @linds: Yes, but you need to convert quotes and greater and less than symbols into their html entity equivalents.

  5. air yt October 27th

    2 Quick Questions: 1/ Is it possible to either overlay an image over top of the image being shown in the imgBox? 2/ is it possible to show an image in the border around the image being displayed? Essentially, i am looking to either watermark a logo on top of all popped images, or simply put our logo in one of the corners of the border around the imgBox. If imgBox can't do this, can FancyBox? thanks!

  6. jQueryGlobe October 28th

    @air You need either modify imgBox source or use FancyBox callback functions to add custom html after image is shown.

  7. Ali T October 28th

    Is there a gallery option to scroll through a group of images? Also, @Nokadota i had this problem then noticed that I was using multiple IDs instead of classes. think you have the same problem.

  8. vuxes October 28th

    "Multiple images can be opened at the same time" feature does not seem to be working, i.e. no arrow to allow navigating among the images.

  9. jQueryGlobe October 28th

    @Ali T, @vuxes: gallery feature is not yet implemented

  10. Laurent October 29th

    This isn't a Reply but a Question : How can I have my image without white border? (Like the FancyZoom does?) Thank You !

  11. jQueryGlobe October 29th

    @Laurent: Just set $("a.zoom").imgbox({padding: 0});

  12. grg November 2nd

    bravo! a small and elegant lightbox. This is awesome.

  13. Mark November 3rd

    I am a js noob and forgot document ready. Might want to remind people of that. Awesome script using it for threadify.myshopify.com

  14. Martin November 4th

    Awesome.... I like it so much... thank you for creating this lightbox.

  15. Jason November 10th

    I am trying to get it to work from just a link Enlarge but it seems to render the image at the top of the screen and the containing box at the bottom as 2 seperate divs...? simple mistake or lil bug?

  16. Han November 11th

    Very Nice jQuery plugin! But it does not seem to work in IE6 as stated. Tested both the download link as well as the demo page.

  17. November 17th

    wow... looks good... awesome jQuery code ever..

  18. November 17th

    Thx for do this image zoom effect, I very like it, Thx!

  19. Melissa November 17th

    Is there the option for 'next' and 'prev' buttons/arrows to allow the user to go to other images on the page without closing the imgbox?

  20. Sparkly Art November 20th

    IT WAS TIME FOR A MORE STREAMLINED IMAGE BOX. THANK YOU! I have been waiting for a jquery plugin like this for quite a while ----- an "image only" zooming alternative! The aesthetics of your concept feel right and timely, imgbox looks like a queen amongst a mass of bloated boxes. Also don’t mind at all that there isn't a gallery option, they are usually clattered with intrusive bits. I have a couple of questions, if I may: - Is there a way I could set up imgbox to open all images that are linked to images (i.e. jpg, gif, etc) like the original FancyZoom does? My coding skills are really basic, but I wonder if there is a way I could use jquery to add a class to all images that have links to JPGs... - Can I remove the “imgbox-close.png” completely (keep the zoomed image clean, closing by clicking it only)? I could change the imgbox-close.png to transparent, but it would be nice to learn a more elegant way. Many thanks again.

  21. mrverdantgreen November 21st

    I also would like to offer my congratulations on a fine plugin. I am running into a strange problem on Firefox. This can be seen on the demo page on this site. Shift-reload the page to force reloading of all content. Then click on the upper left image of the parachute on the beach. Notice how as the image zooms out to full size, the image is re-rendered from top to bottom, causing a very noticeable "flicker". This doesn't appear to happen in any other browser. Any thoughts?

  22. chris December 8th

    does this plugin work well with serialized images? I tried fancybox but it would not work.

  23. Alex Willms December 18th

    This is great. Easy to implement. I appreciate that it uses classes, so I can avoid those repeated id validation errors! It's easy enough to customize, too... well done. A nice addition would be the grouping/gallery feature... but you know about that.

  24. dan December 19th

    nice work. But I just tested this in IE 8 and it does not work. Clicking on the image directly takes you to the image location.

  25. dan December 19th

    To elaborate, it ONLY works in IE8 if it is viewed under Compatibility Mode.

  26. dmon_s December 26th

    FancyBox doesn't work in IE8 too. Some poeple wrote? that is a jQuery problem of browser detection. Also there is jQuery.live() problems.

  27. December 28th

    Nice plugin. Too bad I found this after finished my website :-( , this is will looks cool on my works page. Ah well will try it out on my future project.

  28. Sara December 31st

    This might become the best box ever! :) If this isn't possible, I suggest: When the image title with the css attribute: white-space:pre; requires more space than the image is wide. Let the title define the width of the zoomed image. I have tried all kinds of zoom packages, they all fail on this. I have found an old script that, as far as I know, is the only one that can handle small images and long titles. It can be found @ www.oscommerce.com as a contribution. Search for "massaged". It does have weaknesses as hardcoded css -rules. Hoping to use imgBox in my coming projects! :) Kind Regards and a Happy New Year! Sara

  29. vigdor January 1st

    wonderfully done and very well supported with great responses from you. kudos, man. also new stuff here is truly an expert implementation. stay focused on this zone - you're the king.

  30. Nelly January 2nd

    thanks for the useful article

  31. jQueryGlobe January 5th

    Well, sorry for big delay. Thanks for feedback. @Melissa: sorry, navigation buttons are not implemented @CGRRay: Nope, I think animations would look weird if title would be visible while zooming @Han @dan @dmon_s : I`ll make additional tests on IE6 and IE8 @Sparkly Art: you can remove it from JS files @vigdor: I hope you understand that this is not commercial project and I can spend my free time as I want/need

  32. Nando January 16th

    I'm getting some problems using IE8 too, it happens when setting any css on the img tag. Does anyone know how to solve it? Thanks.

  33. Barspin January 21st

    lovely plugin, but don't work with jquery 1.4

  34. fjldude January 27th

    A wonderful plugin and perfect for the site I'm currently working on. Thanks very much for sharing your efforts with everyone! I have one tangential issue that I hope you or one of your readers can help me with: disabling tooltips. My captions are long and contain multiple links. They look great and work as expected when the image is zoomed. But they make for lousy tooltips. Any ideas for disabling the tooltip while preserving my captions? Thanks for any help or tips you can offer.

  35. Joe February 23rd

    I really do love this plugin, but as Barspin pointed out, it simply doesn't work under jQuery 1.4.x I'd be willing to take a crack at finding the problem if you could give me an idea of where to start? The issue is the zoomed image never appears . . .

  36. Joe February 23rd

    OK, figured it out :) The plugin references an internal method that was changed in jQuery 1.4. The fix is: on line 33 of the plugin is the line: nr = jQuery.data(elem[0]); This line should be commented out and replaced with: nr = elem[0].id; This solves the problem!

  37. Niro May 3rd

    The fix from Joe seems to work on Firefox but not on IE7. Anyone has a fix that works cross browser? Thanks, Niro

  38. Admiral September 7th

    Nice plugin to zoom hd images without flash (works on iPad…) –

  39. nnp September 28th

    nice plugin. but how do i make it work with my custom dialog like video, custom message? i want same thing for those fuction? is it possible with this? thanks

jQueryGlobe