layer.photos(options) - 相册层

layer.photos(options) - 相册层

开发工具与关键技术：Visual Studio 前端

作者：盘子

撰写时间：2019年5月 15日

layer.photos(options) - 相册层，也可以称之为图片查看器。它的出场动画从layer内置的动画类型中随机展现。再看下面是一些关于layui.photos（options）-相册层的总结。

photos支持传入json和直接读取页面图片两种方式。

如果是json传入，代码示例如下：
$.getJSON(’/jquery/layer/test/photos.json’, function(json){
layer.photos({
photos: json4.
,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数） });
});
//而返回的json需严格按照如下格式：
{
“title”: “”, //相册标题
“id”: 123, //相册id
“start”: 0, //初始显示的图片序号，默认
“data”: [ //相册包含的图片，数组格式
{
“alt”: “图片名”,
“pid”: 666, //图片id
“src”: “”, //原图地址
“thumb”: “” //缩略图地址11. }12. ]13. }14.
如果是直接从页面中获取图片，那么需要指向图片的父容器，下面是从页面直接获取图片的代码截图，见截图如下：
你的img可以设定一些规定的属性（但不是必须的），语法如下：
<img layer-pid=“图片id，可以不写” layer-src=“大图地址” s rc=“缩略图” alt="图片名”>
也可以像上面那样直接拉图片过来，什么都不设置，因为它是可根据自己的需要而设置的，并不强制。
而且第二种方式的图片查看器显然更加简单，因为无需像第一种那样返回规定的json，但是他们还是有各自的应用场景的，你可以按照你的需求进行选择。另外，photos还有个tab回调，切换图片时触发。
layer.photos({
photos: json/选择器,
tab: function(pic, layero){
console.log(pic) //当前图片的一些信息
}
Layui.layer插件的应用可以实现很多功能，如这个案例还用到了以下的功能：
shade - 遮罩：

类型：String/Array/Boolean，默认：0.3

即弹层外区域。默认是0.3透明度的黑色背景（’#000’）。如果你想定义别的颜色，可以
shade: [0.8, ‘#393D49’]；如果你不想显示遮罩，可以shade: 0

shadeClose - 是否点击遮罩关闭：

类型：Boolean，默认：false

如果你的shade是存在的，那么你可以设定shadeClose来控制点击弹层外区域关闭。

time - 自动关闭所需毫秒：

类型：Number，默认：0

默认不会自动关闭。当你想自动关闭时，可以time: 5000，即代表5秒后自动关闭，注意单位是毫秒（1秒=1000毫秒）

id - 用于控制弹层唯一标识：

类型：String，默认：空字符

设置该值后，不管是什么类型的层，都只允许同时弹出一个。一般用于页面层和iframe层模式

anim - 弹出动画：

类型：Number，默认：0

我们的出场动画全部采用CSS3。这意味着除了ie6-9，其它所有浏览器都是支持的。目前anim可支持的动画类型有0-6 如果不想显示动画，设置 anim: -1 即可。另外需要注意的是，3.0之前的版本用的是 shift 参数：

anim: 0 平滑放大。默认

anim: 1 从上掉落

anim: 2 从最底部往上滑入

anim: 3 从左滑入

anim: 4 从左翻滚

anim: 5 渐显

anim: 6 抖动

isOutAnim - 关闭动画 （layer 3.0.3新增）：

类型：Boolean，默认：true

默认情况下，关闭层时会有一个过度动画。如果你不想开启，设置 isOutAnim: false 即可

在这个小案例中，给要查看的图片设置了个透明度为0.8，颜色为#fff的shade—遮罩层，图片展示方式为从上掉落的anime—弹出动画。当点药查看的图片时，弹出遮罩层，后图片从上面掉落，如下面的第一、二张图。因为第一张图片我是放的gfd动态图，图很小，可以把图片拉大（如第三张图），拉大的图片就可以前后点击 查看图片了（如最后那张图，有前后按钮，下面会显示图片的张数以及滑到的图片张数）。

最后是实现的效果图，见截图如下：（顺序左右上下）：