D-Allison.com Portland Oregon Website Design

There are lots of ways to show your imagery on your website, whether you have a photo blog, a photography website, or just a plain ole corporate site.  Traditionally, when one clicked on an image to see a larger view, it took you to a separate page, a new pop up window, or even worse, a new browser window or external application.

I am no expert at this, but I prefer Javascript pop ups that display images inline so that they don’t open a new window. There are still a few that will open a window that look really nice, and I will give space to those as well.

I use Dreamweaver and/ or WordPress to design most of my sites. In Dreamweaver, you can install extensions to give you added functionality.  The Just So PhotoAlbum3 from Valleywebdesigns is a great tool that allows you to specify a folder and automatically create thumbnails, and pop up images using Fireworks and Dreamweaver.

Just So PhotoAlbum3

Just So Photo Album 3 Window

The first tab allows you to specify where you want to pull the images from, what size to make the thumbnails, how good you want the quality to be, etc. The second tab lets you choose from a few pre-made CSS templates already built in to spice up your thumbnails.  You can also choose to make them plain and apply your own styling and CSS later. The third tab allows you to specify the settings for the pop up; borders, backgrounds and other details.

This extension requires obviously Dreamweaver, but Fireworks as well. That make rule out some users unless you owned both packages.  It also opens a pop up window, which may not be seen by users with a pop up blocker turned on. The gallery’s can be very visually appealing however, which can outweigh all those other cons. Go to the website here and see examples.

Lightboxes, Thickboxes, Fancyboxes, Multiboxes…..

This is where many designers are headed now.  I use a few of these quite frequently in my designs.  These are inline unobtrusive windows that can be altered with CSS to show images, video, inline content, html pages, pdf’s and more.  Generally, this is accomplished by downloading the code / files from a developer (listed below) and inserting the style sheets and scripts into your page. Most require a class or an ID to be attached to the text or image to trigger the effect.  I use Multibox on this website to show images in the portfolio page, as well as when you click to Contact link in the sidebar and footer.  The nice thing about these windows too are that some can darken the background of the page to give more focus to the image or item being displayed.

I won’t go into detail on how to install those items because they are tirelessly documented on the web already, but I will provide links and links to examples.

These don’t require any specific web design platform and there are many plugins available for WordPress that make these options even more user friendly.

• Thickbox 3.1 -ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
• Lightbox 2 – Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.
• FancyZoom – Automatically scales large images to fit in window with a Mac like feel.
• Multibox – lightbox that supports images, flash, video, mp3s, html.
• And LOTS of other clones with many, many options.  The place to see them all COMPARED is The Lightbox Clones Matrix.