CODEWITHSUNDEEP
jqueryhashcustom-controlshistoryjcarousel
James Wong
James Wong

Reputation: 4619

Scroll to given jCarousel slide on page load

Hello stackoverflow contributors! I have this script that gets the starting position of my jCarousel through the browser URL's hash. Something like text.html#2.

What am trying to achieve is make jCarousel scroll to the given position on page load. However my code below seems to work only if I bind it to clicks - it does not respond to on page load requests.

Initialize jCarousel

jQuery('#body_list').jcarousel({
        scroll: 1,
        initCallback: bodylist_initCallback
});

Callback function

function bodylist_initCallback(carousel) {
        $(window).load(function () {
            if(window.location.hash) {
                var hash = window.location.hash.slice(1); 
                carousel.scroll(jQuery.jcarousel.intval(hash));
            }
        });
});

Alternative scroll call The following lines works except in Safari

if(window.location.hash) {
        var hash = window.location.hash.slice(1); 
        jQuery('#body_list').jcarousel('scroll', hash);
}

Upvotes: 1

Views: 7695

Answers (1)

Andrew Whitaker
Andrew Whitaker

Reputation: 126052

You could set the start option when you initialize the jCarousel:

var hash = 1; // Default start index if none is specified in URL
if (window.location.hash) {
    hash = parseInt(window.location.hash.slice(1));
}
jQuery('#mycarousel').jcarousel({
    start: hash,
    scroll: 1
});

Update

If you want to see the scrolling animation when you load the page, try setting a timeout in the initCallback option for jCarousel:

jQuery("#mycarousel").jcarousel({
    initCallback: function(carousel) {
        if (window.location.hash) {
            var hash = window.location.hash.slice(1);
            setTimeout(function() {
                carousel.scroll(parseInt(hash, 10));
            }, 500);
        }
    }
});

Seems to work in FF/Chrome. I'm on Ubuntu so I can't try it on IE or Safari.

Upvotes: 5

Related Questions