al hacer click en una imagen pequeña que cambie una imagen grande

maximendez88 · #1 (**permalink**) 28/11/2012, 11:37

buenas estoy intentando hacer una pequeña galeria y mi idea para que funcione seria simple... o sea... tengo imagenes pequeñas y una imagen grande... la idea es que al hacer click en las imagenes pequeñas, la grande cambie sin recargar la pantalla.... he intentado hacer algo pero aun no logro dar con la solucion espero que alguien me pueda dar una mano... saludos

Código HTML:

Ver original<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>
 
 
<script type="text/javascript">
// JavaScript Document
function cambiar(cambiar_foto)
{
    document.getElementById('cambiar').src=cambiar_foto
}
</script>
</head>
 
<body>
 
 
 
<img src="prueba.jpg" id="cambiar"/>
 
 
 
<br/>
<br/>
<img src="prueba_slide.jpg"  style="cursor: pointer" onclick="cambiar('prueba.jpg');"/>
 
<img src="prueba_slide2.jpg"  style="cursor: pointer" onclick="cambiar('prueba2.jpg');"/>
 
 
 
 
 
 
</body>
</html>

vimon · #2 (**permalink**) 28/11/2012, 13:58

buenos dias, antes de ponerte a escribir lineas de codigo revisa este link que encontre a ver si te sirve

http://www.dfc-e.com/metiers/multimedia/opensource/jquery-fancyzoom/
(Lo siento no se convertirlo en link)

Yo no lo he implementado nunca pero puede serte util

Saludos

furoya · #3 (**permalink**) 28/11/2012, 16:47

Usar un jquery para esto es un despropósito.

Probé el ejemplo en Chrome. Y no sé por qué si la función y el identificador de la imagen tienen el mismo nombre ... se tilda.

Código:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>

<script type="text/javascript">

function cambiar(cambiar_foto)
{
    document.getElementById('cambio').src = cambiar_foto;
}

</script>
</head>
 
<body>
 
<img src="http://img515.imageshack.us/img515/1196/danielsanjurjo.jpg" id="cambio" 
style="float: left; margin: 10px; " />
 
<img src="http://img89.imageshack.us/img89/3793/altardiamuertosmfernand.th.jpg"  style="cursor: pointer" onclick="cambiar('http://img89.imageshack.us/img89/3793/altardiamuertosmfernand.jpg')" />
<br>
<img src="http://img840.imageshack.us/img840/3793/altardiamuertosmfernand.th.jpg"  style="cursor: pointer" onclick="cambiar('http://img840.imageshack.us/img840/3793/altardiamuertosmfernand.jpg')" /> 
 
</body>
</html>

Y no te costaba nada poner rutas absolutas a las imágenes.

emprear · #4 (**permalink**) 28/11/2012, 18:47

Una alternativa que puede serte útil, para el caso de que las imágenes no sean de gran tamaño o mucho peso, es usar la misma imagen para la miniatura, de esta manera ya estarías cargando la imagen ampliada

Código HTML:

Ver original<!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">
<head>
<title>Galería</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
function galeria(x){
document.ampliar.src=x.src;
}
//]]>
</script>
 
</head>
<body>
<p>
<img src="http://foros.emprear.com/img_fdw/481.png" alt="" width="60" height="60" onclick="galeria(this);"/>
<img src="http://foros.emprear.com/img_fdw/wall05-homero-simpsons.jpg" alt="" width="60" height="60" onclick="galeria(this);" />
<img src="http://foros.emprear.com/img_fdw/blob.jpg" alt="" width="60" height="60" onclick="galeria(this);" /><br /><br />
<img src="http://foros.emprear.com/img_fdw/tr.gif" alt="" width="400" height="400" name="ampliar" />
</p>
</body>
</html>

tr.gif es un gif transparenbte de 1px x 1px, aunque como imagen por defecto puede ponerse otra

Saludos

furoya · #5 (**permalink**) 29/11/2012, 05:33

Me acordé de este tema.

No es exactamente lo planteado, pero puede ser una alternativa si se usan las mismas imágenes.

Mostrar una capa despues de que pase algo