Get Free Audit

Cloud Zoom jQuery Plugin: v1.0.3 vs. v2.1

Oct 31, 2012

3163 Mishel Soiko

Cloud Zoom jQuery Plugin: v1.0.3 vs. v2.1

A new jQuery plugin Cloud Zoom 2.1 version is released. Its demo looks nice. One bad apple spoils the cider though: Commercial License. Sure, there is a FREE License, however, “FREE” sounds good but is not actually a freebie.

In point of fact, I like this plugin. Not so long ago it was a real freeware (MIT License). I even used it in my Magento Quickview Pro extension. But now we have this Commercial License issue. However, if you want to have the effect on the demo in your gallery, I would strongly recommend you to purchase Cloud Zoom 2.1. Totally worth it.

Its size is smaller than size of the analogs. Realized effects, settings and cross-browser compatibility are better as well.

Here is an old Cloud Zoom version (MIT License) for all comers. I can hardly find the description for it on the site.

©2010-2012 by R Cecco  //
Download – v.1.0.3

Partner With Us Let's discuss how to grow your business. Get a Free Quote.
Talk to Andrey


All parameters are defined in rel attribute of the mail image id=”zoom01″.

zoomWidth in pixels The width of the zoom window in pixels. If it is missing, the width will be the same as the small image.
zoomHeight in pixels The height of the zoom window in pixels. If it is missing, the height will be the same as the small image.


position Default value ‘right’. Specifies the position of the zoom window relative to the small image. Allowable values are ‘left’, ‘right’, ‘top’, ‘bottom’, ‘inside’ or you can specifiy the id of an html element to place the zoom window.
adjustX in pixels Default value 0. Allows you to fine tune the x-position of the zoom window.
adjustY in pixels Default value 0. Allows you to fine tune the y-position of the zoom window.
tint #aa00aa Specifies a tint color which will cover the small image. Colors should be specified in hex format, e.g. ‘#aa00aa’. Effects with Blur Effect. are applied with some restrictions.
tintOpacity Tint Opacity. Default value 0.5. Where 0 is fully transparent, and 1 is fully opaque.
softFocus true/false Applies a subtle blur effect to the small image. Set to true or false. Effects with Tint Effect. are applied with some restrictions.
smoothMove Default value 3. Amount of smoothness/drift of the zoom image as it moves. The higher the number, the smoother/more drifty the movement will be. 1 = no smoothing.
lensOpacity Lens mouse pointer opacity. Default value 0.5. Where 0 is fully transparent, and 1 is fully opaque.
showTitle true/false Shows the title tag of the image.
titleOpacity Default value 0.5. Specifies the opacity of the title if displayed, where 0 is fully transparent, and 1 is fully opaque.

Magento 2 Development

Take your online store to the next level with BelVG Magento 2 Development

Visit the page
Andrey Dubina
Partner With Us Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Andrey


  1. Hello, can anyone tell me how to use the “zoomDiv” option from this plugin, I can’t find much information about it.
    Thank you.

  2. hi i am getting error in cloud zoom the error is that,

    Error: Uncaught TypeError: jQuery(…).CloudZoom is not a function

    jquery-… > eval (line 5, col 1)

    please can you explain me how can i solve this issue

    I have included following js

    I am using these funtion for cloud zoom

    jQuery(document).ready(function($) {
    jQuery('.cloud-zoom').CloudZoom({ showTitle: false });
    preload: true,
    preloadImage: 'getSkinUrl(‘md/quickview/images/loadingAnimation.gif’); ?>’,
    effect: ‘fade’,
    crossfade: true,
    slideSpeed: 350,
    fadeSpeed: 500,
    generateNextPrev: true,
    generatePagination: false,
    paginationClass: ‘pagination’


    Please tell me immediately, this is urgent for me


  3. Hi Mishel,

    Amazing script! How can I implement in my WordPress eCommerce theme as a product gallery?

    Many thanks,

  4. I can’t seem to get this script to work when I paste your sample code into a blank page. Theoretically it should work right as long as I include jquery also?

  5. Konstantin,

    As far as I understand you want to leave the attribute rel empty for other purposes.
    From this library code:

    it is seen, that parameters can be not only in the rel attribute, but can be written during the update

  6. Can you help me with version 1.0.3 of script? I’ve set the defaults in script, so I don’t need to write anything in rel attribute. But I need to write blank rel attribute, otherwise, script doesn’t work. I think, it is some issue with checking rel options in script, but I don’t know JQuery, so I can’t change it.

  7. Thanks for free version of this script, it wasn’t easy to find it in internet.

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *