V2.5 - Mastering the Landscape.

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!

If your web site has a thumbnail image gallery then you need PopBox!

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

Click on an image to magnify it and then click on it again to shrink it back down.

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 <img> 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!

But PopBox can do even more...

S
T
R
E
T
C
H

A
N

I
M
A
G
E

  This
  is
  super
  secret
  text!
Slide an image to reveal hidden text or graphics. Instant resize.

Of course you can shrink an image too.

Another nice feature is that if you use the default Pop/PopEx methods you can pass parameters that will automatically center and scale your image so it will show up perfectly. The image below is much larger than most displays, which you can verify by right-clicking the popped image and saving it locally, but when Popped! it will auto-scale to fill your browser window. Try resizing your browser and clicking it.

New to version 2.5 is support for landscape images that extend beyond the browser window. It still auto-scales to fill the height but extends the width accordingly.

I've even included a facility for events, so that before and after Pops and Reverts you can run your custom code. In this sample I just do simple javascript alerts.

You may have also noticed the transparent bar with shrink text and the little magnifying glass image at the top of many of the images - that's a new feature for version 1.1 for the popped image and for 2.0 for the thumbnail. They are fully customizable on a picture by picture basis and you can also set defaults for the page. See the documentation page by clicking the link in this sentence or in the left column above Danny's books.

Powered by PopBox! You can also specify a CSS class for the original image and the Popped image. In short, there are lots of features and if you like it feel free to share with others by linking to this site on yours. I've even included a graphic you can use!

Support is limited to email and since this is free I won't promise more than I can deliver while still working a day job, but I'll do my best. I already have a few enhancements planned as well, so be sure to sign up for my mailing list or subscribe to my RSS feed to be informed of the latest progress.

Questions and suggestions can be sent to john.reid@c6software.com. Please put "PopBox" in the email subject so I can easily filter. Send me your URL and I may post it!

Documentation Page