jQuery цикъл на пауза при задържане на курсора на мишката върху следващ/предишен

Нов съм в цикъла на jquery, така че се извинявам предварително, ако това е просто тъп въпрос. Настроих слайдшоу на моя сайт и всичко работи добре. Въпреки това... моето слайдшоу е настроено да спира на пауза, когато задържа курсора на мишката над изображението, когато това, което наистина искам, е да поставя на пауза, когато задържа курсора на мишката върху бутоните „следващ“ или „предишен“. Предполагам, че е много основно, но търсих навсякъде и не мога да намеря отговора.

Ето кода, който използвам в момента:

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>

Свързан HTML:

<div id="s2" class="pics">
<a href="/bgcoral_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="/bg#"><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="/bg#"><img src="nextbttn.jpg" width="30" height="30" alt="next" /></a></div>

И свързаният 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;
}

Всяка помощ, която някой може да предостави, ще бъде оценена повече, отколкото можете да си представите. Знам, че това вероятно е лесно да се направи, но честно казано изчерпах ресурсите си (и около 15 страници с резултати в Google!). Благодаря предварително за всяка помощ, която можете да предложите.

Тереза

ДОБАВЕНО НА 1/13:

Ревизирах кода си, както е отбелязано по-долу, но все още не работи (jsfiddle по-долу работи перфектно, точно това, което търся, но дори и с директно копиране/поставяне не работи от моя страна). Нещо очевидно, сигурен съм, но трудно. Ето моят преработен js код и съответната информация в моя хедър (html и css са останали същите):

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