CSSPLAY

CSS DEMOS › 'oneBox' - CSSplay - LightBox

Date : 27th May 2011

For all modern browsers

Information

Taking the 'cssplayBox' a step further to reduce the amount of code and transfer the 'content' of the lightbox to the stylesheet, I present the 'oneBox', so called because the large image and associated text are all entered into just one piece of code using the :before and :after pseudo classes and the content: style.

If you examine the code you will just see the thumbnail images followed by an empty 'oneBox' code. So no large images and no associated text. Click a thumbnail image to add the 'content' of that image into the 'oneBox' code and display the information in a normal lightbox. Click the cross in the top right of the lightbox image (or anywhere else) to close the lightbox.

Once the large image is displayed you can 'tab' forwards and backwards through the images by pressing the 'Tab' key (forwards) and 'Shift+Tab' keys (backwards).

Another benefit of this method is that the large images are not loaded with the page or as background images in the stylesheet so making for faster page loading times.

Firefox 4, Opera, Safari and Chrome have a fade in of the large image.

All the photographs used in this demo are my own.

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.