码迷,mamicode.com
首页 > 其他好文 > 详细

Layui 内置方法 - layer.photos(相册层)

时间:2020-03-12 11:33:03      阅读:953      评论:0      收藏:0      [点我收藏+]

标签:art   img   shift   属性   get   color   function   mic   链接   

相册层,也可以称之为图片查看器。它的出场动画从layer内置的动画类型中随机展现。photos支持传入json和直接读取页面图片两种方式。如果是json传入,如下:

1 $.getJSON(‘/jquery/layer/test/photos.json‘, function(json){
2   layer.photos({
3     photos: json
4     ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
5   });
6 }); 

返回的json需严格按照如下格式:

 1 {
 2   "title": "", //相册标题
 3   "id": 123, //相册id
 4   "start": 0, //初始显示的图片序号,默认0
 5   "data": [   //相册包含的图片,数组格式
 6     {
 7       "alt": "图片名",
 8       "pid": 666, //图片id
 9       "src": "", //原图地址
10       "thumb": "" //缩略图地址
11     }
12   ]
13 }

如果是直接从页面中获取图片,那么需要指向图片的父容器,并且你的img可以设定一些规定的属性(但不是必须的)。

 1 //HTML示例
 2 <div id="layer-photos-demo" class="layer-photos-demo">
 3   <img layer-pid="图片id,可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
 4   <img layer-pid="图片id,可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
 5 </div>
 6  
 7 <script>
 8 //调用示例
 9 layer.photos({
10   photos: #layer-photos-demo
11   ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
12 }); 
13 </script>


版权声明:本文为CSDN博主「杨林伟」的原创文章
原文链接:https://blog.csdn.net/qq_20042935/article/details/89448595

 

Layui 内置方法 - layer.photos(相册层)

标签:art   img   shift   属性   get   color   function   mic   链接   

原文地址:https://www.cnblogs.com/moppet/p/12467867.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!