Picbox

Picbox is a lightweight (around 5KB) javascript image viewer based on the excellent Slimbox by Christophe Beyls, and available using either the Mootools or jQuery frameworks. It features automatic resizing and zooming of large images, allowing them to fit in the browser or be viewed at full size.

Demo

demo1 demo3 demo2 demo4

Download picbox v1.1.1 (Mootools) or picbox v2.1.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.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.2Fixed a couple of bugs with resizing while scrolled down and overlay.

Version 2.0 – Initial release

Changelog (mootools)

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.


<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools.js”></script>

40 Responses to “Picbox”

  1. Li-An Says:

    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.

  2. admin Says:

    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?

  3. Vagur Says:

    EXIF including?

  4. Al Says:

    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.

  5. Alvaro Says:

    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.

  6. Ben Says:

    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 :D

  7. Denny Says:

    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!

  8. Denny Says:

    oops I guess it used my html but yeah I hope you understand what I was trying to say

  9. Thomas Says:

    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.

  10. Zull Says:

    My appreciation to this awesome plugin and the developer. It does great job for my media of lecturing. Thanks buddy.

  11. Eric Says:

    On my site (193maple.net) double-click doesn’t work in IE…. any idea why? Works fine in firefox.

  12. Piyush Says:

    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

  13. Z00m Says:

    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

  14. MTBGearTech Says:

    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.

  15. gofree Says:

    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?

  16. gofree Says:

    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?

  17. gofree Says:

    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?

  18. Ben Says:

    @gofree: The caption must be in the title of the link, not the image thumbnail. (I’m sure that’s how Lightbox 2 works too).
    The x button shouldn’t usually be a problem but I see how it could be, I’ll look to improve that in future releases.

  19. gofree Says:

    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 :)

  20. guille Says:

    My appreciation to this awesome plugin and the developer. It does great job for my media of lecturing, the action plugin

  21. zsolt@wpc Says:

    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;
    }

  22. zsolt@wpc Says:

    http://pastebin.com/m4a4a87c0

  23. k Says:

    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)

  24. k Says:

    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!

  25. k Says:

    About vertical dragging bug:
    “mouse.Y” in line 318 should be “mouse.y”, i.e. “y” shouldn’t be capital letter
    :)

  26. k Says:

    Hello,

    MANY THANKS for these quick bug fixes -> v.2.1.1!

  27. zsolt@wpc Says:

    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.

  28. zsolt@wpc Says:

    BTW, on this page (your homepage), my Firefox 3.5 always had some stuttering while scrolling, not it’s gone too!

  29. Ben Says:

    @k + zsolt:
    No problem :) thanks for the heads up about the bugs.

    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.

  30. k Says:

    Please,
    look from time to time at:
    http://plugins.jquery.com/project/issues/picbox

    Here is not easy to post bugs and patches.

    Thanks

  31. Eddy Says:

    It won’t work anymore after the update to wordpress 2.9.2!!

  32. zsolt@wpc Says:

    Broken with 2.9.2 :-( (((

  33. Ben Says:

    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?

  34. zsolt@wpc Says:

    The problem was that during the update the new margin field left blank. I had to type 0 to fix it.

  35. 15+ promising jQuery Lightbox-Clones plugins — Narga Says:

    [...] 13. Picbox [...]

  36. ogdpzvz Says:

    ejOimM tfhjjbdlpugh, [url=http://pthnwfpplwbj.com/]pthnwfpplwbj[/url], [link=http://ubgmqgggtmxt.com/]ubgmqgggtmxt[/link], http://oiczflhqyexv.com/

  37. Andy Says:

    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.

  38. Andy Says:

    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.

  39. Andy Says:

    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.

  40. Andy Says:

    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.

Leave a Reply

Please use the contact form for support requests and use this issue tracker to report bugs as I will be able to respond more quickly. Thanks.