PhillyHistory.org’s homepage will be getting a face lift soon, and I’ve turned to Ext.js and their built-in effects library to do some image sliding. The first thing I learned from the documentation was that the Fx methods applied to anything that was could also be an Ext.Element. Neat! Now to find some examples…. no examples? What about forum entries… hm.. very few and with little information I could use. Let’s try a general web search… again, little I could use. There doesn’t seem to be much written about this useful little corner of Ext.js.

After a few hours of poking, pulling, swapping and switching, I finally had a bit of code that does what I want: take a few photos and slide them into view one at a time, leaving the previous photo visible as a background while the next slides in. While creating this concise bit of magic, I wound up only using one of the methods that Ext.Fx provides: the slideIn method. Here it is:

<myDiv>.syncFx().slideIn(’l', {duration:.5});

The slideIn method’s attributes couldn’t be simpler: l is for left, so the slide starts on the left;  duration is how long it takes to slide, in seconds. The background for the sliding-in image is white by default, or whatever the background of your element is set to. I wanted the previous photo to look like it was sticking around while the next was sliding in, so my first instinct was to dynamically set the background image before sliding. This would have worked fine, except that my images are being re-sized to fit into a static-sized div. Backgrounds don’t re-size like a nested image will, so I created a background image in the same div, set the z-index so that it’s lower than the div I’m sliding and dynamically set that instead. Success! I now have a sliding image that looks like the next image slides over the previous one.

Here’s a bit of psudeocode with the important bits to get you started:

<div id=”RotationWrapper”>
<img id=”Background”  style=”z-index:-1;position:absolute;height:200px;width:400px;”/>
<img id=”Foreground” style=”height:200px;width:400px;” src=”first image”/>
</div>

<script>
setInterval(function() {
Background.src = Foreground.src;
Foreground.src = <new image>
Foreground.syncFx().slideIn(’l', {duration:.5});
}, 5000)
</script>

One bit of oddness to keep in mind though. You have to set the sliding div’s new image BEFORE you slide it, otherwise the same image will slide in, then blink to the new image when it’s done. I don’t know why the image switch waits till after the slide even though I did it first, but it does. Happy coding!