The method I have uses for this image morph is really incredibly simple.
- Find the images in your chosen directory using php
- 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
- 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!
UPDATE: the download link doesn't work but the demo page does, so please just view the source on that page.