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

[josetolven]

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 tod@s

[C2am]

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

[kseso?]

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/

[Tecktonikrazy]

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

[Tecktonikrazy]

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>