Hello,
I have created my version of a jquery slide show based on the following tutorial, http://designm.ag/tutorials/image-rotator-css-jquery/" rel="nofollow - http://designm.ag/tutorials/image-rotator-css-jquery/ . This tutorial is the best example I've seen. One feature that this tutorial doesn't has is an automatic rotating feature. I provide the code below. If anyone knows how I can implement an automatic rotating feature, I will be gladly appreciated.
<script type="text/javascript">
$(document).ready(function() {
//Click and Hover events for thumbnail list
$(".image_thumb ul li:first").addClass('active');
//$(".image_thumb ul li").click(function(){
$(".image_thumb ul li").hover(function(){
//Set Variables
var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
var imgURL = $(this).find('a').attr("href"); //Get Main Image URL
var imgPath = $(this).find('a').attr("rel"); //Get Main Image path
var imgDesc = $(this).find('.block').html(); //Get HTML of block
if ($(this).is(".active")) { //If it's already active, then...
return false; // Don't click through
} else {
$(".main_image a").attr({href: imgURL}); // sets href value for main images
$(".main_image img").attr({ src: imgPath , alt: imgAlt}); // swap images based on one user currently hovering.
}
$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
$(this).addClass('active'); //add class of 'active' on this list only
return false;
}) .hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
});//Close Function
</script>
An example of this can be found at http://www.ecoactionteams.ca/pub/image_rotator/index.html" rel="nofollow - http://www.ecoactionteams.ca/pub/image_rotator/index.html
rpcorr
|