CSS Lightbox (With Back/Forward Buttons) Tutorial
I am a CSS God! Quite frankly, I was a surprised I was able to get all this functionality with CSS alone. Much less get them to work cross browser like they do. Currently, each demo is setup to popup an image. You can very easily change that to popup anything you want (text, iframe, movie, etc). If your a CSS newbie (or anywhere in between) I would suggest Googling a jQuery Lighbox or simliar instead. The CSS behind these is pretty complicated. The first set of the three demos is using :focus (:active for IE6/7) as the main work-horse. The second set of the three demos is using :target (JS for IE) as the main work-horse. When using :focus, webkit browsers (Safari/Chrome) need a helping hand with a little JS. When using :target IE needs the helping hand with a little JS.
:focus
Lightbox Demo 1 shows how to set it up when inline with text (JS help for Safari/Chrome).
Lightbox Demo 2 shows how to set it up as a photo gallery (JS help for Safari/Chrome).
Lightbox Demo 3 shows how to set it up as a photo gallery and with a Next Button (JS help for Safari/Chrome/IE8).
:target
Lightbox Demo 1 shows how to set it up when inline with text (JS help for IE).
Lightbox Demo 2 shows how to set it up as a photo gallery (JS help for IE).
Lightbox Demo 3 shows how to set it up as a photo gallery with Next and Previous Buttons (JS help for IE).
