Manual rotation via external pager elements?
tom-a-spol-sro - May 4, 2009 - 08:23
| Project: | Rotor Banner |
| Version: | 6.x-2.x-dev |
| Component: | Code |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Jump to:
Description
Hello, I'd like to ask a little question...
Am I somehow able to add 2 arrows (just outside the Rotator block), that would make the rotator to switch to 'next' or 'previous' item?
Arrows are images inside the tag.
Thanks a lot for replies,
Tomas.
#1
ummm, sorry I didn't expect that the form will parse the "a" tag into link :)
#2
This is really outside the scope or rotor.module. If you want to do this, you will need to write some JavaScript of your own. Rotor is powered by jQuery.cycle... The examples on this page should show you what you need to do: http://malsup.com/jquery/cycle/int2.html
#3
okay, I solved it myself, thanks to the link mrfelton provided.
For those who would want to do the same, it's really easy.
In the page, you have two arrows:
<a href="#" id="example_prev">PREVIOUS</a><a href="#" id="example_next">NEXT</a>
and when you open the rotor.js file, you change the code from:
$('div.rotor-items', $rotor).cycle({timeout: settings.time * 1000,
speed: settings.speed,
fx: settings.effect,
pause: settings.pause,
pager: $('div.rotor-tabs', $rotor),
pagerAnchorBuilder: function(idx, slide){
return $('div.rotor-tabs .rotor-tab:eq(' + idx + ')', $rotor);
}
});
to:
$('div.rotor-items', $rotor).cycle({timeout: settings.time * 1000,
speed: settings.speed,
fx: settings.effect,
next: '#example_next',
prev: '#example_prev',
pause: settings.pause,
pager: $('div.rotor-tabs', $rotor),
pagerAnchorBuilder: function(idx, slide){
return $('div.rotor-tabs .rotor-tab:eq(' + idx + ')', $rotor);
}
});
#4
I'm upgrading this ticket into a feature request. I think it would be fairly simple to provide a means of specifying the css selector used to select DOM elements to be used as previous/next buttons.