Slideshow Image 1 Slideshow Image 2 Slideshow Image 3 Slideshow Image 4 Slideshow Image 5
Jquery Slide show
<div id="slideshow">
<img src="jqueryslideshow/image1.jpg" class="active" alt="Slideshow Image 1" />
<img src="jqueryslideshow/image2.jpg" alt="Slideshow Image 2" />
<img src="jqueryslideshow/image3.jpg" alt="Slideshow Image 3" />
<img src="jqueryslideshow/image4.jpg" alt="Slideshow Image 4" />
<img src="jqueryslideshow/image5.jpg" alt="Slideshow Image 5" />
</div>
Paste this code into the body HTML. Keep the box open for step 4
Paste this code into the header html Tab of the HTML Box that you just worked with above
Download this file and unzip it. Then put it in your root directory
jquery-1.2.6.min.js
HTML box is 525x350
Back to Progrower.coffeecup.com
Round up all your images and put them in a folder on your pc so you can find them easily with VSD. Name your images in order so it's easy to add them to the code if you need more.
Example image1.jpg image2.jpg image3.jpg image4.jpg image5.jpg
Place a HTML box into the page that you would like the slide show and make it the size of your images.
Step 1. VSD - "Add Files" - Click on "Root" - Click "Add Files" It's the white paper icon with the green + on it at the bottom. Browse to the jquery.js file that you downloaded and unzipped.
Step 3. VSD - "Add Files" - Click on "Root" - Click on "Add a Folder" - Name your folder jqueryslideshow - Click on the new folder then click "Add Files" It's the white paper icon with the green + on it at the bottom. Browse to your images that you just renamed that you would like to include in the slide show and select them all.
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">

function slideSwitch() {

var $active = $('#slideshow img.active');

if ( $active.length == 0 ) $active = $('#slideshow img:last');

// use this to pull the images in the order they appear in the markup

var $next = $active.next().length ? $active.next()

: $('#slideshow img:first');

// uncomment the 3 lines below to pull the images in random order

// var $sibs = $active.siblings();

// var rndNum = Math.floor(Math.random() * $sibs.length );

// var $next = $( $sibs[ rndNum ] );

$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 2000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});

</script>

<style type="text/css">

/* set the width and height to match your images */

#slideshow {
position:relative;
height:350px;
}

#slideshow img {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}

#slideshow img.active {
z-index:10;
opacity:1.0;
}

#slideshow img.last-active {
z-index:9;
}
</style>