Using .keydown with the .cycle plugin
Is this possible?
I've tried using:
- $(document).ready(function() {
$('#slideshow').cycle({
fx: 'fade',
speed: 1000,
timeout: 0,
next: '.next',
prev: '.prev',
after: onAfter,
pager: '#nav',
pagerAnchorBuilder: function(idx, slide) {
return '#nav li:eq(' + (idx) + ') a';
}
});
And than:
- function onAfter(curr,next,opts) {
- var currentis = opts.currSlide + 1;
- var previs = opts.currSlide - 1;
- var nextis = opts.currSlide + 1;
- $(document).keydown(function(e){
switch(e.keyCode){
case 37:
if (currentis != '1') {
$('#nav li:eq('+previs+') a').triggerHandler('click');
} else {
$('');
};
break;
case 39:
if (currentis != totalcount) {
$('#nav li:eq('+nextis+') a').triggerHandler('click');
};
break;
}
});
than in the html:
- <ul id="nav">
<li><a href="#"><img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="50" height="50" /></a></li>
<li><a href="#"><img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="50" height="50" /></a></li>
<li><a href="#"><img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="50" height="50" /></a></li>
</ul>
<div style="padding:20px">
<div id="slideshow">
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" alt="asd" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="400" height="200" alt="asd2" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" alt="asd3" />
</div>
It changes the slide, but with no effect or while jumping to another slide and only doing the transition to the target slide.
Thanks!