JMiur [E]

Este es un modelo de zoom dinámico realizado sólo con CSS y que he visto en CSSPlay.

Este truco, no funciona en ninguna versión de Internet Explorer. Tanto en como en Firefox como en Opera, basta tocar cualquier borde de la miniatura para producir el efecto.






Como se ve, es sólo un proceso experimental pero, no deja de ser interesante.

El código CSS es el siguiente:
#magnifier {
display: inline; position: relative;
width: 48px; height: 180px; /* el tamaño mínimo */
z-index: 100; float: left; margin: 0;
background: url(URL_miniatura) no-repeat;
}

#magnifier img {
position: absolute;
width: 240px; height: 180px; /* el tamaño mínimo */
top: 30px; left:-240px;
}

#magnifier ul {padding: 0; margin: 0; border: 0; list-style-type: none;}

#magnifier li {
display: block; position: absolute;
width: 24px; height: 24px;
left: 24px; top:0;
background: transparent;
}

#magnifier li.one {left: 0;}
#magnifier li:hover {width: 24px; height: 24px; left: 0;}

#magnifier li.ten:hover {width: 24px; height: 24px; left: 24px;}

/* el efecto zomm de la imagen */
#magnifier li.one:hover img {width: 280px; height: 230px; left: -240px;}
#magnifier li.two:hover img {width: 300px; height: 290px; left: -216px;}
#magnifier li.three:hover img {width: 320px; height: 300px; left: -192px;}
#magnifier li.four:hover img {width: 340px; height: 325px; left: -168px;}
#magnifier li.five:hover img {width: 360px; height: 350px; left: -144px;}
#magnifier li.six:hover img {width: 380px; height: 365px; left: -120px;}
#magnifier li.seven:hover img {width: 400px; height: 380px; left: -96px;}
#magnifier li.eight:hover img {width: 420px; height: 400px; left: -72px;}
#magnifier li.nine:hover img {width: 460px; height: 440px; left: -48px;}
#magnifier li.ten:hover img {width: 500px; height: 480px; left: -48px;}
#magnifier li.eleven:hover img {width: 240px; height: 180px; left: -24px;}
Y este es el código HTML:
<div id="magnifier">
<ul><li class="one">
<ul><li class="two">
<ul><li class="three">
<ul><li class="four">
<ul><li class="five">
<ul><li class="six">
<ul><li class="seven">
<ul><li class="eight">
<ul><li class="nine">
<ul><li class="ten">
<ul><li class="eleven">
<img src="URL_imagen" />
</li></ul>
</li></ul>
</li></ul>
</li></ul>
</li></ul>
</li></ul>
</li></ul>
</li></ul>
</li></ul>
</li></ul>
</li></ul>
</div>

5 comentarios:

Gem@  

No está mal, pero ese parpadeo de la imagen sería ideal si fuera estático algo así como la imagen en mayor tamaño.

Responder
Identidad Creativa  

Hola jmiur! mirá estuve probando este tema de cargar las imágenes en un servidor son tener que utilizar las herramientas de blogger, el que utilicé es flickr pero la cuestión está en que si paso el mouse por la miniatura y luego le doy click melleva directamente a donde está alojada la imagen en tamaño más grande. Yo lo que quisiera saber es si hay algún otro método para ampliar la imagen que cargo sin que me linkee a donde está alojada, o sea como lo venía haciendo con blogger. Intenté bajar la resolucion a 800 como me aconsejaste, pero igual me aparece el cartel de que si la deseo abrir o bajar. Realmente no me gusta esto como queda y más por como lo vengo planteando en los post anteriores. Desearía que me pudieras orientar al respecto. Si podés fijate como lo venía planteando en mi blog. Desde ya muchas gracias y espero tu ayuda.

Responder
JMiur  

Qué se abrirá cuando haces click dependerá de la dirección que coloques. Todos los servicios proveen diferentes enlaces, algunos son a miniaturas, otros para descargar, otros para abrir la página con la imagen. El que debes buscar es el enlace directo a la imagen.

En Flickr no recuerdo exactamente dónde está pero abriendo una imagen cualquiera muestra todos los tamaños disponible, allí, copio la dirección de la imagen y esa es la que uso:

POR EJEMPLO

coloqué esa dirección en el enlace:
<a href="laimagen">
se abrirá en la misma ventana o sino:
<a href="laimagen" target="_blank">
se abrirá en una nueva ventana.

Responder
Identidad Creativa  

Muchas gracias, voy a probar. Hasta ahora lo que estoy probando es con hostearla en imageshak que es muy bueno, el problema lo tengo en que las miniaturas que me muestran en el post de blogger son algo más grande que las del blogger mismo, por lo que se me complican agruparlas de a pares (dos arriba, dos abajo) como lo vengo haciendo. Si quiero achicarlas manualmente es u´n lío ya que no puedo controlar que no se distorsionen, no las puedo achicar en forma proporcional. Si pudiera manejar esto sería grandioso. Si tienes una idea de como hacerlo te lo agradecerñe infinitamente. Espero tu respuesta y muchas gracias por tu tiempo.

Responder
JMiur  

Ya que estás en pruebas, el servicio que uso es Photobucket y también es recomendable.

Hay algunos servicios online que hacen miniaturas, ahora, por ejemplo, me acuerdo de
http://www.thumbalizr.com/

Otra alternativa es utilizar HTML. La etiqueta IMG admite dos parámetros: width y height que permiten mostrar las imágenes con un tamaño diferente.

Supongaos que tu imagen fuera de 800x600 pixeles:

<a href="laimagen">
<img src="laimagen" style="width:400px;"/>
</a>

la mostrará reducida a la mitad.

Ambas propiedades, son independientes, poniendo sólo una de ellas, el navegador calculará la dimensión de la otra para mantener la proporción. De esta manera, incluso pude "deformarse" por completo utilizando ambas propiedades con valores no proporcionales.

Esto hará que la carga del blog sea más lenta porque aunque se vea una miniatura, la imagen que se carga es la de la imagen real.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR