stu nicholls | CSS PLaY | cross browser multi page photo gallery

AD
CSS PLaY
Experiments with Cascading Style Sheets
HOME
LIST
PREVIOUS
NEXT
COMMENTS
DEMOS
MENUS
LAYOUTS
BOXES
MOZILLA
EXPLORER
OPACITY
CROSS BROWSER MULTI-PAGE PHOTO GALLERY
30th March 2006
For IE5.5, IE6, IE7 beta, Opera 8, Firefox 1.5 etc..
PortraitsPortraits
LandscapesLandscapes
FlowersFlowers
TreesTrees
BirdsBirds
NO JAVASCRIPT
JUST CSS
AND IT VALIDATES !!!
INFORMATION
Based on the look ofSuckerfish HoverLightbox, this one uses my multi-page layout system but includes images instead of text.
Unlike the Suckerfish HoverLightbox this version does not use javascript but is pure CSS and still works in IE.
I shouldn‘t have to explain this, but... for those of you who think that flowers are those things with petals etc .. they‘re not. Crossword fans like me will know that they are things that flow ... like rivers. Sorry for the misunderstanding ;o)
Just hover over the tabs to display a page of images. Hover over each image to see a 2x image and finally, on the Portraits and Landscapes, click the image to open a new window showing the 640 x 480 pixel version.
31st March 2006
This page has generated so much interest that my stats for JUST today went through the roof.
Hits - 5,218,156
KBytes - 53,986,717
Pages - 384,229
Thank you to everyone who visited.
CASCADING STYLE SHEET
If you look at the header of this page you will see that the normal method of loading a file is used for the non-ie browser css files.

The lightbox.css file
The IE only style sheets are loaded using the conditional comment.

The lightbox_ie.css file
THE (X)HTML
The (x)html code for the multi-page gallery can be seenhere in text format.
You will see that conditional comments have been used to hold the IE specific version of the tab set which used nested tables. The other browsers will not see the tables and instead will use the normal unordered lists.
Please note that you will also need a standards compliant !doctype for this menu to work correctly.
',1)">
COPYRIGHT
Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.
1. If you are using this on a personal web site then please add a comment and a link back to CSS PLaY. I would also appreciate a donation to the ‘Support CSS PLaY‘ fund.
2. If you are using this on a commercial web site then please email me asking for permission - stu{at}cssplay.co.uk and again a donation to the ‘Support CSS PLaY‘ fund would be appreciated.
APPROVALS
VALIDATION AND COMPLIANCE
xhtml 1.1css 1/2/3
©2004/5/6 Stu Nicholls ~ All rights reserved
_Flash