Web Programming Step by Step
Discussion Section 8: Photo Gallery
Scriptaculous

section idea/code by Sylvia Tashev

Today we will write an animated photo gallery using Scriptaculous. Start with this skeleton:

• pictures.html (complete HTML/CSS code)
• pictures.js (skeleton of JS code)

Click the following image to run our sample solution: (solution JS code pictures.js)

Right now, when you double-click an image, it shows in the large mainimage area. But it's boring! Add Scriptaculous effects such as the following:

1. When the page first loads up, the thumbnail of the current mainimage image (the first one) should scale up to 200% of its normal size, and the mainimage image should have a visual effect, such as shaking.
2. When the user double-clicks a thumbnail to show a new image, the same effects as just described should occur. The new thumbnail should grow to 200% size, and the mainimage image should shake as it changes. Also the old selected thumbnail should shrink back to its previous size. Note that if you double-click on the same thumbnail twice in a row, it shouldn't break.
3. When the previous/next, left/right arrows are clicked, the corresponding previous or next image should be placed into the large area. It should be as though the user double-clicked on the previous or next thumbnail, complete with the same effects.

   Note that you can easily access neighbors of an element using Prototype's previous and next methods.

4. Make the list of images so that its order can be rearranged by dragging the images left and right. See the Scriptaculous wiki page for ideas and options such as tag and constraint.
5. Make it so that when the user drags a thumbnail image to the mainimage area, the large image will update. (This is the same behavior as when the thumbnail is double-clicked. See the Scriptaculous Wiki pages about dragging and dropping.
6. If you finish the previous effects, add other bling to the page. For example, when the images are rearranged by dragging them to sort them, make effects occur on the affected thumbnails. Or add sequences of effects that occur on the same element; for example, when the large mainimage is updated, make it have two effects in a row, such as highlighting and then shaking.

References: Scriptaculous wiki, JSLint