0

Tenho dois carrosséis na pagina e enquanto eles estão carregando, ficam quebrados. Só depois que ficam certos. Eu gostaria que eles só fossem exibidos, depois de carregados por completo, mas não estou conseguindo.

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

1 Resposta 1

2

Olá.

Na própria documentação da ferramenta tem uma opção fadeThumbsIn que diz o seguinte:

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});

Documentação http://www.pikachoose.com/versions/

Então imagino que você possa fazer assim:

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

Outra opção que a ferramenta oferece é utilizar callbacks.

Existe o callback buildFinished que diz o seguinte:

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

E fala que o modo de utlizar é:

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

Então nesse caso, você pode começar com todos seus elementos escondidos.

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

E fazer sua função mostrar eles, da seguinte forma (por exemplo).

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});
    };

Mais informações na sessão API Hooks do link http://www.pikachoose.com/versions/

1
  • Caramba, não expandi essa seção da na documentação e fui procurar o evento no código fonte.. hahaha Commented 8/09/2015 às 14:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .