Show Carousel after loading

Asked

Viewed 79 times

0

I have two carousels on the page and while they are loading, they are broken. Only after they are right. I wish they were only displayed, once fully loaded, but I’m not getting.

window.onload = function() {
            $('#corpo-conteudo-imoveis1').fadeIn(1500)
            $("#pikame").PikaChoose({carousel:true, carouselVertical:true});
            $("#pikame2").PikaChoose({carousel:true, carouselVertical:true});
        };
javascript jquery carousel

1 answer

2

Hello.

In the tool’s own documentation you have an option fadeThumbsIn which says the following:

Enabling this will fade in the UL after Pikachoose has Loaded. You must Manually set the UL to display:None in your CSS for this to have an Effect. $("#id"). Pikachoose({fadeThumbsIn: true});

Documentation http://www.pikachoose.com/versions/

So I imagine you can do it like this:

window.onload = function() {
        $('#corpo-conteudo-imoveis1').fadeIn(1500)
        $("#pikame").PikaChoose({carousel:true, carouselVertical:true, fadeThumbsIn: true});
        $("#pikame2").PikaChoose({carousel:true, carouselVertical:true, fadeThumbsIn: true});
    };

Another option the tool offers is to use callbacks.

There is the callback buildFinished which says the following:

buildFinished: called as soon as Pikachoose is done building the slideshow

And he says the way to use it is:

Function myFunction(self){ console.log(self); } $("#id"). Pikachoose({buildFinished: myFunction});

So in this case, you can start with all your hidden elements.

$("#pikame").hide();
$("#pikame2").hide();

And make your function show them, as follows (for example).

function habilitaSlideShow(self) {
     $(self).fadeIn();
}

window.onload = function() {
        $('#corpo-conteudo-imoveis1').fadeIn(1500)
        $("#pikame").PikaChoose({carousel:true, carouselVertical:true, buildFinished: habilitaSlideShow});
        $("#pikame2").PikaChoose({carousel:true, carouselVertical:true, buildFinished: habilitaSlideShow});
    };

More information in session API Hooks of the link http://www.pikachoose.com/versions/

  • Gee, I didn’t expand that section on the documentation and went looking for the event in the source code.. hahaha

Browser other questions tagged javascript jquery carousel

You are not signed in. Login or sign up in order to post.