Foros del Web » Creando para Internet » Diseño web »

Desplegar una foto al hacer click en ella

Estas en el tema de Desplegar una foto al hacer click en ella en el foro de Diseño web en Foros del Web. Hola. Tengo una página con una foto grande arriba y 4 fotos pequeñas más abajo. Quiero que al oprimir sobre una de las fotos chicas ...
  #1 (permalink)  
Antiguo 05/03/2008, 00:06
 
Fecha de Ingreso: enero-2002
Mensajes: 1.125
Antigüedad: 15 años, 10 meses
Puntos: 18
Desplegar una foto al hacer click en ella

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]

Última edición por Bier; 05/03/2008 a las 00:12 Razón: complementar el mensaje
  #2 (permalink)  
Antiguo 05/03/2008, 01:04
Avatar de canon882  
Fecha de Ingreso: febrero-2007
Ubicación: Lima, Perú.
Mensajes: 152
Antigüedad: 10 años, 10 meses
Puntos: 0
Sonrisa Re: Desplegar una foto al hacer click en ella

Cita:
Iniciado por Bier Ver Mensaje
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'
  #3 (permalink)  
Antiguo 05/03/2008, 01:06
Avatar de HackmanC  
Fecha de Ingreso: enero-2008
Ubicación: Guatemala
Mensajes: 1.817
Antigüedad: 9 años, 10 meses
Puntos: 260
Sonrisa Re: Desplegar una foto al hacer click en ella

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>

Última edición por HackmanC; 05/03/2008 a las 01:11 Razón: slideshow
  #4 (permalink)  
Antiguo 05/03/2008, 01:33
Avatar de canon882  
Fecha de Ingreso: febrero-2007
Ubicación: Lima, Perú.
Mensajes: 152
Antigüedad: 10 años, 10 meses
Puntos: 0
De acuerdo Re: Desplegar una foto al hacer click en ella

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
  #5 (permalink)  
Antiguo 05/03/2008, 06:58
 
Fecha de Ingreso: enero-2002
Mensajes: 1.125
Antigüedad: 15 años, 10 meses
Puntos: 18
Re: Desplegar una foto al hacer click en ella

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.
  #6 (permalink)  
Antiguo 05/03/2008, 14:16
Avatar de HackmanC  
Fecha de Ingreso: enero-2008
Ubicación: Guatemala
Mensajes: 1.817
Antigüedad: 9 años, 10 meses
Puntos: 260
Sonrisa Re: Desplegar una foto al hacer click en ella

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,
  #7 (permalink)  
Antiguo 20/03/2008, 18:03
 
Fecha de Ingreso: enero-2002
Mensajes: 1.125
Antigüedad: 15 años, 10 meses
Puntos: 18
Re: Desplegar una foto al hacer click en ella

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.
  #8 (permalink)  
Antiguo 20/03/2008, 23:17
Avatar de canon882  
Fecha de Ingreso: febrero-2007
Ubicación: Lima, Perú.
Mensajes: 152
Antigüedad: 10 años, 10 meses
Puntos: 0
De acuerdo Re: Desplegar una foto al hacer click en ella

Cita:
Iniciado por Bier Ver Mensaje
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'
  #9 (permalink)  
Antiguo 21/03/2008, 15:31
 
Fecha de Ingreso: enero-2002
Mensajes: 1.125
Antigüedad: 15 años, 10 meses
Puntos: 18
Re: Desplegar una foto al hacer click en ella

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 15:43.