The Photo Gallery Tutorial
One day I went Googling... All I needed was a simple Photo Gallery with a clean user interface for one of my websites... but I couldn't find one... So, I built one! No shadow boxes, thumbnails, captions, or overcomplicated navigation controls. Just simple, and to the point! This thing is clean, and extremely easy to work with.
A little explanation... In the demo, I use "css sprites" to give the hover and push button effect to the navigation (i.e. #controls a). I use href="javascript:;" to safeguard against the browser launching you to the top of the window when you click it. And I use onclick="this.blur();" to kill IE's a:active bug. There is a <noscript> tag in there, so it tells the user to turn on JS (if need be) in order to view the gallery. I didn't wrap the img's/anchor's in ul's/li's, because to me it added no benefit, only extra code. Also, I wanted to use .png's Dammit! So I just feed IE6 some expressions to fix the #controls. I tried just giving IE6 some solid color .gifs instead, but I was getting too much of a flicker when the images changed (IE6 bug). As an added benefit, IE expressions prevent background image manipulation, which simply means no IE6 flicker.
Implementation/Download...
Aside from the Photo Gallery page itself, you need FOUR files to make this work. Link to all of them in the head section as I have in the demo above.
gallery.css
iegallery.css
jquery.js
gallery.js
"Very Cool! But, I don't want or need all those cosmetic images" you say. OK, here is another version with the same functionality, but striped down and void of the flashy stuff. Again... so, aside from the Basic-Photo Gallery page itself, you need THREE files to make this work. Link to all of them in the head section as I have.
basic-gallery.css
jquery.js
gallery.js
