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.
Profile: Frank has been programming for the web using PHP, Javascript and numerous libraries and frameworks for the past 5 years. More articles.
6 Responses
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.
I would have loved to download to check this out… but the download link seems to be trying to go to another page in the blog! I’ll fire up firebug and go investigate the js source on the demo page. Thanks for the great work!
the download link doesn’t work .. could you please fix it?
Sorry guys, the download link with all the images nicely bundled up doesn’t work, don’t know what I was thinking linking to it there anyway. Best just to look at the source of the demo page I think…
Handy, thank you.
The demo isn’t working as well
is there still a way to get the source code?
Thanks for pointing that out, I think I have located and fixed the download link. Its quite an old script, possibly better approaches to achieving this now days! But for what its worth the link now works.