jQuery Cycle - Changing slides on rollover

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.
  1. $("a.logos").mouseenter(
                function () {
                    $('.slideshow').cycle('stop').cycle({ slideExpr: 'img.logos' });
                    $('.slideshow').cycle('resume');
                }
            );




And here is the rest of the code.....
  1. $(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');
            }      
        }
    });
































  2. <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>





















  3. </div><!--- Slideshow Container --->