NeutralAxis

Lightboxed images on a website are those where when you click on a thumbnail image, they expand into a larger image, usually with a semi-transparent background so you can still see the page behind it.  The Lightbox 2 plugins work well and are popular, but don’t have the ability to scale or resize the image if it’s larger than the available screen size, which means that high res digital photos may require scrolling to get to their close or navigation buttons.

I searched online, and browsed through the code for both of those plugins and couldn’t find a way to modify them so they would resize the image if it was too big.  There were some potential solutions, but either I couldn’t make them work, or didn’t like the results.

The solution was to quit searching available plugins for “lightbox” and instead load “fancybox”.  Here for WordPress, and here for the code for non-Wordpress sites.

The Fancybox for WordPress plugin does everything Lightbox 2 does and more, with easily adjustable controls.  There’s no extra coding required when including photos into a post, the photos have forward/back navigation ability, the background color and transparency is adjustable, and it seems to work very smoothly.  The non-Wordpress link above also shows that its possible to change how each individual picture reacts.  I haven’t seen yet that such control is available when using the WordPress plugin, but I intend to check into that.

The screenshots below will expand via fancybox when clicked.

Easing effects control how the popup image opens and closes.  The default, easeOutBack, enlarges the image beyond its full size for a moment and then snaps back to its final size.