CODEWITHSUNDEEP
phpjavascriptjqueryjcarousel
Gereby
Gereby

Reputation: 57

jCarousel initializing/refreshing/reloading each time clicked on image

I am making a picture preview with jCarousel (http://sorgalla.com/projects/jcarousel/), but faced with one problem: I do not know how could I reload/refresh jCarousel dynamic list.

I have few categories of images. When I click on a picture in one of that, I need that the list would be created and preview start with that element. I have some code, but do not know how to make it re-create all list after clicking on other image that preview start with other image. Here are my code:

$(document).ready(function(){
$("ul#stage li").live('click', function() {

    var ul = $(this).parent();
    var index = +(ul.children().index(this))+1;

    var mycarousel_itemList = [ ];

    $('li[data-id]').each(function () {
        var $this = $(this);
            mycarousel_itemList.push({
                url : $this.attr("data-img"),
                title : $this.attr("data-title")
            });
    });

    function mycarousel_itemLoadCallback(carousel, state) {
        for (var i = carousel.first; i <= carousel.last; i++) {
            if (carousel.has(i)) {
                continue;
            }
            if (i > mycarousel_itemList.length) {
                break;
            }
            carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i-1]));
        }
    };

    function mycarousel_getItemHTML(item) {
        return '<img src="' + item.url + '" width="800" height="600" alt="' + item.url + '" />';
    };
        alert(index);
    jQuery('#mycarousel').jcarousel({
        itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback},
        size: mycarousel_itemList.length,
        scroll: 1,
        start: index,
        wrap: 'last',
        animation: 'fast',
        visible: 1
    });

    document.getElementById('popup-content').style.background='url('+$(this).attr("data-img")+') no-repeat center';
    document.getElementById('fades').style.display='block';
    document.getElementById("light").style.display = "block";
    $("#light").fadeTo("slow", 1);
});
});

Everything is like that: there are images > I click on one of those > popup shows with jCarousel and one visible image and then I could scroll through all other images.

It is working good, but just a first time. When I click on other image (after closing popup), the view starts with that image which was opened last.

If something are not clear enough - please, ask. I will try to make it more precisely. Thanks for your help!

Upvotes: 2

Views: 857

Answers (1)

Jan.J
Jan.J

Reputation: 3080

You can recreate jCarousel, first use $('#mycarousel').remove(); and next init jCarousel again. I didn't really understand what you're trying to do, but this can help in most cases, of course jCarousel should have Destroy method but it hasn't.

And why you don't use jquery selectors in some cases?

Upvotes: 1

Related Questions