Write an animated photo gallery using Scriptaculous. Start with the skeleton
HTML and
CSS. Click the image to run our sample solution:
(solution JS code gallery.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...
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.
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.
tag
and constraint
.
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.
mainimage
is updated,
make it have two effects in a row, such as highlighting and then shaking.
You can view the solution javascript here.