BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Cloud Zoom, ampliar tus imágenes con clase

31/MAY/2010 6.163 visitas Ver comentarios
Cloud Zoom, ampliar tus imágenes con clase

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Cloud Zoom es un plugin para jQuery que se compara con otras versiones comerciales que hacen lo mismo como el conocido Magic Zoom. Su autor asegura que es más liviano que otro plugin similar, el jQZoom, y es más robusto en los distintos navegadores, además de tener más opciones configurables.

Características
* Funciona con la mayoría de los navegadores (probado en IE6 +, Firefox, Chrome, Opera, Safari).
* Fácil integración con HTML válido.
* 6Kb en la versión comprimida.
* Movimiento del zoom suavizado.
* Modo Galería.
* Tinte, enfoque suave y funciones de zoom interno.
* Totalmente accesible sin CSS o navegadores de texto solamente.
* Es completamente gratis.

¿Te interesa?
Mírate la demo que nos dejó su autor. Realmente pinta muy bien.

Código 1 - HTML
<html>
<head>
<!-- Load the Cloud Zoom CSS file -->
<link href="/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />
<!-- You can load the jQuery library from the Google Content Network.
Probably better than from your own server. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- Load the Cloud Zoom JavaScript file -->
<script type="text/JavaScript" src="/js/cloud-zoom.1.0.1.min.js"></script>
</head>
<body>
<!--
An anchor with class of 'cloud-zoom' should surround the small image.
The anchor's href should point to the big zoom image.
Any options can be specified in the rel attribute of the anchor.
Options should be specified in regular JavaScript object format,
but without the braces.
-->
<a href='/images/zoomengine/bigimage00.jpg' class = 'cloud-zoom' id='zoom1'
rel="adjustX: 10, adjustY:-4">
<img src="/images/zoomengine/smallimage.jpg" alt='' title="Optional title display" />
</a>
<!--
You can optionally create a gallery by creating anchors with a class of 'cloud-zoom-gallery'.
The anchor's href should point to the big zoom image.
In the rel attribute you must specify the id of the zoom to use (useZoom: 'zoom1'),
and also the small image to use (smallImage: /images/....)
-->
<a href='/images/zoomengine/bigimage00.jpg' class='cloud-zoom-gallery' title='Thumbnail 1'
rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage.jpg' ">
<img src="/images/zoomengine/tinyimage.jpg" alt = "Thumbnail 1"/></a>
<a href='/images/zoomengine/bigimage01.jpg' class='cloud-zoom-gallery' title='Thumbnail 2'
rel="useZoom: 'zoom1', smallImage: ' /images/zoomengine/smallimage-1.jpg'">
<img src="/images/zoomengine/tinyimage-1.jpg" alt = "Thumbnail 2"/></a>
<a href='/images/zoomengine/bigimage02.jpg' class='cloud-zoom-gallery' title='Thumbnail 3'
rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage-2.jpg' ">
<img src="/images/zoomengine/tinyimage-2.jpg" alt = "Thumbnail 3"/></a>
</body>
</html>

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018