jQuery图片放大插件Cloud Zoom V3.1

所属分类:媒体-图片展示,图像

 8889  111  查看评论 (10)
jQuery图片放大插件Cloud Zoom V3.1 ie兼容6

使用方法

想要在网站上应用Cloud Zoom,只需要包含script脚本和CSS文件,同时调用 quickStart() 函数。可能还需要更改以下CSS类,才能使相关的图像指向正确的路径:

.cloudzoom-blank
.cloudzoom-ajax-loader

下面是一个Cloud Zoom的示例页面。

<!DOCTYPE html>
<html>   
    <head>
        <title>Cloud Zoom</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <style>body{ background-color:#323232}</style>
        <!-- Include jQuery. -->
        <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
        <!-- Include Cloud Zoom CSS. -->
        <link rel="stylesheet" type="text/css" href="cloudzoom.css" />
        <!-- Include Cloud Zoom script. -->
        <script type="text/javascript" src="cloudzoom.js"></script>
        <!-- Call quick start function. -->
        <script type="text/javascript">
            CloudZoom.quickStart();
        </script>    
    </head>    
    <body>
        <img class = "cloudzoom" src = "images/small/image1.jpg"
             data-cloudzoom = "zoomImage: 'images/large/image1.jpg'" />
    </body>
</html>

如果你想给图像加链接,Cloud Zoom将使用链接的href属性代替zoomImage属性:

<a href="image/large/image1.jpg">
<img class="cloudzoom" src="img/small/image1.jpg">
</a>

属性:

Cloud Zoom具有许多属性,设置这些属性可以改变图片的外观和视觉效果。

Cloud Zoom的属性可以在data-cloudzoom里指定属性,例如:

data-cloudzoom = "zoomImage: '/mypath.jpg', useZoom: '#zoom1'"

文本值/字符串在引用时应该加引号,如useZoom:“# myZoom”。数字、真假不用加,如zoomFlyOut:false

注意:Cloud Zoom的旧版本(2.1 1210171228)要求属性具有严格的JSON格式。虽然依然可以生效,但现在不推荐使用。

属性列表:

属性名类型描述默认值
zoomImagestring缩放图片的路径,如果没有指定的缩放图片,将使用小图(在图像元素中被指定的图片)" "
tintColorstring色彩效果#fff
tintOpacitynumber指定色彩的透明度,范围是0 - 1,0是完全透明,1是完全不透明。0.25
animationTimenumber动画效果的持续时间,以毫秒为单位。500
lensClassstring用于镜头的css类cloudzoom-lens
easeTime (DEPRECATED V3.0)number鼠标滑上时放大图像的时间。数字越大缓动越大,为0时没有缓动。500
zoomPositionnumber|string缩放窗口的指定位置,如果数字(0-15)的位置是相对于页面图像如图所示由以下关键(蓝色方块代表缩放窗口):

如果提供一个字符串,值将被用作一个选择器来确定元素的确切位置和大小的页面。


如果"inside"被指定,那么放大的图像将会出现在页面图像内,从3.0增加到1303151613,你也可以设置成zoomOffsetX:0

3
zoomOffsetXnumber允许您调整缩放窗口的水平位置。从3.0增加到1303151613并且在"inside"工作模式15
zoomOffsetYnumber允许您调整缩放窗口的垂直位置。从3.0增加到1303151613并且在"inside"工作模式0
zoomFullSizeDEPRECATED (see zoomSizeMode)boolean缩放窗口出现在全尺寸的放大图像。false
zoomFlyOutboolean将'flying'动画打开或关闭true
zoomClassstring用于缩放窗口的css类cloudzoom-zoom
zoomSizeModesrting

定义了缩放窗口和镜头大小的规则。

  • "lens"――CSS的镜头(.cloudzoom-lens)优先级、缩放窗口将被调整

  • "zoom"――CSS(.cloudzoom-zoom)优先级、透镜将调整

  • "full" ――放大窗口将最大化充分放大图像的大小

  • "image"――匹配小图像缩放窗口

lens
captionSourcestring

指定一个页面中的HTML属性图像作为文本标题。或者,指定一个选择器使用一些HTML内容的标题

title
captionTypestring指定标题类型,“attr”或“html”attr
captionPositionstring标题的位置, "top" 或"bottom"top
uriEscapeMethodboolean | string指定要使用的JavaScript逃离方法,"escape"或“encodeURI”(false = no escaping) ,不推荐使用特殊字符或图像路径有空格false
errorCallbackfunction

指定一个函数当发生错误时调用。函数将会收到具有以下属性的错误对象:

  • type:字符串名称错误,目前只有“IMAGE_NOT_FOUND”

  • $element:Cloud Zoom允许生成错误的元素

  • data:数据错误,如没有找到图像的文件路径

在调用CloudZoom.quickStart()之前可以设置一个全局错误处理程序,例如:

$.fn.CloudZoom.defaults.errorCallback = function(error){ alert(error.type); }; 

CloudZoom.quickStart();

function(error){}
variableMagnification (from V3.0)boolean是否允许变量放大true
startMagnification (from V3.0)string|number初始放大(小图像大小的乘数,不要给数字加引号)。“auto”将选择最好的质量并基于大图像尺寸放大。auto
minMagnification (from V3.0)string|number最低允许放大(小图像大小的乘数)。“auto”将确保镜头尺寸不得大于小图像。auto
maxMagnification (from V3.0)string|number最大允许放大(小图像大小的乘数)。“auto”将选择最好的质量基于大型图像尺寸放大auto
easing (from V3.0)number数字越大,移动的越平滑越慢8
lazyLoadZoomblooean延迟加载的zoom图像。如果这是真的,zoom图像只会在最初图像与小图像交互之后被加载,否则将立即加载页面加载。如果有许多需要加载的放大图像延迟加载可能有用。false
mouseTriggerEventstring鼠标事件用于触发放大。使用“mousemove”或"click"mousemove
disableZoomstring|boolean使用禁用的zoom. false = no disable, true = disable always, "auto" = disable 只有zoom图像是相同的大小或小于小图像。注意,如果你有设置放大水平大于1,zoom不会被禁用。false
galleryHoverDelaynumber使用galleryEvent:'mouseover'会推迟改变图片数毫秒,阻止图像加载请求浏览器造成的拥塞。200
permaZoomboolean如果为真,当鼠标划离小图时缩放窗口会保持打开状态false

zoomWidth

zoomHeight

number设置缩放窗口的宽度/高度,如果设置为"auto"则窗口宽度/高度与小图片宽度/高度一致0
lensHeightnumber设置镜头的宽度/高度0


相关插件-图片展示,图像

HTML5卡片人物介绍动画展示效果

HTML5卡片人物介绍动画展示效果ie9和ie10没有测试,ie8以下不支持。基于bootstrap框架制作
  图片展示
 10948  117

14种炫酷堆叠卡片切换动画特效

14种炫酷堆叠卡片切换动画特效
  图片展示
 7084  101

javascript动感相册

javascript实现动感相册,放大缩小,不依赖其它库
  图片展示
 8493  46

jQuery图片放大镜(原创)

使用背景定位制作的一个图片放大镜
  图片展示
 3641  36

讨论这个项目(10)回答他人问题或分享插件使用方法奖励jQ币

    话盲° 0
    2017/4/19 20:47:20

    效果不错!!!

    回复
    小贼0找打 0
    2017/4/14 19:03:51

    可以的,想下就下

    回复
    Sophie 0
    2017/3/2 16:23:35

    好想下载

        ┵疯子0
        2017/4/5 18:28:10

        想下就下

        小贼0找打0
        2017/4/14 19:03:07

        想下就下

    回复
    Fighting 0
    2017/2/6 10:09:54

    解压小红伞报毒什么鬼?

        西瓜0
        2017/2/6 10:30:36

        刚测试,下载文件一切正常。压缩文件中无任何.exe文件,都是js,jpg,html.请检查下是不是自己电脑问题。

    回复
    郭健@网络营销外包 0
    2017/1/22 16:02:46

    很棒的效果。。

    回复
    Honey_hoo 0
    2016/12/9 17:12:17
    这个好棒啊 商城类商品放大镜效果的好插件 回复
    PéiGǔangTíng 0
    2016/12/5 13:12:20
    效果不错!!! 回复
取消回复