Jquery Cycle plugin menu hover effect automatic start

Question

I'm trying to create a menu driver slideshow with the Jquery Cycle plugin http://malsup.com/jquery/cycle/ but I can't figure out how to make it work properly. It puts numbers on the nav? I also want it to cycle automatically but stop when the menu item is hovered over.

I want it to work in a similar to this plugin (note I can't use this as it is mootools which conflicts with other jquery) http://www.devthought.com/wp-content/projects/mootools/barackslideshow/Demo/

This is my code I'm implementing

<script type="text/javascript" src="js/jquery.cycle.all.2.72v2.js.gz"></script>   
<script type="text/javascript">
$(function() {
    $('#slideshow').cycle({
        speed:       200,
        timeout:     0,
        pager:      '#nav',
        pagerEvent: 'mouseover',
        activePagerClass: 'activeSlide', // class name used for the active pager element
    });
});
</script>

<div id="nav">
        <a href="#">test1</a>
        <a href="#">test2</a>
        <a href="#">test3</a>
        <a href="#">test4</a>
        <a href="#">test5</a>
        <a href="#">test6</a>
      </div>        
<div id="slideshow"  class="pics">
<a href="#"><img src="images/1.jpg" alt="#" /></a>
<a href="#"><img src="images/2.jpg" alt="#" /></a>
<a href="#"><img src="images/3.jpg" alt="#" /></a>
<a href="#"><img src="images/4.jpg" alt="#" /></a>
<a href="#"><img src="images/5.jpg" alt="#" /></a>
<a href="#"><img src="images/6.jpg" alt="#" /></a>                           
</div>

Thanks For all your help Judith

AbstractChaos · Answer 1 · 2012-06-13T09:36:58.487

Your assumption of the conflict can be handles instead of the $ use jQuery or alternatively you can use your own custom id so jquery could be set to use jq by do this:

var jq=$.noConflict();

This means that you can use both jquery and mootools together and not give you problems.

This plugin you found has the option pause to enable pause on hove see here. so in your case:

$(function() {
    $('#slideshow').cycle({
        speed:       200, //timer removed so it cycles automatically.
        pager:      '#nav',
        pause:      1, //pause on hover
        pagerEvent: 'mouseover',
        after: onAfter,
        activePagerClass: 'activeSlide' //Remove comma here
    });
});

//Use this to add/remove styling to your #navs.
function onAfter() { 
 }

Also it states each child of your container is a slide so in your case your <a> would be a slide i would suggest wrapping it in a div :)

Jquery Cycle plugin menu hover effect automatic start

1 Answers1