Cloud Zoom, ampliar tus imágenes con clase

Escrito por: Martín el 31-05-2010 07:31:25 y leído 1003 veces

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 XHTML

<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>

Categorías: Zoom • Lightbox • Jquery • •