I am attempting to do the same as ILAVISH above and have completed all the steps as per the above but the images appear in a line down the page.
It would appear that the cycle function is not starting, yet i have no errors being generated.
EDIT: I have hidden the other images using overflow:hidden in the css file but still can not get it to start?
Here is my code for reference.
From home.tpl
HTML Code:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://127.0.0.1/xcart/promos/scripts/jquery.cycle.all.min.js"></script>
<script type="text/javascript">
{literal}
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade'
});
});
{/literal}
</script>
</head>
and from welcome.tpl
HTML Code:
<div class="slideshow">
<img src="http://127.0.0.1/xcart/promos/images/LandingA.jpg" width="500" height="334" class="first" />
<img src="http://127.0.0.1/xcart/promos/images/LandingB.jpg" width="500" height="334" />
<img src="http://127.0.0.1/xcart/promos/images/LandingA.jpg" width="500" height="334" />
<img src="http://127.0.0.1/xcart/promos/images/LandingB.jpg" width="500" height="334" />
</div>
Any suggestions would be appreciated.