jcarousel external linking

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.

Tags: , ,

15 Responses to “jcarousel external linking”

  1. Liz says:

    For the previous and next buttons to work as well with the active class, try this:

    jQuery(‘#carousel-next’).bind(‘click’, function() {
    carousel.next();
    $(‘.jcarousel-control a.active:not(:last-child)’).next().addClass(‘active’);
    $(‘.jcarousel-control a.active + a.active’).prev().removeClass(‘active’);
    return false;
    });
    jQuery(‘#carousel-prev’).bind(‘click’, function() {
    carousel.prev();
    $(‘.jcarousel-control a.active:not(:first-child)’).prev().addClass(‘active’);
    $(‘.jcarousel-control a.active + a.active’).removeClass(‘active’);
    return false;
    });

  2. JS says:

    I have been looking for this solution now for 48 hours. THANK YOU!!!!

  3. Thank you very much for posting this. Very helpful and certainly a missing part of the examples provided by jCarousel out of the box!!

  4. Marc says:

    Hi,

    I’ve been looking for this answer for ages too, i.e. not having to have numbers for the external pagination links.

    Hoever I’ve copied your amended Javascript into the head of my index file and amended the html links accordingly and now the design has broken, in other words the images all appear in a vertical line and the scrolling action has stopped working.

    HELLLLP!

    Thanks in advance,

    Marc

  5. Ben says:

    Marc,

    Most probably it has something to do with how your jquery is set up. For my example, all the external links are within a class called jcarousel-control — make sure you have all the ids/classes covered in jquery.

  6. Michael says:

    OMG!! Thank you so much! I have been trying for the past hour to figure it our myself and obviously unsuccessful in doing it – until I found this!!

    Oh, and Steve, it’s broken because Ben accidentally didn’t close off the code, just add in

    };

    at the end and you should be fine 🙂

    THANKS AGAIN!

  7. tildy says:

    Because I usually use a carousels , sometimes more than once per page I added some functions:

    $(‘#’+box_id+’ .jcarousel-skin-tango’).jcarousel({
    moduleWidth: 600,
    scroll: 5,
    visible: 5,
    boxid: box_id,
    initCallback: mycarousel_initCallback,
    // This tells jCarousel NOT to autobuild prev/next buttons
    buttonNextHTML: null,
    buttonPrevHTML: null,

    });

    function prevShowHide(boxid)
    {
    if( $(‘#’+boxid+’ .jcarousel-control a:first-child’).is(“.pageselect”)) {$(‘#’+boxid+’ #mycarousel-prev’).hide();}
    else {$(‘#’+boxid+’ #mycarousel-prev’).show();}
    }

    function nextShowHide(boxid)
    {
    if( $(‘#’+boxid+’ .jcarousel-control a:last-child’).is(“.pageselect”)) {$(‘#’+boxid+’ #mycarousel-next’).hide();}
    else {$(‘#’+boxid+’ #mycarousel-next’).show();}
    }

    function mycarousel_initCallback(carousel) {

    var boxid= this.boxid;
    prevShowHide(boxid);
    nextShowHide(boxid);

    $(‘#’+this.boxid+’ .jcarousel-control a’).bind(‘click’, function() {
    $(‘#’+boxid+’ .pagination a’).removeClass(“pageselect”);
    $(this).addClass(“pageselect”);
    var pageNr = $(this).attr(“page”);
    carousel.scroll(jQuery.jcarousel.intval((pageNr*5)+1));
    prevShowHide(boxid);
    nextShowHide(boxid);
    return false;
    });

    $(‘#’+boxid+’ #mycarousel-next’).bind(‘click’, function() {
    carousel.next();
    $(‘#’+boxid+’ .jcarousel-control a.pageselect:not(:last-child)’).next().addClass(‘pageselect’);
    $(‘#’+boxid+’ .jcarousel-control a.pageselect + a.pageselect’).prev().removeClass(‘pageselect’);
    prevShowHide(boxid);
    nextShowHide(boxid);
    return false;
    });

    $(‘#’+boxid+’ #mycarousel-prev’).bind(‘click’, function() {
    carousel.prev();
    $(‘#’+boxid+’ .jcarousel-control a.pageselect:not(:first-child)’).prev().addClass(‘pageselect’);
    $(‘#’+boxid+’ .jcarousel-control a.pageselect + a.pageselect’).removeClass(‘pageselect’);
    prevShowHide(boxid);
    nextShowHide(boxid);
    return false;
    });
    };

    it’s hide the prev (button) , if the selected child is first, and hide the next, (button) if the selected child is last.

  8. Thanks Man!! no words to descript feelings finding this post… God Bless you… Gracias Hermano!!

  9. Ryan says:

    thanks for the help! this worked great!

  10. Paul Burgess says:

    Hey Ben – this post helped me out LOADS, thanks so much for posting it, I have been trying to craft a fluid width slider for a few days that also offers as many options that a client could ask for as possible – and I think it’s just about there using jCarousel fluid slider – AND your code above.

    The one thing that I needed was for the new pagination / control menu to auto-generate ( the part ) – which is needed when content is dynamically generated. In the original code it is manually created – so I added this before the callback:

    —————-

    $(“#mycarousel ul li”).each(function (i) {

    var count = i + 1;
    var nav_tag = “span”;

    $(“#controls”).append(‘‘+ count +’‘);
    });

    —————-

    Allowing a quick variable fix for tags so you can make it an li etc. if need be. I’m not a jquery wizard so there may well be a faster way to do this – but it works for me 🙂

    Thanks again!

  11. Paul Burgess says:

    Whoops – I should add – you need to create an element with an id of ‘controls’ (all changeable of course) for his to populate it with the navigation. :-S

  12. Paul Burgess says:

    Oh dear – the comments removed my span tags 🙁

  13. Faruq Shaik says:

    Can anybody provide information for implementing fade effect rather than Scroll.

    My requirement is, if i click numbers like 1,23… it should display below images with fade effect rather than scroll.

    I am searching from last 2 days.

    Thanks in Advance……

  14. Basili says:

    has anyone had trouble getting the “active” to be highlighted? navigation works just fine but even if i add class=”active” it does not indicate which one is selected.

  15. Elza Glazer says:

    Hello just wanted to give you a quick heads up. The text in your article seem to be running off the screen in Chrome. I’m not sure if this is a format issue or something to do with browser compatibility but I figured I’d post to let you know. The design look great though! Hope you get the problem resolved soon. Kudos

Leave a Reply