A cross browser CSS photo gallery. Well, mildy angry probably.
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.
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
Image size and labelling
The thumbnails are 149×112px. For this gallery they are labelled "image01_thumb.gif" to "image12_thumb.gif".
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.
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.
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.
- IE 8
- IE 7
- IE 6
- IE 5
- Tested and works on versions from 1.5 onwards.
- Tested and works on versions from 8.5 onwards. Opacity isn't supported in versions below 9.0.
don'tnow own a MacBook and it's been tested and works on versions from 1.2 onwards.
- Tested and works on versions from 1.7.8 onwards.
- Tested and works on versions from 8.1 onwards.
- As Konqueror is based on the WebKit rendering engine, the same as Safari, I assume it works.
- Tested, works once new (MS only) opacity declaration added.
- Ive checked it on a work pc with IE7 installed and it's ok.
- Tested and works. Yeah really, it does! I was shocked too.
- Tested and works with the
bodgework around below.
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
Internet Explorer 5 spacer
For IE5 browsers delete these lines of html
<div class="no-thumb"> <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.