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

October 31, 2012 Mishel Soiko Tips&Tricks
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.

     

 

 

 

 

Download – v.1.0.3

©2010-2012 by R Cecco  

 

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.


12 comments

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

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

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

  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. Hi Mishel,

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

    Many thanks,
    Tom

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

    //<![CDATA[
    jQuery.noConflict();
    jQuery(document).ready(function($) {
    jQuery('.cloud-zoom').CloudZoom({ showTitle: false });
    jQuery(function($){
    jQuery('#product_img_slider').slides({
    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

    Thanks,

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

Post a new comment

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