CSSPLAY

CSS DEMOS › A sliding list click gallery

Date : 11th February 2008

For all modern browsers

This demo is too wide for your mobile screen.
Please view on a tablet or PC.

• Image Set #1

  This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image.

• Image Set #2

  This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image.

• Image Set #3

  This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image.

• Image Set #4

  This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image.

• Image Set #5

  This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image. This is a little bit of text that can be displayed with the full size image.

Information

A second go at my previous gallery, this time with a click to open action rather than a hover. Also the facility to add some descriptive text to accompany the large image. This one uses no conditonal comments, no Microsoft behaviors and no javascript yet it validates using the w3.org validator.

As with the previous gallery this one allows you to have a default image, and this one has been adapted to have both landscape and portrait images.

This has been tested in IE6, IE7, Firefox and Opera (9.5 beta), Safari and Chrome. Opera 9.5 beta has changed the way this browser interprets the mouse click and no longer needs the mouse button to be held down when clicking a link. It also corrects several other rendering bugs and many of my 'slide/scroll' galleries now work with this browser.

IE6 has one small bug in that if you click on a thumbnail it remains :active and if you go back into that image set you will have to hover over this image again before you can see all other images in that set.

All the photographs in this gallery have either been purchased from dreamstime for use on CSS play or have been obtained from the stock.xchng. These are copyright the various photographers and should not be copied without their permission.

If you want to adapt this gallery in any way then I am now offering a service to modify this to suit your requirements. Just contact me be email stu{at}cssplay.co.uk for more information.

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 retain the copyright comment in the stylesheet.
   A support donation is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.