Dreamweaver Tutorial: Multiple Automatic Fading Slideshows
Monkeys, The Hash Key and Functions:
In a previous post I went through how to create an Automatic Fading Slideshow. This works really nicely on a site when trying to show off multiple images in a small space; however, as this jQuery gives the #slideshow a fixed width and height, if you are wishing to implement more than one slideshow on the same webpage of a different height/width, problems will occur.
For the following, I’ll be using the Monkey Around page from my website as the example, see link.
As I outlined in my previous post, for the jQuery Automatic Fading Slideshow to work, you need to reference jQuery itself within the <head> tags of your site, and some code that I’ve managed to find through DaBrook. This is done through <script> tags:
<script src=”http://code.jquery.com/jquery-1.5.min.js”></script>
<script src=”http://cdn.wideskyhosting.com/js/jquery.cycle.js”></script>
Following this is the .ready and .cycle functions of the slideshow, just like last time. However, this time you will need to copy and paste the code as many times as you wish to have Automatic Fading Slideshows on your site - I needed four for myself:
<script>
$(“document”).ready(function(){
$(“#slideshow1”).cycle()});
</script>
<script>
$(“document”).ready(function(){
$(“#slideshow2”).cycle()});
</script>
<script>
$(“document”).ready(function(){
$(“#slideshow3”).cycle()});
</script>
<script>
$(“document”).ready(function(){
$(“#slideshow4”).cycle()});
</script>
Notice that every different function has a different #slideshow number (e.g. #slideshow1, #slideshow2 etc.), this is important as it relates to every slideshow on the site. Just after writing the functions of the slideshows, you must designate their width and height, still in the <head> tags:
<style>
#slideshow1{width:408.269px; height:568px;}
#slideshow2{width:385px; height:568px;}
#slideshow3{width:408.269px; height:568px;}
#slideshow4{width:385px; height:568px;}
</style>
What’s next is inserting your images into your slideshow. As each slideshow was named differently, you must make sure that you reference the correct slideshow in the correct place. From here it is a case of inserting a <div> with the characteristics of the appropriate #slideshow - and then filling it with the images (that must all be a uniform size, the size that you gave your slideshow):
<div id=”slideshow1”>
<img src=”images/monkeyss1_1.gif” alt=”Glasses Monkey Stage 1” />
<img src=”images/monkeyss1_2.gif” alt=”Glasses Monkey Stage 2” />
<img src=”images/monkeyss1_3.jpg” alt=”Glasses Monkey Stage 3” />
</div>
This was a helpful learning curve for me, and I realised that coding is really down to logic, and once you gather a broader understanding of symbols and terminology, it is easier to alter and produce HTML effectively.
