CSSPLAY
Doing it with style
Doing it with style
As promised the second version of my multi-page photo gallery
This one differs from the first in that the large images are displayed within the boundary of the drop down page rather than opening the image in a new window.
Just hover over the tabs to display a page of images. Hover over each image to see a 2x image and finally click the 2x image to show the 640 x 480 pixel version.
To close the large image just click anywhere off the image. An area has been provided at the bottom right of the drop down page if you want to keep the image set on the screen.
Note that I have left out any alt/title text, but this can be added to the large image if required. Adding to the smaller images can cause unexpected results as when the mouse goes over an alt/title text the :hover is lost and the window will close.
Because this one uses the :active/:focus state of the links then it will have a problem in Opera and Safari. These browsers require the mouse click to be held to retain the large image on the screen. Releasing the mouse click will reset the image to its 2x size. The latest Beta version of Opera has changed all this and it now acts the same as Firefox and IE.
With this photo gallery I have gone about as far as I can with my latest developments in css. It uses :hover, :active, :focus, two stages of enlargement, cross-browser drop down and finally my method of removing the :active borders in Internet Explorer.
Hope you think the effort was worth it ;o)
And a big thank you to the photographers at Stock.xchng for providing the photographs used in this demonstration.
Download lightbox2.zip. The source code with the stylesheet in the head. You will, however, need to supply your own photographs.
Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.
Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.
