Creating a morphing image using the scriptaculous javascript libraries is really pretty straightforward. I was chewing over which libraries of special effects I should use first, browsing round mochikit and scriptaculous when I found this page and it cinched the deal - sorry mochikit, next time.
The method I have uses for this image morph is really incredibly simple.
- Find the images in your chosen directory using php
- Cycle through those images and preload them using javascript
- Load the first image into a visible table cell (could be div or whatever) on the page
- Load the second image into a div inside the table cell which is hidden
- Use scriptaculous to fade in the hidden image
- Use javascript to change the image in the table cell to the one that has been faded to
- Load the next image into the inner div (which is now hidden again)
- Repeat the process using setTimeout() and an old favourite - recursion
So, thats it! I have not yet gone to the effort of making the script nice and self containing, but it works a treat and its pretty simple to get your head round.
One thing I noticed while creating this morph was that having a table cell which had no content and no set width or height is not standards compliant, and in fact the whole system broke with certain DOCTYPES. That of course has been fixed because not everybody likes to work in quirks mode, but just something to keep in mind as knowing that would have saved me a headache haha.
Download to get morphing!
As you can see from the script I used a php function to generate a javascript array from communitymx.com, jolly useful and easy to follow, so, props communitymx.com. And props of course to Scriptaculous. I have bundled the scriptaculous library that I used with the script, no idea if that is illegal or what so...enjoy while you can. Otherwise, it is very easy to download scriptaculous and use the libraries yourself.
UPDATE: the download link doesn't work but the demo page does, so please just view the source on that page.