Monitor Reply

Support

External controls and callbacks

Permalink Browser Info Environment September 16, 2012 at 5:09 AM

I have added external controls for buttons to control each slide and have made use of callback "afterEnd" to bind the external controls as the slides move. When I don't click on the buttons, the slider change is smoothly reflected on the buttons. But when I click on one of the buttons, the "next" button is selected. I know it's due to the else statement in the afterEnd below but not sure how to fix this. Any thoughts?

Below is what I have in the Carousel Pro's view.php:

$("#jbCarousel<?php  echo $bID; ?>").jCarouselLite({
    ///Few lines omitted...
    btnNext: ".externalControl .next",
    btnPrev: ".externalControl .prev",
    btnGo:
    [".externalControl .1", ".externalControl .2",
    ".externalControl .3", ".externalControl .4"],
    afterEnd: function() {
         if($(".externalControl").last().hasClass("selected")) {
            $(".externalControl").first().addClass("selected");
            $(".externalControl").last().removeClass("selected");
         } else {
            $(".selected").removeClass("selected").next().addClass("selected");
         }
    }

Viewing 15 lines of 16 lines. View entire code block.

 
$("#jbCarousel<?php  echo $bID; ?>").jCarouselLite({
    ///Few lines omitted...
    btnNext: ".externalControl .next",
    btnPrev: ".externalControl .prev",
    btnGo:
    [".externalControl .1", ".externalControl .2",
    ".externalControl .3", ".externalControl .4"],
    afterEnd: function() {
         if($(".externalControl").last().hasClass("selected")) {
            $(".externalControl").first().addClass("selected");
            $(".externalControl").last().removeClass("selected");
         } else {
            $(".selected").removeClass("selected").next().addClass("selected");
         }
    }
});

Below is what I have in my template file:

$(".externalControl.1").addClass("selected");
$(".externalControl").click(function() {
    $(".externalControl").addClass("selected").not(this).removeClass("selected");
});