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

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

插件下载：jquery.zoomsl.plugin.zip

插件教程

基础应用

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类名，如果设置了类名，文本背景，文本标签，文本参数失效