jQuery cycle pause on hover over next/prev

Question

I'm new to jquery cycle, so my apologies in advance if this is simply a dumb question. I've set up a slideshow on my site and everything is working fine. However... my slideshow is set to pause when hovering over the image, when what I really want is to pause when hovering over the 'next' or 'prev' buttons. I'm guessing it's very basic, but I've searched all over and can't find the answer.

Here is the code I'm currently using:

jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$(function() {
$('#s2').cycle({ 
fx: 'fade', 
speed: 800,
timeout: 4000, 
next: '#next2', 
prev: '#prev2',
after: onAfter,
fastOnEvent: true,
pause: 1 
});
});
function onAfter(curr,next,opts) {
var caption = 'Photo ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
$('#caption').html(caption);
}
</script>

Related HTML:

<div id="s2" class="pics">
<a href="coral_natural_stone_1lg.jpg"><img src="coral_natural_stone_1.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" /></a>
<img src="coral_natural_stone_2.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" />
<img src="coral_natural_stone_3.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" />
<img src="coral_natural_stone_4.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" />
<img src="coral_natural_stone_5.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" />
<img src="coral_natural_stone_6.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" />
<img src="coral_natural_stone_7.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" />
</div>

<p id="caption"></p>

<div class="nav"><a id="prev2" href="#"><img src="prevbttn.jpg" width="30" height="30" alt="previous" /></a><img src="spacer.gif" width="10" height="10" alt="spacer" /><a id="next2" href="#"><img src="nextbttn.jpg" width="30" height="30" alt="next" /></a></div>

And the related CSS:

.pics {  
width:   1000px;  
height:  450px;  
padding: 0;  
margin:  0;  
} 

.pics img {  
padding: 0px;  
border:  none;  
background-color: #ffffff;  
height:  450px;  
width:   1000px;  
top:  0; 
left: 0;
}

#caption {
font-family: Arial, Helvetica, sans-serif;
font-size: 75%;
color:#2769b5;
}

Any help anyone could provide will be more appreciated than you can imagine. I know this is probably a simple thing to do, but I honestly have exhausted my resources (and about 15 pages worth of google results!). Thanks in advance for any help you can offer.

Teresa

ADDED ON 1/13:

Revised my code as noted below, but still not working (the jsfiddle below works perfectly, exactly what I'm looking for, but even with straight copy/paste not working on my end). Something obvious, I'm sure, but struggling. Here is my revised js code and relevant info in my header (html and css have remained the same):

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$(function() {
$('#s2').cycle({ 
fx: 'fade', 
speed: 800,
timeout: 4000, 
next: '#next2', 
prev: '#prev2',
after: onAfter,
fastOnEvent: true
});
});
function onAfter(curr,next,opts) {
var caption = 'Photo ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
$('#caption').html(caption);
}

$('#next2, #prev2').hover( 
function() { 
    $('#s2').cycle('pause'); 
}, 
function() { 
    $('#s2').cycle('resume'); 
} 
);

</script>

Answer 1

for cycle2 paused on hover you only beed add:

...
data-cycle-pause-on-hover: "#s2",
...

Answer 2

Firstly, remove the pause: 1 from the options -- this is what causes it to pause on image hover. Then:

To pause, you can use:

$('#s2').cycle('pause')

and to resume, you can use:

$('#s2').cycle('resume')

This code should achieve what you're looking to do:

$('#next2, #prev2').hover( 
    function() { 
        $('#s2').cycle('pause'); 
    }, 
    function() { 
        $('#s2').cycle('resume'); 
    } 
);