Articles
jQuery Plugin - imgBox
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:
- Directly modify
$.fn.imgbox.defaults
- 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
-
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]
-
is it possible to put links within the caption in the pop-up?
-
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!
-
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.
-
"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.
-
This isn't a Reply but a Question : How can I have my image without white border? (Like the FancyZoom does?) Thank You !
-
bravo! a small and elegant lightbox. This is awesome.
-
I am a js noob and forgot document ready. Might want to remind people of that. Awesome script using it for threadify.myshopify.com
-
Awesome.... I like it so much... thank you for creating this lightbox.
-
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?
-
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.
-
wow... looks good... awesome jQuery code ever..
-
Thx for do this image zoom effect, I very like it, Thx!
-
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?
-
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.
-
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?
-
does this plugin work well with serialized images? I tried fancybox but it would not work.
-
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.
-
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.
-
To elaborate, it ONLY works in IE8 if it is viewed under Compatibility Mode.
-
FancyBox doesn't work in IE8 too. Some poeple wrote? that is a jQuery problem of browser detection. Also there is jQuery.live() problems.
-
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.
-
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
-
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.
-
thanks for the useful article
-
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.
-
lovely plugin, but don't work with jquery 1.4
-
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.
-
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 . . .
-
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!
-
The fix from Joe seems to work on Firefox but not on IE7. Anyone has a fix that works cross browser? Thanks, Niro
-
Nice plugin to zoom hd images without flash (works on iPad…) –
-
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
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
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] :Cover Design