效果图
如果有人需要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" />
<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,//轮播的方向是否是从右到左
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)