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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script type="text/javascript" src="http://kmage.net/js/cloud-zoom/cloud-zoom.1.0.3.min.js"></script> <link href="http://kmage.net/js/cloud-zoom/cloud-zoom.css" type="text/css" rel="stylesheet" /> // A main image. <a href="http://kmage.net/js/cloud-zoom/example/pic01_big.jpg" id="zoom01" class="cloud-zoom" rel="position:'right', adjustX:20, adjustY:-3, tint:'#FFFFFF', softFocus:1, smoothMove:5, tintOpacity:0.8"> <img src="http://kmage.net/js/cloud-zoom/example/pic01.jpg" / width="300" height="400"> </a> // Next, create a gallery, if necessary. ... <a href="http://kmage.net/js/cloud-zoom/example/pic03_big.jpg" rel="useZoom: 'zoom01', smallImage: 'http://kmage.net/js/cloud-zoom/example/pic03.jpg'" class="cloud-zoom-gallery"> <img src="http://kmage.net/js/cloud-zoom/example/pic03_small.jpg" /> </a> ... // Simply run the plugin after all. <script>jQuery('#zoom01, .cloud-zoom-gallery').CloudZoom();</script> |
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
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
Hello, can anyone tell me how to use the “zoomDiv” option from this plugin, I can’t find much information about it.
Thank you.
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,
Julian,
You can use zoomWidth and zoomHeight parameters for this.
How can i reduce the zoom? is it possible to edit that on the script?
Thanks
John,
You can try to update the script. You cam download CloudZoom v. 1.0.5 here.
Hello, Is that any one have idea why zoom-big window shows blur image. zoom showing blur image
Hi Mishel,
Amazing script! How can I implement in my WordPress eCommerce theme as a product gallery?
Many thanks,
Tom
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?
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
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.
Thanks for free version of this script, it wasn’t easy to find it in internet.
Very good script ….