Picbox
Demo
Download picbox v1.2 (Mootools) or picbox v2.2 (jQuery)
WordPress plugin available now! Go here: http://wordpress.org/extend/plugins/picbox/
Hint: If you don’t use any javascript frameworks on your site download the mootools version as it is slightly smaller. If you are not sure download the jQuery version as it is less likely to conflict with other frameworks (both versions are identical in features and will be maintained alongside each other).
Features
Images automatically resize to fit the screen when opened. They can then be zoomed in/out using the scroll wheel and moved around on screen using the mouse. Double clicking resets the image or views it full size.
Picbox includes an api and customisation options. Refer to picbox.js in the src/ folder for the full list, including descriptions.
Installation
Copy the js/ and css/ folders your server. Then insert the following code into your <head>:<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>for mootools, or<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>for jQuery, then (for both)<script src="js/picbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/picbox.css" type="text/css" media="screen" />
The folder structure can be changed, but if you put the images in a different folder to the css file be sure to change the paths in picbox.css!
Usage
For easy migration from Lightbox/Slimbox, by default the script activated for links with rel=”lightbox” e.g.
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
To organise the images into groups add a group name after the word “lightbox”<a href="images/image-1.jpg" rel="lightbox-group1">image #1</a>
<a href="images/image-2.jpg" rel="lightbox-group1">image #2</a>
<a href="images/image-3.jpg" rel="lightbox-group1">image #3</a>
Of course this can all be customised by editing the autoload code in picbox.js. Example loading code for loading all image links or picasaweb/flickr galleries are in the extras/ folder (all copied from the Slimbox release).
Requirements + Compatability
Picbox v1.x and v2.x have been tested with Mootools v1.2.3+ and jQuery 1.3+ respectively.
To create a custom mootools.js for 1.x, the following modules are required.
- Native: all
- Class: all
- Element: all
- Utilities: DomReady
- Fx: all
Note that the drag module from mootools more is no longer required.
Picbox should be compatible with Firefox 2.0+, Internet Explorer 6+, Opera 9+, Safari 4+, and Google Chrome. Firefox 3.5 and newer webkit browsers also have nice shadows around the images 
.
If any incompatabilities are found please contact me or leave a comment below.
Changelog (jQuery)
Version 2.2
- Caption now appears briefly when navigating using the keyboard and controls are hidden
- Small empty square no longer appears when a caption is not present
Version 2.1.2
- Fixed controls appearing in rare cases after Picbox is closed
Version 2.1.1
- Controls won’t disappear if the mouse is over them
- New margins option to control default margins between image and edge of window
- Dragging when scrolled bug fixed
- Controls no longer appear on keyboard navigation
- Some other small bugs fixed
Version 2.1
- Images now take up as much window as possible
- Full size/ restore button
- Redesigned controls (Thanks Huw Kinsman for doing much of the design )
- jQuery 1.4 compatibility
Version 2.0.3 – Fixed picbox not working if there was flash on the page.
Version 2.0.2 – Fixed a couple of bugs with resizing while scrolled down and overlay.
Version 2.0 – Initial release
Changelog (mootools)
Version 1.2
- See v2.2 changelog for new features
- Fixed zoom button sometimes not activating
Version 1.1.1
- Controls won’t disappear if the mouse is over them
- New margins option to control default margins between image and edge of window
Version 1.1
- New design: see jQuery changelog
- Mootools 1.2.4 compatibility
Version 1.0.1
- Updated included mootools.js version to v1.2.3
- Picbox now uses the safe $ feature in mootools so can be used where other javascript frameworks are present.
Version 1.0 – Initial release
Donate
A lot of time and effort has gone into the creation of this. If you would like to say thank you, please consider donating.
December 15th, 2009 at 4:01 pm
Hello, as I use already Slimbox, it’s a very interesting plugin and the zoom effect is a brilliant idea but… people are not used to zoom on Lightbox effects so it could be important to give shortcuts/text explanation to make them zoom. Second thing, I think the arrows look and place are not pretty and convenient.
December 16th, 2009 at 1:03 am
Thanks for the feedback
A full size/restore button is already planned for the next version. I’m not sure how long that will be, but hopefully it’ll be out in the next couple of weeks.
Not so sure about the arrows though. Do you have a better suggestion for their placement?
December 16th, 2009 at 8:25 am
EXIF including?
December 18th, 2009 at 2:18 am
I really love PICBOX, it´s everything that I need for viewing images.
I have however, problems with it:
-It does not work with flash at all.
Greetings from Spain.
December 19th, 2009 at 1:59 am
I Finnaly made it work. My problem was that I didnt know that the jquery version do not work well with flash, but yes in the MooTols ver.
Thx for your Masterpiece, XD
Bye.
December 19th, 2009 at 3:35 am
That’s strange, it should work. I’ll look in to it, I probably just missed something while porting it.
But I’m glad you like it
January 3rd, 2010 at 4:50 am
Great plugin! I like it a lot. I have a question…is there a way to display only one thumbnail in my post but then when you click on it the thumbnail the picbox will show several images from a group of pictures? It is similar to your example of:
image #1
image #2
image #3
But I don’t want image-2.jpg or image-3.jpg showing on the post. I want it to display only once you click on the image-1.jpg thumbnail
Thanks!
January 3rd, 2010 at 4:50 am
oops I guess it used my html but yeah I hope you understand what I was trying to say
January 5th, 2010 at 4:41 am
Great plugin! Very fast and I like the how it resizes the photos based on the size of the screen. I do, however, agree with the first poster that the arrows and the ‘close’ button are not in very convenient places. They are on the edge of the screens so it requires more ‘work’ to look for and click them. I think it would work better if they were closer to the photos.
January 6th, 2010 at 4:12 am
My appreciation to this awesome plugin and the developer. It does great job for my media of lecturing. Thanks buddy.
January 19th, 2010 at 5:38 pm
On my site (193maple.net) double-click doesn’t work in IE…. any idea why? Works fine in firefox.
January 21st, 2010 at 8:32 am
Hi,
this is very very nice.
I need one help if u help me, i want to add a link when image r zoom.
can u give me reply on this id (piyush.rupapara@gmail.com)
Thanks,
Piyush
January 21st, 2010 at 3:38 pm
It would be nice to limit the maximum zoom level to the effective picture size. Is it possible ?
I dont wanna let users zoom more than 100% of the image (in other words: the software zooming)
hth
Z00m
January 23rd, 2010 at 4:00 am
Just installed the update and I have some problems. The “close” button in the upper right hand corner never goes away and disables the ability to click on any other buttons on my site.
January 25th, 2010 at 9:33 am
Look promising indeed. Anyway, how can we install it in Blogger blogs whereas images hosted by blogger have an ‘-h’ in the link which prevent most light box script to work?
January 25th, 2010 at 9:55 am
I am using it ‘plugin for wordpress’ here: http://warezreview.co.cc but it doesn’t show the capture from the ‘title’ attribute like LightBox 2. How can I fix this?
January 25th, 2010 at 9:58 am
Opp sorry to triple post, but would like to report that the ‘X’ close button seems to appear behind the photo. How do we make it top of the photo so the visitor can see the close ‘X’ clearly?
January 25th, 2010 at 6:12 pm
@gofree: The caption must be in the title of the link, not the image thumbnail. (Im sure thats how Lightbox 2 works too).
The x button shouldnt usually be a problem but I see how it could be, Ill look to improve that in future releases.
January 26th, 2010 at 8:28 am
Thanks a lot for the answer. Lightbox 2 has the ability to show the title of image from the image name in WP as I used it to; but now using your nice script
January 30th, 2010 at 4:39 am
My appreciation to this awesome plugin and the developer. It does great job for my media of lecturing, the action plugin
February 4th, 2010 at 2:57 am
Amazing work, but I found some crazy bugs:
1. If you are trying to click by mouse to watch a slideshow, and you are clicking on the same point without moving the mouse, then after some time the interface disappears and your next click just kills it.
1.b Not a bug, but a request: if you know that you can use the keyboard, there is no need to show the arrows on every image, as it’s just annoying, _this_ is the point where the arrows should disappear, not when using the mouse.
2. Very crazy thing, in WordPress, if you insert a gallery, it doesn’t work with picbox, but if you copy from the gallery’s page, and paste it into a clean page, it will work. I compared the source code, and there was almost no difference.
That’s the part I am copy-pasting:
#gallery-1 {
margin: auto;
}
#gallery-1 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%; }
#gallery-1 img {
border: 2px solid #cfcfcf;
}
#gallery-1 .gallery-caption {
margin-left: 0;
}
February 4th, 2010 at 3:01 am
http://pastebin.com/m4a4a87c0
February 5th, 2010 at 9:27 pm
Hello,
There is a bug on image drag when document is scrolled – incorrect left and top position calculation (suitable for IE6 only). Workaround:
(picbox-2.1, source, Line 316)
function drag(e) {
…
el.css({
left: x – offset.x – (ie6 ? 0 : $(document).scrollLeft()),
top: y – offset.y – (ie6 ? 0 : $(document).scrollTop())
});
…
}
Also, dragging is better with smaller threshold (line 318). Example:
if (Math.abs(x – mouse.x) > 1 || Math.abs(y – mouse.Y) > 1)
moved = true;
Third, vertical dragging is impossible if initially image is not moved horizontally.
I can’t understand why.
Next, it will be better if there is a option for image margin (line 216). For example:
var mw = win.width() – options.margins, mh = win.height() – options.margins, size = 1;
Very easy to implement.
Next, overlay does not disappear on Safari v3. This does not happen with Safari v4.
(jQuery-1.4.1)
February 5th, 2010 at 9:59 pm
One more thing,
Initially img with id=”pbImage” has “display: none;” but after image is closed “display” remains “block”.
This makes strange “fluid” effect on document scrolling but only in Firefox-3.5 and 3.6.
If “display” is changed to “none” (via Firebug), this strange scrolling effect disappears.
BTW, picbox works even with Firefox-1.0. There is buttons-panel z-index bug, but works!
February 5th, 2010 at 11:31 pm
About vertical dragging bug:
“mouse.Y” in line 318 should be “mouse.y”, i.e. “y” shouldn’t be capital letter
February 6th, 2010 at 7:58 am
Hello,
MANY THANKS for these quick bug fixes -> v.2.1.1!
February 6th, 2010 at 12:24 pm
Amazing! Everything is fixed!
Two feature requests:
1. Now, as the image caption is linked to the UI, when you are browsing via keyboard, there are no image captions.
2. For the WordPress plugin, can you modify it to use the “Alternate text” or the “Caption” fields and not the title for caption data? The title is always the name of the file (meaningless) when you batch upload photos.
+1 a margin implementation would be amazing in WordPress’ settings.
February 6th, 2010 at 12:28 pm
BTW, on this page (your homepage), my Firefox 3.5 always had some stuttering while scrolling, not it’s gone too!
February 7th, 2010 at 9:09 pm
@k + zsolt:
thanks for the heads up about the bugs.
No problem
I’m looking let all the options be changed through the wordpress settings, I just wanted to get this release out quick to fix everything.
February 9th, 2010 at 4:20 pm
Please,
look from time to time at:
http://plugins.jquery.com/project/issues/picbox
Here is not easy to post bugs and patches.
Thanks
February 16th, 2010 at 9:45 am
It won’t work anymore after the update to wordpress 2.9.2!!
February 17th, 2010 at 8:52 am
Broken with 2.9.2
(((
February 18th, 2010 at 11:12 am
I’ve got it running fine on 2.9.2 here and on a test blog.. Have you got a link to where it’s not working?
February 21st, 2010 at 11:02 pm
The problem was that during the update the new margin field left blank. I had to type 0 to fix it.
March 2nd, 2010 at 2:49 pm
[...] 13. Picbox [...]
March 5th, 2010 at 6:18 am
Today I’m so grateful I finally found your plug-in. Thank you. I’ve been searching like crazy for a nice looking, simple, lightweight alternative. This is the first plug-in that I’ve found that isn’t either heavy (forcing jquery.js) or ugly (like Slimbox, the one I almost settled for).
Personally, I really like the navigation icons. They are big and not too distracting. If it were me, I would put them above the photos. That way they are always in the same place and visible.
I would like to see:
- navigation at the top of the screen with title/caption directly under the navigation icons
- an option to show the title OR caption OR both (specified on the admin screen ideally)
- a slideshow option
I would list more suggestions, but this is just great as it is. Thanks again.
March 5th, 2010 at 6:30 am
BTW, I tried to send a donation, but the link doesn’t seem to work. It just sends me to my PayPal account, not to a payment form.
March 5th, 2010 at 11:04 am
Ah, I spoke too soon. I thought Picbox didn’t load jquery (or mootools), but I was wrong. I was really hoping to find a nice image-viewer that wouldn’t load the entire library. Is that even possible? Does Slimbox also load a library?
The problem is that my front page is close to 200kb, and I really can’t afford to have new visitors leave because it’s loading slowly. I either have to trim jquery.js or take out half the front page content or just leave it alone. I really do like how Picbox looks and works, so I’ll take the third option and stick with it for now.
Still grateful, just bummed I couldn’t have my cake and eat it, too.
March 6th, 2010 at 4:42 pm
Can I use PicBox and have jquery load in the footer? I realize someone might click on a picture before jquery finished loading, and they wouldn’t see the fancy stuff. But (if I’m correct), wouldn’t people see the website content noticably faster if jquery loads after the rest of the page? That would be worth it for me.
If it’s possible to have jquery load in the footer (via Googleapis), could you tell me how? Eg, what to add to my functions.php or how to change the plugin itself?
I tried to do it myself with no luck. Any help would be appreciated.
March 12th, 2010 at 7:48 pm
jQuery itself is only 19kB or so, and as it’s loading from a separate domain to yours (googleapis) the browser should download it concurrently (and jQuery’s so popular there’s a good chance the user already has a cached copy) so I doubt that it is significantly affecting your page load time.
200kB these days is probably about average for a web page anyway, and on a broadband connection that shouldn’t take much more than a second to download.
If you still want to do something, drop me an email and I’ll try and work it out.
Oh and the donate link should be fixed
March 18th, 2010 at 4:32 am
Thanks for replying. I understand JQuery better now, so I think it’s not to blame for my site loading slowly.
I really like Picbox and would like to donate. I’m on the road now, so it’s not a good time. Keep up the good work. IMO, what you’re doing is much better than Slimbox, Lightbox, etc. (more user friendly, better use of the screen, and more).
March 31st, 2010 at 9:37 pm
Pure greatness, clean and simple, the default 75% of window sizing is simply brilliant for my needs. Drop-in replacement for slimbox2 made it a snap to change over, thanks for offering this!
April 6th, 2010 at 6:46 am
[...] jQuery framework, MooTools framework Demo:http://bunnyfire.co.uk/projects/picbox/ License: MIT [...]
April 7th, 2010 at 6:40 am
Nice stuff…..Thanks….
April 8th, 2010 at 4:40 pm
[...] Picbox [...]
April 8th, 2010 at 10:29 pm
Nice work! It would be great if you could support mipmap layer with different image sizes. Think about a wallpaper app where you can resize the image until it fits your screen.
April 9th, 2010 at 1:59 pm
Pretty cool picbox. This is something I will be implementing .
Thanks
April 21st, 2010 at 8:22 am
This plug-in is just what the doctor ordered. Call me if you ever come to Shanghai.?????
April 28th, 2010 at 7:53 am
[...] Picbox, libreria molto leggera (circa 5KB) basata su Slimbox e disponibile per Mootools e jQuery. [...]
May 14th, 2010 at 9:50 am
[...] ■Picbox わずか5KBと非常に軽量なサイズのライトボックスプラグイン。 [...]
June 11th, 2010 at 4:42 am
It’s very good.
I like this.
Thanks for share.
And I wrote something to introduce this project for my readers.
You can find the post about this in my website.
If something is wrong,pls figure it out.thanks.
June 11th, 2010 at 7:58 pm
I try this jquery and it is very light. I like it very much. Thank you very much.
June 15th, 2010 at 9:10 am
Hi,
I have one little question. It is possible to remove picbox’s navigation buttons when the gallery contains only one picture ? Is there an option to modify picbox that way ? If so, how to do that ?
Thanks in advance,
Jacob
July 16th, 2010 at 4:58 pm
This is an awesome plugin for wordpress, and may be exactly what I’m looking for!
Is it possible, on a page in wordpress, to somehow point to a folder full of images that are already named, and just have Picbox show all the images in the folder? Rather than manually typing a href string for each photo?
July 25th, 2010 at 1:26 pm
thanks for the script, it’s all I was asking for.
The only problem I have is with the close button that likes to hide behind the pictures…
Is there ANY way to make it float on top like the navigation bar?
August 25th, 2010 at 12:54 pm
Many thanks, great plugin.
Can’t await next version using HTML5/canvas and having a smooth zoom.