PopBox is an image magnification javascript solution for dynamically moving and resizing images on your web page. Javascript? Yes – I know it’s nothing new and that you’ve been able to move and resize things in Javascript for years, but only now is there a prepackaged solution that makes it as easy as 3 lines of HTML without knowing a lick about positioning!

Main Features

* Ridiculously simple to use.
* Does not navigate away from the page or create separate windows.
* Does not require any special browser plug-ins. 100% script and CSS solution.
* Includes a multi-line caption capability that dynamically sizes to fit.
* Allows for a different image to be used for the thumbnail and Popped images – on page load or on image click.
* Supports scrollable landscape and portrait images that extend beyond the browser window.
* Can display a user-defined text message across the top of the image on page load on the thumbnail image.
* Can display a user-defined text message across the top of the image after it has been popped.

Please see the Documentation Page for full instructions.

What can PopBox do?

It was originally created to magnify your images so you could display small ones on your web page that expanded to show the detail when the user clicked on it (thumbnails).

PopBox accomplishes this movement and resizing through some fancy Javascript, which was originally explained to me by reading Danny Goodman’s books which you can find in the left hand column on this page. If you’re interested in the “plumbing” behind the code I can highly recommend any of them.

One of the best things about PopBox is that you don’t need to know how to do CSS absolute positioning. You just build your web page and place your images as you normally do and PopBox will take care of the rest for you. I’m a big fan of user-friendly.

<!-- here's the HTML tag for Bamburgh castle above -->
<img id="imgBamburgh" alt=""
src="../../articles/images/BamburghInNorthumbria.JPG"
pbshowcaption="true"
pbcaption="My friend Chris Wright took this picture of Bamburgh in Northumbria and graciously said I could use it."
style="width: 150px; height: 100px;"
class="PopBoxImageSmall" title="Click to magnify/shrink"
onclick="Pop(this,50,'PopBoxImageLarge');" />

Notice that no special positioning is declared, making it as easy to lay out your page as it’s ever been. To achieve the PopBox effect you only need to follow these simple steps:

1. Add the script include for the PopBox code.
2. Get an image the full size you want when expanded. All types supported by your browser are supported by PopBox.
3. Optionally get a different image for the thumbnail.
4. Place the image on the page with a standard tag.
5. If you’re using one image for both the thumbnail and the popped image then use a style attribute to set the width and height to represent the thumbnail image.
6. If you’re using different images for the thumbnail and the popped image then set the src attribute to the thumbnail image and the pbsrc attribute to the popped image.
7. Optionally specify other attributes.
8. Add the PopBox calls to the image events you want. (I recommend using onclick or onmouseover.)
9. Show your friends!

Notice that PopBox uses a pair of commands to do the Pop and Revert. It was designed specifically to allow rollover effects with onmouseover and onmouseout, or to allow Pop and Revert by clicking on the image. However, since there is only one onclick event I have hijacked the ondblclick event for the Revert. These Revert calls are automatically generated for you so you don’t have to code them!

Demo: http://www.c6software.com/Products/PopBox/Default.aspx
Download: http://www.c6software.com/codedrop/PopBox.zip
Source: http://www.c6software.com/Products/PopBox/Default.aspx

Related Listings:

1. Hoverbox Image Gallery New Script Additionally, thanks to Craig Erskine this now works without the...
2. CJ Image Video Previewer CJ Image Video Previewer is meant to mimic the video...
3. Modified Hoverbox Image Gallery This following is a modified version of Nathan’s incredible Hoverbox...
4. Magnifier to images with CSS and Java A couple of people have asked about the CSS magnifier...
5. Click and Drag Image Cropper : JavaScript Really sweet image cropper, modifiable via user drag and click...

Do you like this post?

Email: