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

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (260)

Mysql (59)

DedeCms (33)

jQuery (74)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

layer.photos

打开边栏(ESC) 关闭边栏(ESC)

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

1,如果是json传入，如下：

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

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

{
  "title": "", //相册标题
  "id": 123, //相册id
  "start": 0, //初始显示的图片序号，默认0
  "data": [   //相册包含的图片，数组格式
    {
      "alt": "图片名",
      "pid": 666, //图片id
      "src": "", //原图地址
      "thumb": "" //缩略图地址
    }
  ]
}

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

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

3,如果就想点击页面上的某个元素，弹出一张图片，可以手动拼接json数据

点击元素，弹出营业执照图片

html

js代码

<script>
$(function(){
  // 弹出营业执照
  $('#businessLicenceImg').click(function(){
    //相册的json数据
    let json = {
      "start": 0, //初始显示的图片序号，默认0
      "data": [   //相册包含的图片，数组格式
        {
          "alt": "营业执照",
          "src": "/{$shop['businessLicenceImg']}", //原图地址
        }
      ]
    }
    // 调用图像层
    layer.photos({
      photos: json
    });
  })
})
</script>

赏

前一篇

layui分页css

后一篇

“最难不过坚持”

本人承接扒站仿站，php网站维护，病毒查杀，网站编辑，网站改版，html制作

layui分页css

layui弹出层layer.open