on Articles

JQuery zoom plugin – Cloud zoom

2 comments
zoom
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInShare on RedditShare on StumbleUpon

Cloud Zoom is a jQuery plugin comparable to commercial image zoom products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatability across browsers.

Zoom position can be inside the smaller image, useful if you would rather not obscure any other content, or it can be separated in outer element.

Below is a simple example HTML page which creates a single Cloud Zoom instance and gallery facility. Please study the page as it contains useful comments and tips.

<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.
        -->
    	
        
            
        
        
         
        <!--	
        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/....)
        -->
        
        
        
        
        
                          
        
        
        
    
    </body>
</html>

Cloud Zoom uses a small amount of CSS as specified in the cloud-zoom.css file. The contents of this file are self-explanatory, and you can play about with the values for different effects.

Please note, in tint and soft-focus modes, the lens will always have a fully transparent center, regardless of any background colors applied.

You can see the plugin in action here and here

The code is taken from the plugin developer site….

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInShare on RedditShare on StumbleUpon



  • SF

    High Resolution jQuery Image Viewer – http://www.ajax-zoom.com

  • Khagesh

    does any one knw how to add cloud zoom to a web page???