Skip to content

a simple gallery widget based on Simple Module

License

Notifications You must be signed in to change notification settings

mycolorway/simple-gallery

Repository files navigation

simple-gallery

一个基于 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()

恢复到初始化之前的状态。