Jquery Cycle: fadeIn na primeira foto

[marcelo2605 10]

É possível?

 

$(function() {
   $('#slideshow').cycle({
       fx:       'fade',
	speed:     900,
       timeout:   6000,
	pause: true,
	next:   '#next , #slideshow', 
   	prev:   '#prev',         
	after:     function(curr,next,opts) {
          var index=opts.currSlide;
           $('#caption p:visible').hide();
           $('#caption p').eq(index).show();
	   var contador = (opts.currSlide + 1) + ' - ' + opts.slideCount;
		$('#contador').html(contador);

}

   });
});

[William Bruno 1501]

hum.. pensei nisso aqui:

 

$(function() {
   $('#slideshow li').eq( 0 ).hide().fadeIn();
   $('#slideshow').cycle({
      //..

entendeu ?

[marcelo2605 10]

William, mas como faço para a foto carregar primeiro antes de dar o fade? Se ela não está armazenada no cache, o fade não acontece.

[William Bruno 1501]

putz.. ai você vai ter q esperar o evento onload da imagem.

 

ou disparar no evento .load do objeto window. Pois esse evento acontece qnto todas as imagens já estão carregadas.

[marcelo2605 10]

William, mas existe alguma coisa do tipo: só comece o slideshow quando a primeira foto carregar?

[William Bruno 1501]

Sim.. em vez de disparar no document.ready(), dispare no window.onload conforme eu disse..

 

o .load do window, vai esperar todas as imagens carregarem. Ai você faz o fade que eu disse, na primeira imagem, e dispara o slideshow também.

[marcelo2605 10]

OK, vou tentar.

 

William, fiz o seguinte:

 

$(window).load(function() {
$(function() {
$('#slideshow li').eq( 0 ).hide().fadeIn(900);
   $('#slideshow').cycle({
       fx:       'fade',
	speed:     900,
       timeout:   6000,
	pause: true,
	next:   '#next , #slideshow', 
   	prev:   '#prev',         
	after:     function(curr,next,opts) {
          var index=opts.currSlide;
           $('#caption p:visible').hide();
           $('#caption p').eq(index).show();
	   var contador = (opts.currSlide + 1) + ' - ' + opts.slideCount;
		$('#contador').html(contador);

}

   });
});});

 

Mas na hora que a página carrega, as imagens do slideshow aparecem abaixo da primeira.

[William Bruno 1501]

ai você deve ajustar com css, usando um overflow:hidden; para não ter essa quebra ai.

 

no caso:

$(window).load(function() {
$(function() {

não faz sentido.

 

 

tire o $(function() { dai.

 

 

 

 

ps:

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

[marcelo2605 10]

Legal. Esse problema foi resolvido. Agora quando a página carrega, a primeira imagem aparece automaticamente e depois reaparece com um fade.

 

Como eu coloquei:

 

	$('#slideshow li').eq( 0 ).hide().fadeIn(900);

 

Ela não deveria desaparecer?

[William Bruno 1501]

primeira imagem aparece automaticamente e depois reaparece com um fade.

ta.. então faça assim:

 

 

$(document).ready(function(){
   $('#slideshow li').eq( 0 ).hide();
});
$(window).load(function(){
   $('#slideshow li').eq( 0 ).fadeIn(900);

   //restante do código
});

 

 

acho q isso resolve, se é que eu entendi oq você quer fazer.

[marcelo2605 10]

Agora ele pula a primeira e aparece a segunda. Depois volta a primeira com o fade. Pode ser alguma coisa no css?

 

#slideshow{
   width:720px;
   height:490px;
position:absolute;
top:86px;
overflow:hidden;
}

#slideshow li {
width: 100%;
}

#slideshow li img{
margin:0;
}

[William Bruno 1501]

o comportamento esperado era esse mesmo..

 

ai agora você precisa definir oq deve acontecer.. hehe..

 

e ai ? logo de cara, não mostra nada ? como será ?

[marcelo2605 10]

A idéia era fazer o fade com a primeira imagem (não só com as seguintes). Mas com o último código, a página carrega com a segunda imagem na tela. Depois ela some e retorna a primeira imagem com o fade. Talvez se colocássemos uma imagem "carregando" antes de carregar a primeira imagem

[William Bruno 1501]

A idéia era fazer o fade com a primeira imagem

então, mas para isso, precisa ter algo atras entendeu ?

 

 

Talvez se colocássemos uma imagem "carregando" antes de carregar a primeira imagem

fica bacana.. q tal ?

 

-> esconda todo o slideshow no document.ready.

-> coloque o carregando

-> faça o fade da primeira imagem no window.load

-> mostre todo o slideshow

 

 

ai você precisa ir ajustando essa mecânica.

[marcelo2605 10]

Beleza, vou tentar!

[William Bruno 1501]

opa! pensei num algoritmo mais simples!

 

você joga uma imagem grande por cima com o loading.

e qndo tiver o window.load você esconde essa imagem.

 

Pronto. Pode até esconder ela com fade... ai não precisa do primeiro malabarismo q falei.

[marcelo2605 10]

Eu não posso criar uma função onde a função slideshow só começará a funcionar quando a imagem01.jpg for carregada?

[William Bruno 1501]

pode sim.. mas tudo depende doq você consegue fazer.

[marcelo2605 10]

Eu tentei isso:

 

$('#slideshowB li').css('display' , 'hidden');
$(window).load(function() {
$('#slideshowB li').eq( 0 ).hide().fadeIn(900);
   $('#slideshowB').cycle({
	fx: 'fade'
	});
});

 

Todas as imagens são carregadas antes de iniciar o slideshow. mas o problema é que a primeira linha não está funcionando. As imagens aparecem.

[William Bruno 1501]

$('#slideshowB li').css('display' , 'none');