In DW, go to File > New > JavaScript page.
Copy & Paste the Cycle code into your new .js page. Save it as jQuery-cycle-all.js in your Scripts folder.
Add a link in the top of your HTML document to the newly created .js file.
Insert > Script > Script > browse to the folder & file location. Hit OK.
It should look something like this:
<script type="text/javascript" src="Scripts/jQuery-cycle-all.js"></script>
Also add a link to the jQuery core library like this:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>
Next, add this to the <body> of your page where you want the slideshow to appear.
<div id="slideshow">
<div>
<h3>This is slide one</h3>
<p> “Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis.” </p> </div>
<div>
<h3>This is slide two</h3>
<p> “Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. ” </p> </div>
<div>
<h3>This is slide three</h3>
<p>“Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim.”</p> </div>
<div>
<h3>This is slide four</h3>
<p>“Vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. ”</p> </div>
</div>
Finally, add this function code just before the closing </body> tag.
<script type="text/javascript">
$(document).ready(function() {
$('#slideshow').cycle({
fx: 'fade',
speed: 500 //speed in miliseconds
});
});
</script>
Save and preview in browsers.
Nancy O.
