I have recently been working a lot with jquery and one of the plug-ins I’ve incorporated is jcarousel. It’s a good plugin for a simple gallery of pictures or static content.
Unfortunately, there are a couple of flaws with external controls or linking to a specific frame. The website does have an example of a very crude gallery with external controls which is seen here below:
There are a couple of problems here – the plugin doesn’t have an option to specify/add an “active” class to the link, so there is no way of telling which frame you are actually looking at without clicking on something. Also, the links have to be numbers bec. the function is being called through initCallback – here is the default code below:
function mycarousel_initCallback(carousel) {
jQuery('.jcarousel-control a').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
jQuery('.jcarousel-scroll select').bind('change', function() {
carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
return false;
});
Now remember we are only modifying the external pager controls (not the next/previous links). Using the default code, you may only link to a particular slide by doing this:
<div class="jcarousel-control"><a href="#">3</a></div> <!-- this links to the 3rd slide -->
To modify the number link as well as add an active class to the active slide . .. here’s my modified code:
function mycarousel_initCallback(carousel) {
jQuery('.jcarousel-control a').bind('click', function() {
var index = $(this).attr("id").split("_");
carousel.scroll(jQuery.jcarousel.intval(index[1]));
//carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
$(".jcarousel-control a").removeClass("active"); //Remove any "active" class
$(this).addClass("active");
return false;
});
jQuery('.jcarousel-scroll select').bind('change', function() {
carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
return false;
});
With my modified code, you may link to any slide through this code:
<span class="jcarousel-control"><a href="#" id="_3">This links to the 3rd slide</a></span> <!-- don't forget the underscore -->
Also, it will add “active” to the class of the active/clicked link.
<a href="#" id="_3" class="active">This links to the 3rd slide</a>
If you know just a little bit of javascript or jquery you would be able to do some more with this as my solution is a crude one due to time constraints.
