Crear un zoom en la imagen
Resuelto
alea31
Mensajes publicados
4
Estado
Miembro
-
paulineRipauste -
paulineRipauste -
Hola,
soy ilustradora y actualmente estoy creando un sitio web para presentar mis acuarelas.
Deseo crear páginas que consistan a la izquierda en pequeñas imágenes de mis creaciones y a la derecha, en un zoom accesible al hacer clic en las pequeñas imágenes. Encontré un sitio en flash que utiliza este procedimiento: http://www.kimberlygrant.com/index2.php
¿Es posible hacerlo en Dreamweaver en html?
Muchas gracias
Aléa
soy ilustradora y actualmente estoy creando un sitio web para presentar mis acuarelas.
Deseo crear páginas que consistan a la izquierda en pequeñas imágenes de mis creaciones y a la derecha, en un zoom accesible al hacer clic en las pequeñas imágenes. Encontré un sitio en flash que utiliza este procedimiento: http://www.kimberlygrant.com/index2.php
¿Es posible hacerlo en Dreamweaver en html?
Muchas gracias
Aléa
Configuración: Windows XP Internet Explorer 7.0
6 respuestas
-
Buenas noches,
No sé si este trozo de código es lo que buscas, lo he utilizado para mostrar imágenes en miniatura en su tamaño real en una nueva ventana.
<script> <!-- script creado por el webmaster de : www.creation-de-site.net --> <!-- allí encontrarás javascripts, imágenes, tutoriales y recursos gratuitos. --> <!-- Este script permite mostrar una imagen miniatura en su tamaño real en una nueva ventana --> function open_window(vuestra_pagina) { var altura_popup=800; var H = (screen.height - altura_popup) / 2; var ancho_popup=800; var L = (screen.width - ancho_popup) / 2; pop_up = window.open(vuestra_pagina,"Popup","status=yes,scrollbars=yes,resizable=no,height="+altura_popup+",width="+ancho_popup+",top="+H+",left="+L); } </script>
El código debe colocarse en el encabezado del archivo html, entre las etiquetas <head> y </head> y el navegador debe aceptar las ventanas emergentes para que la imagen pueda agrandarse al hacer clic sobre ella.
Luego, tienes entre las etiquetas <body> y </body> un código parecido a este.
Aquí busca las imágenes y las muestra en miniatura, y al mismo tiempo indica que cuando se hace clic en ellas debe utilizarse la apertura de la ventana emergente para mostrar el tamaño real.
<img src="..\images\image1.jpg" width="200px" onClick="open_window('../images/image1.jpg');"> <img src="..\images\image2.jpg" width="200px" onClick="open_window('../images/image2.jpg');"> <img src="..\images\image3.jpg" width="200px" onClick="open_window('../images/image3.jpg');"> <img src="..\images\image4.jpg" width="200px" onClick="open_window('../images/image4.jpg');">
Deberás añadir después de cada imagen en miniatura la líneaonClick="open_window('../images/image4.jpg')
para que el aumento funcione.
Es un poco complicado a primera vista, pero espero que te sea útil.
Buenas noches.-
-
Bonjour,
Necesito también su ayuda, tengo un sitio web www.ripauste.fr y me gustaría agregar un zoom. Tengo el código:
<style type="text/css">
#jqZoom_vignettes{
clear: both;
}
#jqZoom_vignettes img{
width: 75px;
}
</style>
<script type='text/javascript' src='../site/jqzoom/js/jquery-1.6.js'></script>
<script type='text/javascript' src='../site/jqzoom/js/jquery.jqzoom-core.js'></script>
<link rel="stylesheet" type="text/css" href="../site/jqzoom/css/jquery.jqzoom.css">
<script type="text/javascript">
$(document).ready(function(){
$('.jqZoom_zoom').jqzoom();
});
</script>
<a href="*UrlZoom*" class="jqZoom_zoom" title="*NomProduitBrut*" rel="jqZoom_gallerie">
<img src="*UrlIllustration*" title="*NomProduitBrut*">
</a>
<div id="jqZoom_vignettes">
<a class="zoomThumbActive" href="javascript:void(0);" rel="{gallery: 'jqZoom_gallerie', smallimage: '*UrlIllustration*',largeimage: '*UrlZoom*'}"><img src="*UrlIllustration*"></a>
<a href="javascript:void(0);" rel="{gallery: 'jqZoom_gallerie', smallimage: '*UrlIllustration2*',largeimage: '*UrlZoom2*'}"> <img src="*UrlIllustration2*"></a>
<a href="javascript:void(0);" rel="{gallery: 'jqZoom_gallerie', smallimage: '*UrlIllustration3*',largeimage: '*UrlZoom3*'}"> <img src="*UrlIllustration3*"></a>
<a href="javascript:void(0);" rel="{gallery: 'jqZoom_gallerie', smallimage: '*UrlIllustration4*',largeimage: '*UrlZoom4*'}"> <img src="*UrlIllustration4*"></a>
<a href="javascript:void(0);" rel="{gallery: 'jqZoom_gallerie', smallimage: '*UrlIllustration5*',largeimage: '*UrlZoom5*'}"> <img src="*UrlIllustration5*"></a>
</div>
Y quiero insertarlo en mis fichas de productos... pero no funciona... Me agrega fotos debajo de la foto para zoom...
¿Alguien puede ayudarme?
¡Gracias de antemano!
Pauline
-
-
Hola,
en HTML podrías tener a la izquierda las pequeñas imágenes (miniaturas de las imágenes reales o detalles de las imágenes reales) que, cuando se pasan por encima con el cursor, muestran la imagen completa en la parte derecha.
esto se puede hacer con Dreamweaver u otro editor HTML.
para ello, debes utilizar hojas de estilo (CSS).
pero para manejar el clic sin recargar la página, necesitarás usar JavaScript.
por cierto, esto se cargará más rápido que Flash.
--Seguro que hay pandas para no depender de nada Y un por qué no que dure hasta mañana
-
-
Estoy en este momento en mi lugar de trabajo (qué gran palabra ^_^), voy a revisar esta noche en las páginas que hice en clase para recuperar este fragmento de código, creo que también lo he utilizado.
Que tengas un buen día. -
He encontrado el código utilizado para hacer una especie de galería de imágenes, pero no es práctico de usar, sería necesario reeditarlos cada vez que se añada una imagen para crear la miniatura y la imagen a tamaño real.
Intentaré automatizarlo esta semana, no he tenido mucho tiempo para trabajar en ello esta noche.
Buenas noches. -
Gracias a todos por su ayuda, encontré la solución en el sitio
https://www.lecodejava.com/
Que tengan un buen día, Aléa
