放大镜插件etalage的使用方法

效果图

---

如果有人需要etalage的话，可以给我留言；官方链接Etalage;
下载位置：github

---

1.使用方法

安装js，css，文件，分别是：
1：jquery.js //jquery框架，相信每个前端都会有
2：etalage.css //etalage插件自带的样式表，用于给图片排版
3：jquery.etalage.min.js //最重要的文件，里面存有这个插件的所有实现方法

2.html结构

<ul id="example1">
            <li>
                <img class="etalage_thumb_image" src="images/p_1.jpg" /><!--这里的src放的是略缩图 -->
                <img class="etalage_source_image" src="images/p_1.jpg" title="这里放本图片的描述" />
            </li>
            <li>
                <img class="etalage_thumb_image" src="images/p_2.jpg" />
                 <img class="etalage_source_image" src="images/p_2.jpg" title="这个图片的描述也可以放在图片顶部<br>而且中间还可以换行" />
            </li>
            <li>
                <img class="etalage_thumb_image" src="images/p_3.jpg" />
                <img class="etalage_source_image" src="images/p_3.jpg" />
            </li>
            <li>
                <img class="etalage_thumb_image" src="images/p_4.jpg" />
                <img class="etalage_source_image" src="images/p_4.jpg" />
            </li>
</ul>

3.使用方法+基本参数

调用参数的方法
$('#example1').etalage({
thumb_image_width: 300,//缩略图的宽度
thumb_image_height: 400,//缩略图的高度
source_image_width: 900,//大图的宽度
source_image_height: 1200,//大图的高度
});
基本参数

 $('#example1').etalage({
        thumb_image_width: 300,//缩略图的宽度
        thumb_image_height: 400,//缩略图的高度
        source_image_width: 900,//大图的宽度
        source_image_height: 1200,//大图的高度
        align:"left",//缩略图区域在屏幕的位置(好像只能是左右)
        zoom_area_width: 600,//放大区域的宽度-使用：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,//轮播的方向是否是从右到左
    });