Site map

spacer

A cross browser CSS photo gallery. Well, mildy angry probably.

spacer

CSS photo gallery

Hovering on the opaque thumbnail reveals the image with no opacity and shows a preview photo with a short text description in the centre of the gallery. Clicking on the thumbnail links to the full size image.

Image01 Image01Image01
Image02 Image02Image02
Image03 Image03Image03
Image04 Image04Image04
Image05 Image05Image05
 
 
Image06 Image06Image06
Image07 Image07Image07
 
 
Image08 Image08Image08
Image09 Image09Image09
Image10 Image10Image10
Image11 Image11Image11
Image12 Image12Image12
 

The 5 minute express gallery

If you have only five minutes to spare and want to see this gallery working straight away, use the express gallery template. Otherwise stay here and I'll explain in detail how to create the above css photo gallery.

Rotating php gallery

Once you've cracked the rather simple instructions for this css gallery, you can go for the Rotating php gallery, which changes images every hour. Best to get familiar with the css gallery first though.

A brief description

The gallery above is tableless and uses only css for positioning and opacity. It works by loading 24 images when the page is opened. The twelve thumbnail images are visible and the preview images are visible in the centre of the gallery when the relevent thumbnail is hovered over. When the thumbnail image is clicked on the link can open a new page with a larger image or link through to a website etc.

The HTML and XHTML

Go to the blank HTML 4.01 Strict template or the XHTML 1.0 Strict template, then copy and save the markup as shown.

The CSS

Copy the gallery css file and save as gallery.css in the same directory as the html template. For an explaination of the css there is a css help page with comments on what can be tweaked.

Image size and labelling

Thumbnail images

The thumbnails are 149×112px. For this gallery they are labelled "image01_thumb.gif" to "image12_thumb.gif".

Preview images

The preview images are 300×225px. For this gallery they are labelled "pre_image01.gif" to "pre_image12.gif". Obviously you can use gif, jpg, png or whatever you want.

If you want help with the image resizing & creation part, go to our GIMP tutorial pages.

History

The opaque effect was found on stu nicholls CSS PLaY experiments with css site, a very good site for innovative css.

I used the opaque effect he had used on a menu and adapted the idea for this photo gallery template. After a bit of messing around, I finally recently got it to work for our main photo galleries.

Compatibility

I have checked it out with the following browsers and given comments as to performance. I've also checked at 1280×1024, 1024×768 and 800×600 screen resolutions and they are ok too.

 

Other Mac based browsers

Also checked with Camino, Sunrise, & Shiira.

Internet Explorer 5 work around

I used a standalone version downloaded from evolt.org to check this out. It works, but has a slight shift to the left on photos 6 and 8 with the standard css.

Consequently I used four 149×112px transparent spacer images for the centre, which work fine.

It's a bodge I know, but life's too bloody short to waste time on a browser that only about 0.3% of our visitors use. Shoot me smile

Internet Explorer 5 spacer

For IE5 browsers delete these lines of html

<div class="no-thumb">&nbsp;<div>

and replace with the following html.

<div class="no-thumb"><img src="images/ie5.gif" alt="IE5 Spacer" width="149" height="112" /><div>

Then copy & save the transparent thumbnail spacer image (ie5.gif) below.

ie5 spacer