Desplegar una foto al hacer click en ella

[Bier]

Hola.

1. Tengo una página con una foto grande arriba y 4 fotos pequeñas más abajo.
2. Quiero que al oprimir sobre una de las fotos chicas sea desplegada en el espacio superior la foto seleccionada de manera ampliada.
3. En el ejemplo de abajo la foto F1 es la que se encuentra ampliada.
   
   Algo parecido a esto: http://javascript.internet.com/image-effects/jas.htm
   
   ¿alguna sugerencia? Gracias
   

[F1]

[F1] [F2] [F3] [F4]

[canon882]

Iniciado por Bier

Hola.

1. Tengo una página con una foto grande arriba y 4 fotos pequeñas más abajo.
2. Quiero que al oprimir sobre una de las fotos chicas sea desplegada en el espacio superior la foto seleccionada de manera ampliada.
3. En el ejemplo de abajo la foto F1 es la que se encuentra ampliada.
   
   Algo parecido a esto: http://javascript.internet.com/image-effects/jas.htm
   
   ¿alguna sugerencia? Gracias
   

[F1]

[F1] [F2] [F3] [F4]

A ver, lo más fácil que se me ocurre es:

1.- Re dimensionar todas las fotos grandes a una estándar. Por ejemplo, 400x350px.

2.- Crear un iFrame donde quieres que salga la foto grande.

3.- Enlazar las fotos pequeñas hacia la foto grande, indicando que se abra en el iFrame.

Sencillo, ¿no? Quizás haya alguno mejor con JavaScript. XD Bueno, yo no manejo JS, pero si algo de HTML. En lo posible, te mandaré un ejemplo o lo colgaré en mi web. =)

Un gusto saludarlo. Hasta una nueva oportunidad. Suerte y éxitos. n_n'

[HackmanC]

Y por qué no utilizas esto ?

http://javascript.internet.com/image-effects/jas.htm

Que está aquí ?

http://www.robertnyman.com/jas/

Aunque ... lo que hace es esto, (pero mas extenso, con slideshow, etc):

Código:

<script language="JavaScript" type="text/javascript">
function onChange(src) {
  var element = document.getElementById("bigone");
  element.src = src;
}
</script>

<table border="1">
  <tr>
    <td colspan="4"><img src="1.jpg" alt="" name="bigone" width="320" height="240" id="bigone" /></td>
  </tr>
  <tr>
    <td><img src="1.jpg" width="160" height="120" alt="" onmousedown="javascript:onChange('1big.jpg');" /></td>
    <td><img src="2.jpg" width="160" height="120" alt="" onmousedown="javascript:onChange('2big.jpg');" /></td>
    <td><img src="3.jpg" width="160" height="120" alt="" onmousedown="javascript:onChange('3big.jpg');" /></td>
    <td><img src="4.jpg" width="160" height="120" alt="" onmousedown="javascript:onChange('4big.jpg');" /></td>
  </tr>
</table>

[canon882]

Acá te dejo el ejemplo. Es cosa de saberlo editar bien en cuanto al diseño. XD Bueno, algo ayuda, ¿no? =$

www.limapunkrock.com/ejemplo_001.zip

[Bier]

Hola canon882,
Eres un verdadero mago, es exactamente lo que andaba buscando.
Gracias infinitas.

Hola HackmanC

El ejemplo que he incluido para visualizar la idea lo tenía reservado por si no encontraba algo más sencillo, aunque debo comentarte que es una aplicación muy vistosa que tengo reservada para otra web.

Para la web en la que deseo integrar esta función, se generan dinamicamente 200 páginas con 10 fotos cada página, y al primer código lo veo un poco grande, lo que supongo reduce el rendimiento del servidor y deseo optimizar todo lo posible.

HackmanC, Gracias por tus comentarios.

[HackmanC]

Ok, ok ... solamente me hace falta comentar que esa era mi primera opción pero el código javascript que escribí hace lo mismo que el iframe.

Pero ya hiciste tu elección entre los dos métodos, y es bueno saber que ya resolviste tu problema,

Saludos,

[Bier]

La solución propuesta por canon882 es la que estoy utilizando, resulelve exacta mi necesidad. Solo que ahora quiero agregarle una funcionalidad y no he podido.

¿Como puedo incluir una imagen de background a la foto grande? Le he buscado y la verdad no lo he podido hacer.

Gracias anticipadas.

[canon882]

Iniciado por Bier

La solución propuesta por canon882 es la que estoy utilizando, resulelve exacta mi necesidad. Solo que ahora quiero agregarle una funcionalidad y no he podido.

¿Como puedo incluir una imagen de background a la foto grande? Le he buscado y la verdad no lo he podido hacer.

Gracias anticipadas.

Bueno, es simple. En lugar de que las fotos de abajo estén enlazadas a una foto (.jp", las enlazas a una Página Web (HTML) y ya podrías modificar los fondos de cada foto (la cual está contenida en una Página Web). Acá te adjunto un ejemplo para ver si es así como lo quieres. =) Espero que te sea útil n_n

Puedes descargar el ejemplo en: www.limapunkrock.com/ejemplo_001.zip

Gracias por tu atención. n_n'

[Bier]

Muy bien, funciona perfecto.
Pero para mi aplicación es poco más complicado implementarlo, aunque no imposible.

Lo que pasa es que genero unas 300 a 500 páginas dinámicamente, cada página con 1 foto grande arriba y 6 imagenes chicas abajo, que son a las que hacemos click.

Lo que quería es poner una imagen transparente y bajo de ella (como background) la foto que realmente deseo desplegar, ello para dificultar que los visitantes copien estas fotos y así solo copien la imagen transparente.

Otra alternativa que estoy analizando es la de incluir una "imagen de agua", incrustándola con PHP.

Espero poder resolver este detalle, aunque la página ya la he publicado y trabaja pefecto con frames, mi deseo es solo una cereza al pastel.

Gracias por todo.