一个基于 Simple Module 的图片预览组件,点此预览。
1. 下载并引用
通过 bower install
下载依赖的第三方库,然后在页面中引入这些文件:
<link rel="stylesheet" type="text/css" href="[style path]/gallery.css" />
<script type="text/javascript" src="[script path]/jquery.min.js"></script>
<script type="text/javascript" src="[script path]/module.js"></script>
<script type="text/javascript" src="[script path]/util.js"></script>
<script type="text/javascript" src="[script path]/gallery.js"></script>
2. 初始化配置
我们需要在页面的脚本里初始化 simple-gallery:
simple.gallery({
el: null, // * 必须(当前图片)
itemCls: "", // 需要预览图片的 Class 名称
wrapCls: "" // 需要预览图片上层元素的 Class 名称,可成组预览图片
save: true // 是否要保存图片的旋转, 默认为 true
});
el
元素可增加 data-image-name
data-image-size
data-image-src
属性,分别用于显示图片名称、控制图片尺寸、加载原图地址。
<a href="javascript:;" class="image" data-image-name="image02" data-image-size="559,332" data-image-src="images/02.png">
<img alt="image02" src="images/02.png" title="image02">
</a>
destroy()
恢复到初始化之前的状态。