关于jquery.etalage.js
etalage.js是一个jQuery插件，主要用于实现图片的放大镜效果。 它包含三个主要文件：jquery.js 、etalage.css 和jquery.etalage.min.js。 使用etalage插件，可以快速且方便地为网站图片添加放大镜效果，增强用户体验和视觉效果。 etalage.js可以提供一组图片的放大镜效果。
关键代码
<script src="js/jquery.etalage.min.js"></script>
<script>
jQuery(document).ready(function ($) {
$('#etalage').etalage({
thumb_image_width: 300, //缩略图的宽度
thumb_image_height: 400, //缩略图的高度
source_image_width: 900, //大图的宽度
source_image_height: 1200, //大图的高度
show_hint: true, //是否显示放大镜图标
click_callback: function (image_anchor, instance_id) {//回调的方法
alert('Callback example:\nYou clicked on an image with the anchor: "' + image_anchor + '"\n(in Etalage instance: "' + instance_id + '")');
}
});
});
</script>参数说明
<script type="text/javascript">
$('#etalage').etalage({
thumb_image_width: 330,//缩略图的宽度
thumb_image_height: 330,//缩略图的高度
source_image_width: 600,//大图的宽度
source_image_height: 600,//大图的高度
align:"left",//缩略图区域在屏幕的位置(好像只能是左右)
zoom_area_width: 300,//放大区域的宽度-使用：justify调整全行排满（只是行）
zoom_area_height: 500,//放大区域的高度
zoom_area_distance: 200,//放大区域距离缩略图的距离
zoom_easing: false,//淡入淡出效果
click_to_zoom: false,//点击一下才可以放大
zoom_element: "auto",//
show_descriptions: false,//是否在放大区域显示图片描述的文字
description_location: "top",//图片描述的文字在放大区域的位置
description_opacity: 1,//图片描述的文字在放大区域的透明度
small_thumbs: 3,//缩略图的个数
smallthumb_inactive_opacity: 0.7,//小缩略图未选中的透明度
smallthumb_hide_single: true,//
smallthumb_select_on_hover: false,//小缩略图反页效果用hover实现（而不是点击事件）
smallthumbs_position: "top",//略缩图的位置，下左右没有上
magnifier_opacity: 0.5,//选择放大区域的除了选中的区域的透明度
magnifier_invert: true,//是否在选择区域的显示对比差
show_icon: false,//
icon_offset: 20,//
hide_cursor: false,//是否隐藏鼠标箭头
show_hint: true,//
hint_offset: 15,//
speed: 200,//鼠标在缩略图位置移动的速度在放大区域的延迟单位是：ms
autoplay: true,//是否自动轮播，默认是true，也就是默认是自动
autoplay_interval: 1000,//自动轮播的时间间隔
keyboard: true,//
right_to_left: false,//轮播的方向是否是从右到左
});
</script>
