Help with looping through multiple slideshows and looping through one slideshow when hovering
Hi,
Firstly, I am a newbie to this forum and jquery, so I apologise if this is not the correct forum to ask my question.
I am currently developing a website where the client wants the following:
1. Transition through 9 images when nothing is happening
2. Transition among 3 images when hovering over a specific area of the screen.
I've created 3 divs and created a slideshow for each, this allows me to only display a slideshow when hovering over a button.
I've managed to get the hovering image effect working, but I am stuck on how to cycle through each of the slideshows in sequence when not hovering over a specific area.
To make it more complex (in my mind anyway). When the client hovers over a different screen area, the current slideshow needs to be reset and the new slideshow neds to activate. If no areas are being hovered it needs to then revert back to the slideshow loop sequence.
So, my question. How can I loop through the multiple slideshows showing each slideshow sequence once when not hovering over specific screen areas
You can see an example of the 3 slidshows working when hovering here (Hover over weddings, special events and memorial buttons):
http://www.virtuallytherelive.com/index2.html
The image sequence I am trying to loop through will be:
Weddings Slideshow
Special Events Slideshow
Memorial Services Slideshow
Here is the code (Sorry, I am new to jquery, so it is most likely a mess)
Jquery
$(document).ready(function(){
// var playSlideshow = setInterval( "slideSwitch()", 5000 );
$("#slideshow").hover(
function() {
playSlideshow = setInterval( "slideSwitch()", 2000 );
slideSwitch();
},
function() {
slideSwitch(0);
clearInterval(playSlideshow);
});
$("#slideshow1").hover(
function() {
playSlideshow1 = setInterval( "slideSwitch1()", 2000 );
slideSwitch1();
},
function() {
slideSwitch1(0);
clearInterval(playSlideshow1);
});
$("#slideshow2").hover(
function() {
playSlideshow2 = setInterval( "slideSwitch2()", 2000 );
slideSwitch2();
},
function() {
slideSwitch2(0);
clearInterval(playSlideshow2);
});
});
function slideSwitch( slideTo ) {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
$active.addClass('last-active');
// added “slideTo” variable to allow transition to a selected slide
// defaults to null, but if it’s >= 0, it will use this index for “$next”
var slideTo = ( slideTo+1 )? slideTo : null;
if ( slideTo != null ) $next = $('#slideshow IMG').eq(slideTo);
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
function slideSwitch1( slideTo ) {
var $active = $('#slideshow1 IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow1 IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow1 IMG:first');
$active.addClass('last-active');
// added “slideTo” variable to allow transition to a selected slide
// defaults to null, but if it’s >= 0, it will use this index for “$next”
var slideTo = ( slideTo+1 )? slideTo : null;
if ( slideTo != null ) $next = $('#slideshow1 IMG').eq(slideTo);
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
function slideSwitch2( slideTo ) {
var $active = $('#slideshow2 IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow2 IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow2 IMG:first');
$active.addClass('last-active');
// added “slideTo” variable to allow transition to a selected slide
// defaults to null, but if it’s >= 0, it will use this index for “$next”
var slideTo = ( slideTo+1 )? slideTo : null;
if ( slideTo != null ) $next = $('#slideshow2 IMG').eq(slideTo);
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
HTML
<div id="wrapper">
<div id="header"><img src="images/headerlogo.gif" id="headerlogo" alt="" width="227" height="47" /></div>
<div id="page">
<div id="slideshow">
<img src="images/wedding1.gif" alt="" class="active" />
<img src="images/wedding2.gif" alt="" />
<img src="images/wedding3.gif" alt="" />
<img src="images/wedding4.gif" alt="" />
</div>
<div id="slideshow1">
<img src="image/g/specialevents1.jpg" alt="" class="active" />
<img src="image/specialevents2.jpg" alt="" />
<img src="image/specialevents3.jpg" alt="" />
<img src="image/specialevents4.jpg" alt="" />
</div>
<div id="slideshow2">
<img src="images/memorial1.gif" alt="" class="active" />
<img src="images/memorial2.gif" alt="" />
<img src="images/memorial3.gif" alt="" />
<img src="images/memorial4.gif" alt="" />
</div>
<a href="#"><img src="images/weddingbtn.gif" id="weddingbtn" alt="" width="175" height="65" /></a>
<img src="images/loginbtn.gif" id="loginbtn" alt="" width="175" height="65" />
<img src="images/specialbtn.gif" id="specialbtn" alt="" width="175" height="65" />
<img src="images/memorialbtn.gif" id="memorialbtn" alt="" width="175" height="65" />
<img src="images/motto.gif" id="motto" alt="" width="505" height="97" />
<img src="image/footerlinks.gif" id="footerlinks" alt="" width="626" height="14" />
<div id="content">
</div>
</div>
<div id="footer">
<div id="footerlinks">
<a href="#">ABOUT US</a>
*
<a href="#">CONTACT US</a>
*
<a href="#">FAQ</a>
*
<a href="#">PRIVACY POLICY</a>
*
<a href="#">TERMS OF SERVICE</a>
*
<a href="#">SITE MAP</a>
</div>
<div id="notice">Copyright © 2010 - All Rights Reserved</div>
<div id="design"><a href="http://www.topecovers.com">Design by TopEcovers.com</a></div>
</div>
</DIV>
Any help you can give me would be greatly appreciated.
Kind Regards
Bernie