Foros del Web » Creando para Internet » HTML »

Hacer un zoom a una imagen, como el sig. ejemplo

Estas en el tema de Hacer un zoom a una imagen, como el sig. ejemplo en el foro de HTML en Foros del Web. Esta es mi primera vez que acudo a un foro en busca de ayuda, despues de haber buscado y leido en muchos.Espero poder encontrar aquí ...
  #1 (permalink)  
Antiguo 21/10/2010, 13:41
 
Fecha de Ingreso: agosto-2009
Mensajes: 1
Antigüedad: 8 años, 4 meses
Puntos: 0
Hacer un zoom a una imagen, como el sig. ejemplo

Esta es mi primera vez que acudo a un foro en busca de ayuda, despues de haber buscado y leido en muchos.Espero poder encontrar aquí la ayuda necesaria.Muchas gracias a todos, anticipadas.Estoy haciendo una web con FrontPage y
Me gustaria hacer un zoom sobre una ó varias imagenes de una galeria, igual ó parecido a lo que se puede ver en estas web: http://www.edibyte.com/producto.aspx?idproducto=1833
tambien en esta otra web: http://www.magictoolbox.com/magiczoom/examples/ en la ultima imagen de abajo, es algo fantastico,recomiendo que veais esta web,.. descargue los archivos y llevo todo el dia,más de 10 horas intentando "traducirlo" para poder hacerlo con frontpage, y lo unico que he conseguido despues de tantas horas es un dolor de cabeza impresionante.
He rebuscado por todos lo sitios, buscando agun programita que lo pueda hacer, pero no he sido capaz.
Muchas gracias a [email protected]
  #2 (permalink)  
Antiguo 21/10/2010, 13:58
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Hacer un zoom a una imagen, como el sig. ejemplo

Me parece que es un tipo de lightbox
El último que muestras es pago, seguro habrá alguno parecido gratis.
Mucho no te ayude pero bue...
Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 21/10/2010, 14:14
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Hacer un zoom a una imagen, como el sig. ejemplo

Una consulta a nuestro santo patrón de los ignorantes (nótese que me incluyo):
http://www.google.es/search?q=zoom+o...ient=firefox-a
El 5º resultado es una recopilación de varios js:
http://www.tripwiremagazine.com/2010...e-effects.html
Sólo miré el segundo en ella, que se parece bastante al que puso de referencia:
http://www.professorcloud.com/mainsite/cloud-zoom.htm

Y casi estoy seguro, pero no lo podría garantizar, que en http://tympanus.net/codrops/ hay alguno.
Espero que sea lo que anda buscando

Edito para ampliar:
Creo que el que pone de ejemplo es el mismo que éste: http://www.mind-projects.it/projects/jqzoom/

Última edición por kseso?; 21/10/2010 a las 14:24
  #4 (permalink)  
Antiguo 23/10/2010, 13:18
Avatar de Tecktonikrazy  
Fecha de Ingreso: enero-2010
Mensajes: 224
Antigüedad: 7 años, 11 meses
Puntos: 3
Respuesta: Hacer un zoom a una imagen, como el sig. ejemplo

O algo mas simple que se me ocurre:

Imagen pequeña:

Código HTML:
<img class="imagenPequeña" src="http://www.google.com.mx/intl/en_com/images/srpr/logo1w.png" onclick="zoom('visible', this.src)"> 
Un div oculto que contiene la imagen grande:

Código HTML:
<div id="zoom"><a class="cerrar" href="javascript: zoom('hidden', '')">Cerrar</a><img id="imagenGrande" src=''"></div> 
Estilos:
Código HTML:
<style type="text/css">
#zoom {
visibility: hiddenm;
position: absolute;
top: 20%;
left: 35%;
width: 200px;
height: 300px;
}

.cerrar {
position: absolute;
top:0px;
right: 0px;
}

.imagenPequeña {
width: 120px;
}

#imagenGrande {
position: relative;
top: 50px;
}


</style> 
Y una funcion que muestre el div, y la imagen con zoom:

Código HTML:
<script language="javascript">
function zoom(visibilidad, imagen) {

document.getElementById('zoom').style.visibility = visibilidad;
document.getElementById('imagenGrande').src = imagen;

}
</script> 
Puedes probar el codigo en http://htmledit.squarefree.com/ solo copialo y pegalo. Es cuestion de que adaptes todo a tus necesidades
__________________
I LOVE HTML (How To Make Love)
  #5 (permalink)  
Antiguo 23/10/2010, 13:20
Avatar de Tecktonikrazy  
Fecha de Ingreso: enero-2010
Mensajes: 224
Antigüedad: 7 años, 11 meses
Puntos: 3
Respuesta: Hacer un zoom a una imagen, como el sig. ejemplo

Codigo completo:

<img class="imagenPequeña" src="http://www.google.com.mx/intl/en_com/images/srpr/logo1w.png" onclick="zoom('visible', this.src)">

<div id="zoom"><a class="cerrar" href="javascript: zoom('hidden', '')">Cerrar</a><img id="imagenGrande" src=''"></div>

<style type="text/css">
#zoom {
visibility: hidden;
position: absolute;
top: 20%;
left: 35%;
width: 200px;
height: 300px;
}

.cerrar {
position: absolute;
top:0px;
right: 0px;
}

.imagenPequeña {
width: 120px;
}

#imagenGrande {
position: relative;
top: 50px;
}


</style>


<script language="javascript">
function zoom(visibilidad, imagen) {

document.getElementById('zoom').style.visibility = visibilidad;
document.getElementById('imagenGrande').src = imagen;

}
</script>
__________________
I LOVE HTML (How To Make Love)

Última edición por Tecktonikrazy; 24/10/2010 a las 16:50

Etiquetas: zoom
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




La zona horaria es GMT -6. Ahora son las 08:13.