Fancybox Photo Gallery Tutorial
Fancybox Photo Gallery Demo 1 shows what's possible! It's a beautiful jQuery/Fancybox 1.3 Photo Gallery that not only degrades gracefully with JS Off, but rather, degrades into a beautiful CSS hover Gallery. The Coolness... With JS On, you can scroll through images via the right or left arrows, or via the mouse scroll wheel. Give each image a unique description (via the title attribute) and each image gets a current number (e.g. image 1 of 9). When opening/closing Fancybox, it fades out-of/back-into into the Gallery (regardless of image). With JS Off, degrades into CSS Photo Gallery, AND, changes nothing about your website layout. No extra "thumbnail" images required (CSS creates the thumbnail images). Tabbing through the Gallery works perfect. And finally, or, you can click on the thumbnails to navigate to the actual image path.
Fancybox Photo Gallery Demo 2 shows how "simple" it can be! However, in doing so, there is no graceful degradation with JS Off. The Coolness... As with demo 1, the Gallery's "fade in/out to the same location effect" is done by positioning all the images absolutely into the same place and giving them all the same height/width.
Fancybox Photo Gallery Demo 3 shows another variation of just how simple it can be! With JS Off, it gracefully degrades into a Plain-Jane HTML Gallery (clicking takes you to the images URL). The Coolness... Hey, it's Fancybox, isn't that cool enough?!
