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.

[code lang=”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….