jQuery Cycle - Changing slides on rollover
I have a page displaying a portfolio of logos, print pubs, websites, etc. When the page originally loads, all items are included in the slideshow. I would like only logo images displaying when the user places the mouse on the logos link.
Example here:
http://estland.estlandpreview.com/
The jQuery call below works (i.e. the range of the images is limited to only those with class logos) if the menu link to "logos" gets a mouseenter event while the slideshow is showing one of the logo images (class="logos"). However, if the slideshow has progressed to one of the other sections (class="print", web, sign, etc) then the slideshow will not resume.
Below is the jQuery call when a user places their cursor on the logos menu link.
- $("a.logos").mouseenter(
function () {
$('.slideshow').cycle('stop').cycle({ slideExpr: 'img.logos' });
$('.slideshow').cycle('resume');
}
);
And here is the rest of the code.....
- $(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade',
before: onAfter //change the over state of the menu button
});
function onAfter(curr,next,opts) {
if(opts.currSlide == 0) {
$(".photographyButton").removeClass('photographyButtonOver');
$(".logosButton").addClass('logosButtonOver');
}
if(opts.currSlide == 4) {
$(".logosButton").removeClass('logosButtonOver');
$(".printButton").addClass('printButtonOver');
}
if(opts.currSlide == 8) {
$(".printButton").removeClass('printButtonOver');
$(".webButton").addClass('webButtonOver');
}
if(opts.currSlide == 12) {
$(".webButton").removeClass('webButtonOver');
$(".signsButton").addClass('signsButtonOver');
}
if(opts.currSlide == 15) {
$(".signsButton").removeClass('signsButtonOver');
$(".photographyButton").addClass('photographyButtonOver');
}
}
});
- <div class="slideshowContainer">
<div id="slideAll" class="slideshow">
<img class="logos" src="../images/billboard/logos_billboard_1.jpg" />
<img class="logos" src="../images/billboard/logos_billboard_2.jpg" />
<img class="logos" src="../images/billboard/logos_billboard_3.jpg" />
<img class="logos" src="../images/billboard/logos_billboard_4.jpg" />
<img class="print" src="../images/billboard/print_billboard_1.jpg" />
<img class="print" src="../images/billboard/print_billboard_2.jpg" />
<img class="print" src="../images/billboard/print_billboard_3.jpg" />
<img class="print" src="../images/billboard/print_billboard_4.jpg" />
<img class="web" src="../images/billboard/web_billboard_1.jpg" />
<img class="web" src="../images/billboard/web_billboard_2.jpg" />
<img class="web" src="../images/billboard/web_billboard_3.jpg" />
<img class="web" src="../images/billboard/web_billboard_4.jpg" />
<img class="sign" src="../images/billboard/sign_billboard_1.jpg" />
<img class="sign" src="../images/billboard/sign_billboard_2.jpg" />
<img class="sign" src="../images/billboard/sign_billboard_3.jpg" />
<img class="photo" src="../images/billboard/photo_billboard_1.jpg" />
<img class="photo" src="../images/billboard/photo_billboard_2.jpg" />
<img class="photo" src="../images/billboard/photo_billboard_3.jpg" />
<img class="photo" src="../images/billboard/photo_billboard_4.jpg" />
<img class="photo" src="../images/billboard/photo_billboard_5.jpg" />
</div>
- </div><!--- Slideshow Container --->