jQuery demo -- interactive photo gallery:

Please note: This demo is meant to be done AFTER having gone through the second jQuery lecture "jQuery Part 2".

The only new concept will be the use of an effect called fadeTo -- that lets you set the opacity of an object. The fadeTo has two parameters -- the length of the animation, and the end opacity. so fadeTo(1000,0.5) would fade the element to 50% opacity over one second... fadeTo(0,1.0) would instantly set the opacity to 100% (over 0ms = instantly).

First off, load up the start file photogallery_start.html. Note the page has the images hard-coded in the html.

• On start use fadeTo to set the opacity of all #thumb objects to 0.5 opacity over 0 seconds.
• Bind to all .thumb objects a mouseover event that instantly sets the opacity of just THAT objct to 1.0 (usng fadeTo).
• Bind to all .thumb objects a mouseout event that instantly sets the opacity of THAT object (back) to 0.5.. you could also just reset the opacity of all #thumb objects to 0.5
• Bind to the #thumb2 object the following:
1. Hide #mainphoto
2. Set the .attr "src" of #mainphoto to "http://iyawebdev.com/acad275/lecture_examples/photogallery/child.jpg"
3. fadeIn #mainphoto
4. Set the .html of the #caption object (a div) to text or html that is a caption for that photo -- such as "<strong>Stephen Child</strong>, <em>Lecturer</em>"

At this point you should have a page that when it loads shows all thumbnails at 50% opacity, when you mouse over a thumb it changes to 100% opacity, and when you mouse out goes back to 50%. And when you click on the second thumb it hides the main photo, sets it to that image, then fades the main photo back in... and changes the caption. To see the page at this step you can load photos2html

At this point if you wanted to complete the project you would just add similar bind blocks to thumbs 1, 3, 4 and 5, changing their respective src and captions.