Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Clayder

[Resolvido] Ampliação de fotos Jquery no Google Cromes

Recommended Posts

Ola pessoa , eu estou tentando fazer tipo uma galeria onde você clica e amplia as fotos , consegui fazer funciona perfeitamente no IE e no Firefox . No Crome quando você clica na imagem ela amplia mas da erro quando você clica nela para fechar , entao se alguem poder m ajudar .

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Livro jQuery do Maujor | Imagens e galerias de fotos</title>
<style type="text/css" media="all">
body {
width:500px;	
font: 80%/1.2 Arial, Helvetica, sans-serif;
color:#666;
margin:30px auto;
padding:0;
}
.foto {border:none;}
</style>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
	$('.foto').each(function() {
		$(this).click(function(event){
		event.preventDefault(); 
		$('.foto').hide();		

			if($(this).attr('width') > 100) {
			$('.foto').show();		
			$(this).attr({width: 100, height: 75});			
			$('.abre-fecha').text('Clique para ampliar');			
			} else {
			$(this).attr({width: 500, height: 375})
			.slideDown(1500);
			$('.abre-fecha').text('Clique para fechar');			
			}
		});
	});
});
  // ]]>
</script>
</head>
<body>
<h1>Fotos de Brasília</h1>
<div id="galeria">
<a href="1.jpg"><img src="1.jpg" alt="Descrição da foto" width="100" height="75" class="foto" /></a>
<a href="2.jpg"><img src="2.jpg" alt="Descrição da foto" width="100" height="75"  class="foto" /></a>
<a href="3.jpg"><img src="3.jpg" alt="Descrição da foto" width="100" height="75"  class="foto" /></a>
<a href="4.jpg"><img src="4.jpg" alt="Descrição da foto" width="100" height="75"  class="foto" /></a>
<a href="5.jpg"><img src="5.jpg" alt="Descrição da foto" width="100" height="75"  class="foto" /></a>
<a href="6.jpg"><img src="6.jpg" alt="Descrição da foto" width="100" height="75"  class="foto" /></a>
<a href="7.jpg"><img src="7.jpg" alt="Descrição da foto" width="100" height="75"  class="foto" /></a>
<a href="8.jpg"><img src="8.jpg" alt="Descrição da foto" width="100" height="75"  class="foto" /></a>
</div>

<span class="abre-fecha">Clique para ampliar</span>

</body>
</html>

 

obrigado pessoal ..

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu testei aqui no Chrome 20 com o jQuery 1.4.2 e não é mostrada nenhuma mensagem de erro no console, mas ao clicar para fechar a imagem é fechada e novamente ampliada, mas isso foi corrigido quando eu atualizei para jQuery 1.7.2.

 

Pegue direto do Google:

 

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu testei aqui no Chrome 20 com o jQuery 1.4.2 e não é mostrada nenhuma mensagem de erro no console, mas ao clicar para fechar a imagem é fechada e novamente ampliada, mas isso foi corrigido quando eu atualizei para jQuery 1.7.2.

 

Pegue direto do Google:

 

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

 

Pow amigo , valeu pela resposta atuaçizei aqui .. e fico tudo certo .. obrigadão ..

 

RESOLVIDO !!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.