cycle plugin... is this right way to code a simple fade-in fade-out looping slide show?
Hello,
I set up a simple fade using jquery and cycle (I named the cycle library "cyclefadeonly.js". It's the uncompressed simple version from the cycle website).
The slides are working, but I'm not sure if that's by luck (this stuff is about 10-20% past my current understanding capabilities).
My strategy was this:
1) load the jquery and cycle libraries into the head block.
2) set up a tag id: #airplane
3) set up a jquery .ready function
4) attach the cycle fade function to #airplane (with the parameters, rather than an "automatic" version).
5) create a CSS tag also named #airplane (to be consistent)
6) set up a div named #airplane in the body block
7) load the images into this body block (with optional sizing parameters for the images)
That was my idea. So I was wondering if someone could tell me if I got the main idea right, and also the specifics right (like the detailed bits of code that I might not have as good as they should be). The cycle plugin runs wicked smooth, so I want to make sure I got this right. Here's the main code blocks of what I did:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cyclefadeonly.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#airplane').cycle({fx: 'fade', timeout: 6000, speed: 4000, delay: -2000});});
</script>
</head>
<body>
<div id="airplane">
<div><img src="practiceimage1.jpg" width="400" height="300"></div>
<div><img src="practiceimage2.jpg" width="400" height="300"></div>
<div><img src="practiceimage3.jpg" width="400" height="300"></div>
<div><img src="practiceimage4.jpg" width="400" height="300"></div>
</div>
</body>