免费可商业商品图片放大镜jquery插件zoomsl.js

俄罗斯的一款商品图片放大镜jquery插件,类似于淘宝商品在鼠标悬停上去,右侧显示细节放大镜窗口。zoomsl插件兼容IE8+、Chrome 1+、Firefox 2+、safari 2+浏览器。商业许可及个人许可均免费。

zoomsl_01.png

插件官网:http://zoomsl.sergeland.ru/

演示下载:http://zoomsl.sergeland.ru/example/

插件教程

基础应用

HTML代码结构:

<img class="my-foto" src="/images/image1-small.jpg"  data-large="/images/image1-big.jpg" title="商品细节">
<img class="my-foto" src="/images/image2-small.jpg"  data-large="/images/image2-big.jpg" title="商品细节">
<img class="my-foto" src="/images/image3-small.jpg"  data-large="/images/image3-big.jpg" title="商品细节">

jquery代码:

<script src="js/jquery.min.js"></script>
<script src="js/zoomsl-3.0.min.js"></script>
<script>
   jQuery(function(){   
      $(".my-foto").imagezoomsl({        
         zoomrange: [3, 3]
      });
   });   
</script>

画廊应用

HTML代码:

//当前图片
<img class="my-foto-container" src="/images/image1-small.jpg"  data-large="/images/image1-big.jpg" title="">

//小图
<img class="my-foto" src="/images/image1-small.jpg"  data-large="/images/image1-big.jpg" title="">
<img class="my-foto" src="/images/image2-small.jpg"  data-large="/images/image2-big.jpg" title="">
<img class="my-foto" src="/images/image3-small.jpg"  data-large="/images/image3-big.jpg" title="">

jQuery代码:

jQuery(function(){
	$(".my-foto-container").imagezoomsl();
	$(".my-foto").click(function(){
	   var that = this;
	   $(".my-foto-container").fadeOut(600, function(){
		 $(this).attr("src",              $(that).attr("src"))              
				.attr("data-large",       $(that).attr("data-large")) 
				
				//.attr("data-title",       $(that).attr("data-title"))      
				//.attr("data-help",        $(that).attr("data-help"))        
				//.attr("data-text-bottom", $(that).attr("data-text-bottom")) 
				
				.fadeIn(1000);				
	   });
   });	  
});   

参数说明

IMG标签属性:

属性
描述
data-large 大图url,留空则调用src的值
data-title 提示标题,留空不显示
data-help 文字提示,未指定Esley或为空时,请留空
data-text-bottom 显示在容器下的文字,留空不显示

插件参数

参数 默认值
描述
big图片加载参数
loadinggif data: image/gif 加载时big图片时显示的gif图片
loadopacity 0.1 当下载big图像时,重叠图像背景的透明度,支持0-1范围内的值
loadbackground #878787 在CSS格式加载big图像时,重叠图像的背景颜色
鼠标参数
cursorshade true 是否显示光标区域,默认显示,不显示设置为false
magnifycursor crosshair 小图片里鼠标指针视图的css样式名
cursorshadecolor #fff 光标区域的颜色
cursorshadeopacity 0.3 光标区域的透明度,可选0-1范围的值
cursorshadeborder 1px solid black 光标区域的外边框
stepzoom 0.5 当鼠标滚轮滚动时,按住鼠标滚轮的振动步骤,以0°°°°范围内的值
zoomrange [2, 2] 振动范围-[开始,结束,接受1°°范围内的整数和分数
zoomstart 2 蜂鸣发射装置,如果zoomstart < zoomrange[开始],那么zoomstart=zoomrange
disablewheel true 禁用鼠标滚轮滚动文件时,鼠标指针以上的小图片,如果没有设置的变焦范围,[开始]=zoomrange[结束]
提示参数
showstatus true 悬停在小图片上显示提示
showstatustime 2000 提示时间,单位毫秒
statusdivborder 1px solid black 边框样式的css样式代码
statusdivbackground #C0C0C0 提示容器背景的CSS颜色代码
statusdivpadding 4px 提示容器内边距的大小
statusdivfont bold 13px Arial 提示文字的css样式代码
statusdivopacity 0.8 提示窗口的透明度,可选0-1
大图片容器参数
magnifierpos right 大图容器显示位置,left/right
magnifiersize [small.width, small.height] 容器的宽高,默认为小图片的宽高
magnifiereffectanimate showIn 大图弹出效果,可选fadeIn/showIn/slideIn
innerzoom false 是否显示在小图片的容器里
innerzoommagnifier false 允许您通过小图片移动容器,鼠标指针后,透镜效果
descarea 指定一个ID或CSS格式的一个随机的区域,将显示一个容器,如果没有定义的width和height descarea区域,此选项将被忽略。(大图容器根据这个容器的位置)
zindex div的zindex
leftoffset 15 偏离左边的距离,单位px
rightoffset 15 偏离右边的距离,单位px
switchsides true 如果没有足够的空间显示容器的边缘时,将考虑到屏幕边缘的小图片的另一边。
magnifierborder 1px solid black 外容器边框的CSS样式代码
图片文本参数
textdnbackground #fff 文本容器的背景颜色
textdnpadding 10px 文本容器的内边距
textdnfont 13px/20px cursive CSS字体
CSS字体属性值,格式:
[font-style][font-variant][font-weight]font-size][line-height]font-family-inherit
动画速度参数
scrollspeedanimate 5 滚动big图片的动画速度,接受1°°°范围内的整数和分数
zoomspeedanimate 7 放大效果速度,可选1°°°范围内的整数和分数
loopspeedanimate 2.5 移动光标和大容器区域后的光标在透镜效果模式,以1°°°°范围内的整数和分数值
magnifierspeedanimate 350 大容器显示出来的时间,单位毫秒
CSS类名参数
classmagnifier magnifier 大图片容器的class类名,如果设置了类名,magnifierborder参数失效
classcursorshade cursorshade 在光标区域的CSS类名,如果设置了类名,cursorshadeborder,cursorshadeopacity,cursorshadecolor参数失效
classstatusdiv statusdiv 提示容器的CSS类名,如果设置了类名,statusdivborder,statusdivbackground,statusdivadding,statusdivfont,statusdivopacity失效
classtextdn textdn 文本标签容器的CSS类名,如果设置了类名,文本背景,文本标签,文本参数失效

网友留言(0条)

发表评论