Standard Settings With Gallery

Thumbnail 1 Thumbnail 2 Thumbnail 3

  adjustX: 10, adjustY:-4 //x,y间距

Hover over the large image to see the zoom working.

These are the 'out of the box' settings, with the big image appearing to the right of the small image.

The appearance of the smaller image, lens and zoom window can be altered with regular CSS.

Tints

  tint: '#ff0000', //背景色
  tintOpacity:0.5 ,//透明度
  smoothMove:5,    //移动延时
  zoomWidth:480    //宽度

Add a tint of any colour (including black or white) to the small image. The intensity of tint is fully customisable, shown here in red at 50%.

In this example, the movement smoothness is set to a higher value for a gentle drifting effect.

Inner Zoom

  position: 'inside', //内部放大
  showTitle: false ,  //不显示title

Zoom position can be inside the smaller image, useful if you would rather not obscure any other content.

Soft Focus

  softFocus: true,   //是否模糊效果
  position:'anypos' ,//定位置id为anypos层放大

Apply a subtle soft-focus effect to the small image.

In this example, the zoom window position is specified as a div target which can be positioned anywhere. The movement smoothness is set to a lower value for a snappier feel.

cloud-zoom是一个jQuery图像缩放插件，可比Magic Zoom的产品。相对于流行jQZoom插件，cloud-zoom较小，有更多的功能和更强大的跨浏览器兼容性。