I'm looking to use Spry's image fade effect to loop through "X" photos. Once
done, the loop would start again.
Using the sample code from Adobe Labs, I can only loop once with only two
images. Can anyone help a non Spry guy?
Sample code...
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="SpryEffects.js" type="text/javascript" ></script>
<style type="text/css">
/* third sample */
..element{
float:left;
position: relative;
width: 350px;
text-align: center;
}
#display{
opacity: 0;
filter: alpha(opacity=0);
}
#animate{
left: -350px;
opacity: 1;
filter: alpha(opacity=100);
}
</style>
</head>
<body onLoad="third_effect.start();">
<div align="center">
<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr><td colspan="3"><img src="images/hnav_all.gif" alt="" width="750"
height="31" border="0"></td></tr>
<tr><td colspan="3"><img src="images/hnav_all_ds.gif" alt="" width="750"
height="5" border="0"></td></tr>
<tr><td colspan="3" bgcolor="C1D1AD"><img src="images/spacer.gif" alt=""
width="750" height="4" border="0"></td></tr>
<tr><td colspan="3">
<div id="display" class="element"><img id="displayimg"
src="images/collage1.jpg" alt="Sample Image"/></div>
<div id="animate" class="element"><img id="animateimg"
src="images/collage2.jpg" alt="Sample Image." /></div>
</td></tr>
<tr><td colspan="3" bgcolor="C1D1AD"><img src="images/spacer.gif" alt=""
width="750" height="4" border="0"></td></tr>
</table>
<script type="text/javascript">
// The Fade effect will fade out the displayed image container
var third_effect = new Spry.Effect.Fade('animate', {duration: 3000,
from: 100, to: 0, toggle: true});
// We prepare an observer that will change the opacity of the
initially
// hidden element in oposition with the initially visible element
var obs = new Object;
// On each effect step we calculate the complementary opacity for
the other image container.
obs.onStep = function(ef){
if (typeof otherEl == 'undefined')
otherEl = document.getElementById('display');
var opacity = 0;
if(/MSIE/.test(navigator.userAgent)){
opacity = Spry.Effect.getStyleProp(ef.element,
'filter').replace(/alpha\(opacity([0-9]{1,3})\)/, '$1');
otherEl.style.filter = "alpha(opacity=" +
parseInt(100 * (1 - opacity), 10) + ")";
}else{
opacity = Spry.Effect.getStyleProp(ef.element,
'opacity');
otherEl.style.opacity = (1 - opacity);
}
};
// Attach the observer to the Fade effect
third_effect.addObserver(obs);
</script>
</div>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Check out the new features and enhancements in the
latest product release - download the "What's New PDF" now
http://download.macromedia.com/pub/labs/coldfusion/cf8_beta_whatsnew_052907.pdf
Archive:
http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:286609
Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm
Unsubscribe:
http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4
