Doing it with style
Click the above images for a 'Lightbox' type image popup.
Does not use :target so there is no problem with using the browsers 'back' button
and has a means of selecting the previous and next large image without
the need to close the large image and select from the thumbnails.
Photographs taken with the Panasonic Lumix TZ19 compact digital camera with 16x zoom lens.
This is the oneBox recoded and styled for html5 and makes use of the avalability of 'tabindex' and :focus on any element. In this case I have removed the need for links around the thumbnail images and have coded and styled the thumbnails only to show how this can be done.
So the thumbnails are just images and the large images and associated text are held in the stylesheet and added to the html code using content::before and content::after. This also means that the large images are not loaded until required.
The tabbing works in all the browsers but IE does not allow tabbing from a selected image.
All the photographs used in this demo are my own.
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.