Jump to content


Photo

Galeria Slideshow + Carrosel No Jquery


  • Faça o login para participar
30 replies to this topic

#16 Édipo Costa Rebouças

Édipo Costa Rebouças

    Veterano

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 08/06/2009, 19:12

tenta ae... mas a ideia é colocar o fadeIn no onload da imagem
$(document).ready(function(){
	$(".thumbs img").click(function(){ 
		$("#imgMaior img").fadeOut("slow").attr("src", $(this).attr("realsrc")).load(function(){
				$("#imgMaior img").fadeIn("slow"); 
		});
	});
})
</script>


#17 Maykel Esser

Maykel Esser

    Super Veterano

  • Usuários
  • 1536 posts
  • Sexo:Masculino
  • Localidade:Curitiba - PR

Posted 09/06/2009, 09:05

deu a mesma coisa... se a imagem carrega mais rápido do que o fade, ela aparece antes do fade terminar

veja aí: http://www.gpaprospe...nas/inicial.php

Se este post lhe ajudou, ajude o fórum também. Use a reputação de mensagens! add.png


#18 Alex Hiroshi

Alex Hiroshi

    Super Veterano

  • Ex-Admins
  • 4923 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP

Posted 09/06/2009, 10:26

Usa o segundo argumento do fadeOut/In. O callback vai ser executado quando o fadeOut/In terminar, assim é só usar o fadeIn no callback.
Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador

#19 Édipo Costa Rebouças

Édipo Costa Rebouças

    Veterano

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 09/06/2009, 11:26

deixa eu mastigar pro maykel se não ele pergunta denovo...

$(document).ready(function(){
	$(".thumbs img").click(function(){ 
		$("#imgMaior img").fadeOut("slow",
			function(){ 
				$(this).attr("src", $(this).attr("realsrc")).load(function(){
				$(this).fadeIn("slow");
		   }); 
		});
	});
})
</script>


#20 Maykel Esser

Maykel Esser

    Super Veterano

  • Usuários
  • 1536 posts
  • Sexo:Masculino
  • Localidade:Curitiba - PR

Posted 09/06/2009, 15:19

:lol: poha, eu sou iniciante nisso :P tenho mais é que perguntar mesmo! hahahah

Valeu edipo e Alex, vou fazer os testes aqui!

Edit:

$(this).attr("src", $(this).attr("realsrc")).load is not a function
(?)()()inicial.php (linha 24)
(?)()()3DYR8yd%...e3Q%3D%3D (linha 1)
(?)()()3DYR8yd%...e3Q%3D%3D (linha 1)
t()3DYR8yd%...e3Q%3D%3D (linha 1)
(?)()()3DYR8yd%...e3Q%3D%3D (linha 1)
[Break on this error] $(this).attr("src", $(this).attr("realsrc")).load(function(){

Meu debug acusou este erro, aí quando ele dá o fade, desaparece e não volta :P

Se este post lhe ajudou, ajude o fórum também. Use a reputação de mensagens! add.png


#21 Alex Hiroshi

Alex Hiroshi

    Super Veterano

  • Ex-Admins
  • 4923 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP

Posted 09/06/2009, 15:43

hahaha
Tira esse load(), deixa ele direto que funciona.
$(document).ready(function(){
	$(".thumbs img").click(function(){ 
		$("#imgMaior img").fadeOut("slow",
			function(){ 
				$(this).attr("src", $(this).attr("realsrc")).fadeIn("slow");
		   }); 
		});
	});
})

Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador

#22 Édipo Costa Rebouças

Édipo Costa Rebouças

    Veterano

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 09/06/2009, 15:53

esqueci de tirar.. kkkk

#23 Maykel Esser

Maykel Esser

    Super Veterano

  • Usuários
  • 1536 posts
  • Sexo:Masculino
  • Localidade:Curitiba - PR

Posted 09/06/2009, 15:53

syntax error
? in inicial.php@23()inicial.php (linha 24)
? in jquery.js@11()3DYR8yd%...e3Q%3D%3D (linha 1)
? in jquery.js@11()3DYR8yd%...e3Q%3D%3D (linha 1)
t()3DYR8yd%...e3Q%3D%3D (linha 1)
? in jquery.js@11()3DYR8yd%...e3Q%3D%3D (linha 1)
[Break on this error] })


:(

Se este post lhe ajudou, ajude o fórum também. Use a reputação de mensagens! add.png


#24 Édipo Costa Rebouças

Édipo Costa Rebouças

    Veterano

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 09/06/2009, 16:06

acho que tem que ter o load sim... pois na hora que acabar o fadout ele vai dar o fadin com sem a imagem ter carregado não? o alex esqueceu o }) do load... tira o ultimo.

Edição feita por: Édipo Costa Rebouças, 09/06/2009, 16:15.


#25 Maykel Esser

Maykel Esser

    Super Veterano

  • Usuários
  • 1536 posts
  • Sexo:Masculino
  • Localidade:Curitiba - PR

Posted 09/06/2009, 16:35

eu tinha tentado isso, ele diz que fadeIn não é uma função... mas acho que tem que deixar, afinal o load não abria nada, ou abria? :ponder:

$(this).attr("src", $(this).attr("realsrc")).fadeIn is not a function
[Break on this error] $(this).attr("src", $(this).attr("realsrc")).fadeIn("slow");


Se este post lhe ajudou, ajude o fórum também. Use a reputação de mensagens! add.png


#26 Alex Hiroshi

Alex Hiroshi

    Super Veterano

  • Ex-Admins
  • 4923 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP

Posted 09/06/2009, 16:44

Não sei se o load faria diferença nesse caso.
É, esqueci de tirar o }). Olhando melhor esse script, ele está certo mesmo?
$(this).attr("src", $(this).attr("realsrc")).fadeIn("slow");
Ele vai adicionar no src da imagem "#imgMaior img" o valor do realsrc da mesma imagem? Não teria que ser o src da imagem thumb?
$(document).ready(function(){
			$(".thumbs img").click(function(){ 
			var imgClique = $(this);
				$("#imgMaior img").fadeOut("slow",
					function(){ 
						$(this).attr("src", imgClique.attr("realsrc")).fadeIn("slow");
				});
			});
		})

Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador

#27 Édipo Costa Rebouças

Édipo Costa Rebouças

    Veterano

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 09/06/2009, 16:46

(load)é que ele teria que esperar a imagem carregar para dar o fadeIn, mas estou em duvida se iria funcionar direito com essa implementação.

Edição feita por: Édipo Costa Rebouças, 09/06/2009, 16:52.


#28 Alex Hiroshi

Alex Hiroshi

    Super Veterano

  • Ex-Admins
  • 4923 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP

Posted 09/06/2009, 16:54

Uma coisa que vale melhorar, é o atributo realsrc, que não existe. Pelo que eu vi, o que diferencia o nome das imagens menores das imagens maiores, é o sufixo _peq. Se esse for um padrão, é mais vantajoso fazer um replace no src das imagens thumbs para pegar o nome da imagem maior.
$(document).ready(function(){
			$(".thumbs img").click(function(){ 
			var imgClique = $(this);
				$("#imgMaior img").fadeOut("slow",
					function(){ 
						$(this).attr("src", imgClique.attr("src").replace(/_peq/,"")).fadeIn("slow");
				});
			});
		})

Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador

#29 Maykel Esser

Maykel Esser

    Super Veterano

  • Usuários
  • 1536 posts
  • Sexo:Masculino
  • Localidade:Curitiba - PR

Posted 09/06/2009, 17:08

Alex, idéia interessante... é um padrão sim, então resolvi implementar do seu jeito. Ele deu uma melhorada! Ele fecha a imagem, e quando começa a carregar, ele já abre o onload... ele dá isso quando a imagem não está carregada...

existe algum jeito de, apenas após a imagem carregar 100%, liberar o fadeIn?

vou subir as alterações para testar online, no mesmo link de antes

Se este post lhe ajudou, ajude o fórum também. Use a reputação de mensagens! add.png


#30 Édipo Costa Rebouças

Édipo Costa Rebouças

    Veterano

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 09/06/2009, 17:54

então, vou teria que usar o load, mas eu não tenho certeza se vai funcionar com esse tipo de conteudo dinamico.

tenta alterar essa linha
$(this).attr("src", imgClique.attr("src").replace(/_peq/,"")).fadeIn("slow");
por essa caso funcione certinho.
$(this).attr("src", imgClique.attr("src").replace(/_peq/,"")).load(function(){ $(this).fadeIn("slow"); });

e não esquece de deixar um gif de loading... pois se não vai parecer que o slide travou para quem tem uma conexão lenta

Editado...

pare melhorar a perfomace do slide, faça essas imagens carregarem depois do onload da pagina, em um iframe ou outro lugar que a pessoa não veja.

exemplo:

$(document).load(function(){
$('body').append("<div style=\"display: none\"><img src=\"imagem1.jpg\" /><img src=\"imagem2.jpg\" /><img src=\"imagem3.jpg\" /></div>");
});

vai fazer seu slideshow rodar mais rapido pois as imagens vão estar no cache do browser.

Edição feita por: Édipo Costa Rebouças, 09/06/2009, 18:11.





0 user(s) are reading this topic

0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq