使用etalage插件快速做出jquery放大镜效果

用了大名鼎鼎的etalage jquery插件之后，制作一个自动转换的html放大镜就变得非常轻松了，最少情况下只需要引入三个文件就可以就可以实现放大和自动轮播效果了

这三个文件分别是：

1：jquery.js //jquery框架，相信每个前端都会有

2：etalage.css //etalage插件自带的样式表，用于给图片排版

3：jquery.etalage.min.js //最重要的文件，里面存有这个插件的所有实现方法

如果要使用此插件，我们只需要从网上下载第2个和第3个文件就好了，百度一搜就会有的，不过我在国外网站上看到它售价6美元，也不知道是不是个收费插件，当然要不要购买还是先看看它用起来是不是方便吧。

首先我们把要放大的图片放在一个ul列表里面，就像这样：

其中，每个<li>标签中放两个<img>，第一张的class必须是etalage_thumb_image，用于显示未放大的图片，第二个class必须是etalage_source_image,用于显示放大镜放大出来的部分；<img>标签中可以放一个title属性，里面写的内容可以在被放大出的图片底部显示出来

<ul id="example1">
			<li>
				<img class="etalage_thumb_image" src="images/image1_thumb.jpg" /><!--这里的src放的是略缩图 -->
				<img class="etalage_source_image" src="images/image1_large.jpg" title="这里放本图片的描述" />                             <pre name="code" class="javascript"><pre name="code" class="javascript">                                <!--第二行img的src是第一行图片的放大图，也就是放大镜显示出来的部分 -->
			</li>
			<li>
				<img class="etalage_thumb_image" src="images/image2_thumb.jpg" />
				 <img class="etalage_source_image" src="images/image2_large.jpg" title="这个图片的描述也可以放在图片顶部<br>而且中间还可以换行" />
			</li>
			<li>
				<img class="etalage_thumb_image" src="images/image3_thumb.jpg" />
				<img class="etalage_source_image" src="images/image3_large.jpg" />
			</li>
			<li>
				<img class="etalage_thumb_image" src="images/image4_thumb.jpg" />
				<img class="etalage_source_image" src="images/image4_large.jpg" />
			</li>
</ul>

我们把图片配置好以后，需要调用这个插件给出的唯一方法，就可以有效果了：

$(document).ready(function($){

	$('#example').etalage({
		thumb_image_width: 300,//缩略图的宽度
		thumb_image_height: 400,//缩略图的高度
		source_image_width: 900,//大图的宽度
		source_image_height: 1200//大图的高度	
	});
}

如上，只需要让<ul>标签执行一个etalage方法即可，而且最少只需要写四个属性即可完成一个酷炫的放大镜效果，还会自动的渐隐渐现效果，最可贵的是，我用ie9实测完全没有问题，只是打开速度慢了一些；

通常我们会把里面的调用放在$(document).ready()中，但如果要动态的修改图片的img或动态的添加ul里面的li，就不能把函数的调用放在$(document).ready()中，好在你把这个函数的调用放在哪都可以，而且在没调用之前，<ul>中的内容并不会显示，而且不占页面的大小，相当于display:none;

比如我们可以让这个放大效果延迟出现

window.setTimeout(function() {
	$('#example').etalage({
		thumb_image_width: 300,
		thumb_image_height: 400,
		source_image_width: 900,
		source_image_height: 1200
	});
}, 5000);

既然这个函数可以在任意一处调用，那么我们在动态修改src时，每次修改完都要调用一次，比如写在ajax的回调函数里面

下面再举一个设置多种参数的例子：

$('#example3').etalage({
		thumb_image_width: 250,
		thumb_image_height: 250,
		source_image_width: 900,
		source_image_height: 900,
		zoom_area_width: 500,//放大镜的大小
		zoom_area_height: 500,//放大镜的高度
		zoom_area_distance: 5,//大图显示的位置
		small_thumbs: 4,//略缩图的个数
		smallthumb_inactive_opacity: 0.3,//没有放大镜部分的透明度
		smallthumbs_position: 'left',//略缩图的位置，本例是在左边从上到下排列，默认是在底部从左到右排列
		show_icon: false,
		autoplay: false,//是否自动轮播，默认是true，也就是默认是自动
		keyboard: false,
		 zoom_easing: false//淡入淡出效果
	});

还有更强大的，我们可以按照插件提供的css模板来修改图片或者放大镜的样式，模板如下，当然一般的应用不需要做的这么复杂，按照第一个例子给出的写好就可以使用了

/*
 * Title: jQuery Etalage plugin CSS
 * Author: Berend de Jong, Frique
 * Author URI: http://www.frique.me/
 * Version: 1.3.2 (20120904.1)
 *
 * ------------------------------------ STYLE ------------------------------------
 * Edit this section to style your thumbnails, zoom area, magnifier etc.
 * If the id of your Etalage instance is different, do a find/replace on #etalage.
 * -------------------------------------------------------------------------------
 */

#example2{
	display: none;
	margin-bottom: 50px;
	margin-top: 50px;
}

#example2 .etalage_thumb{
	background: white url(../images/loading.gif) center no-repeat;
	border: 1px solid #666;
	padding: 0;
	-webkit-box-shadow: 0 0 10px #ddd;
	-moz-box-shadow: 0 0 10px #ddd;
	box-shadow: 0 0 10px #ddd;
}

#example2 .etalage_zoom_area,
.etalage_zoom_area{
	background: white url(../images/loading.gif) center no-repeat;
	border: 1px solid #666;
	padding: 0;
	-webkit-box-shadow: 0 0 10px #ddd;
	-moz-box-shadow: 0 0 10px #ddd;
	box-shadow: 0 0 10px #ddd;
}

#example2 .etalage_magnifier{
	background: #666;
	border: 1px solid #333;
}

#example2 .etalage_icon{
	background: url(../images/zoom2.gif) no-repeat;
	width: 24px;
	height: 24px;
}

/*
 * ------------------------------------ FUNCTIONALITY --------------------------------------
 * The following CSS serves to make Etalage function properly. Don't edit or edit carefully.
 * -----------------------------------------------------------------------------------------
 */

.etalage, .etalage_thumb, .etalage_thumb_image, .etalage_source_image, .etalage_zoom_preview, .etalage_icon, .etalage_hint{ display:none }
.etalage, .etalage ul, .etalage li, .etalage img, .etalage_hint, .etalage_icon, .etalage_description{ margin:0; padding:0; border:0; list-style:none }
.etalage, .etalage_magnifier div, .etalage_magnifier div img, .etalage_small_thumbs ul, ul .etalage_small_thumbs li, .etalage_zoom_area div, .etalage_zoom_img{ position:relative }
.etalage img, .etalage li{ -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -o-user-select:none; user-select:none; -webkit-user-drag:none; -moz-user-drag:none; user-drag:none }
.etalage, .etalage_small_thumbs li{ float:left }
.etalage_right{ float:right }
.etalage li{ position:absolute }
.etalage img{ vertical-align:bottom; max-width:none }
.etalage_magnifier{ cursor:default }
.etalage_magnifier div, .etalage_small_thumbs{ overflow:hidden }
.etalage_magnifier div img{ display:none }
.etalage_icon, .etalage_hint{ cursor:default; width:0; height:0; overflow:hidden }
.etalage_small_thumbs li.vertical{ float:none }
.etalage_zoom_area{ z-index:996 }
.etalage_zoom_area div{ overflow:hidden; z-index:997 }
.etalage_zoom_preview{ position:absolute; z-index:998 }
.etalage_zoom_img, .etalage_hint{ z-index:999 }
.etalage{ direction:ltr }
div.etalage_description{ position:absolute; bottom:0; left:0; z-index:999 }
div.etalage_description.rtl{ direction:rtl; text-align:right }