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

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

相册层,也可以称之为图片查看器。它的出场动画从layer内置的动画类型中随机展现。photos支持传入json和直接读取页面图片两种方式。如果是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": "" //缩略图地址
    }
  ]
}

如果是直接从页面中获取图片,那么需要指向图片的父容器,并且你的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>
目录
相关文章
|
JavaScript
【layui】图片查看器
【layui】图片查看器
607 0
【layui】图片查看器
|
前端开发
Layui 内置方法 - layer.load(加载层)
Layui 内置方法 - layer.load(加载层)
2943 0
|
PHP 开发工具 对象存储
PHP 使用 OSS上传文件
PHP 使用 OSS上传文件
6151 0
|
JavaScript 前端开发
layui下拉框xm-select自定义搜索使用方法
【10月更文挑战第28天】`xm - select` 是基于 Layui 的下拉框增强插件,支持自定义搜索功能。实现步骤包括:1. 引入 Layui 和 xm - select 的核心文件;2. 创建下拉框的基本 HTML 结构;3. 使用 `layui.use` 函数初始化插件并配置搜索功能;4. 可选地进行高级自定义搜索优化,如模糊匹配、多字段搜索和实时更新数据。通过这些步骤,可实现灵活的下拉框搜索功能。
4433 1
|
前端开发 程序员 API
前端|基于 Layui 实现动态搜索选择框
网页端实现动态搜索选择框,要求下拉选项列表能根据用户输入内容动态刷新,最终提交的值必须是由选项列表中点选的。
729 3
|
关系型数据库 MySQL 数据库
MySQL中find_in_set函数的使用
1.语法 FIND_IN_SET(str,strlist) (1)str 要查询的字符串 (2)strlist 字段名; 参数以”,”分隔 如 (1,2,6,8) 查询字段(strlist)中包含(str)的结果,返回结果为null或记录 假如字符串str在由N个子链组成的字符串列表strlist 中,则返回值的范围在 1 到 N 之间。 一个字符串列表就是一个由一些被 ‘,’ 符号分开的子链组成的字符串。如果第一个参数是一个常数字符串,而第二个是type SET列,则FIND_IN_SET() 函数被优化,使用比特计算。 如果str不在strlist 或strlist 为空字符串,则返回
1465 0
MySQL中find_in_set函数的使用
ThinkPHP 多应用配置,及不同域名访问不同应用的配置【详解】
本文详解了在ThinkPHP框架中配置多应用的方法,包括安装扩展、删除默认controller文件夹、创建多应用、修改配置文件以启用多应用、测试访问以及如何配置不同域名访问不同应用的步骤。
ThinkPHP 多应用配置,及不同域名访问不同应用的配置【详解】
|
前端开发
如何使用 CSS object-fit 进行图片的缩放和裁剪
如何使用 CSS object-fit 进行图片的缩放和裁剪
1533 0
如何使用 CSS object-fit 进行图片的缩放和裁剪