Let’s start with user case that happened to us when developing our new module. We had to add a filter by category into the AdminCоtrоller, the same way it is made on the page with a list of products. (more…)
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
<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">
// 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" />
// Simply run the plugin after all.
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.|