CODEWITHSUNDEEP
jquerymagentojcarousel
Robert
Robert

Reputation: 812

jCarousel arrow disable if there are no more image in the left or right

I use Sorgalla jcarousel. Lets say that I have nine images and the script is set with scroll: 3, and i am watching image 1-3, then the arrow should be only on the right side, which means i can browse for more pics to the right. then, when i browse the the right and i am watching f.e. image 4,5,6, in this case the arrows should be on boths sides, because there are pics to the left and to the right. BUT, if i browse again to the right and get until image 7,8,9, the the arrow on right side should disappear because there is nothing more to browse to the right. only the left arrow should be shown in this case.

My script:

jQuery(document).ready(function($) {

    myCarousel = null; // This will be the carousel object

    function mycarousel_initCallback(carousel, state) {
        if (state == 'init') {
            myCarousel = carousel;
        }
        $('#arrows_gallery_next').bind('click', function() {
            carousel.next();
            return false;
        });
        $('#arrows_gallery_prev').bind('click', function() {
            carousel.prev();
            return false;
        });


        $('.product-view .product-img-box .more-views .jcarousel-skin-tango .jcarousel-item').width(<?php echo $thumbX;?>);

    };

    jQuery('#arrows_gallery_carousel').jcarousel({
        scroll: 1,
        visible:3,
        initCallback: mycarousel_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null,
            setupCallback:function(){
               jQuery('#arrows_gallery_carousel.jcarousel-list li').each(function(){
                    jQuery(this).width(103)
               })
            },
    });
});

Upvotes: 0

Views: 811

Answers (1)

potatopeelings
potatopeelings

Reputation: 41065

Change your paging handlers to keep track of the page number and enable / disable the paging buttons once they reach the start or end.

function mycarousel_initCallback(carousel, state) {
    var page = 1;
    $('#arrows_gallery_prev').css('visibility', 'hidden');

    if (state == 'init') {
        myCarousel = carousel;
    }
    $('#arrows_gallery_next').bind('click', function() {
        carousel.next();
        page++;
        $('#arrows_gallery_prev').css('visibility', 'visible');
        $('#arrows_gallery_next').css('visibility', (page == 3) ? 'hidden' : 'visible');
        return false;
    });
    $('#arrows_gallery_prev').bind('click', function() {
        carousel.prev();
        page--;
        $('#arrows_gallery_next').css('visibility', 'visible');
        $('#arrows_gallery_prev').css('visibility', (page == 1) ? 'hidden' : 'visible');
        return false;
    });


    $('.product-view .product-img-box .more-views .jcarousel-skin-tango .jcarousel-item').width(<?php echo $thumbX;?>);

};

By the way, you mentioned that the scroll was set to 3, but your configuration has scroll as 1.

Upvotes: 1

Related Questions