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】图片查看器
643 0
【layui】图片查看器
layui内部表单互动的实战案例:根据radio单选框自动改变input内容
layui内部表单互动的实战案例:根据radio单选框自动改变input内容
588 0
|
PHP 开发工具 对象存储
PHP 使用 OSS上传文件
PHP 使用 OSS上传文件
6243 0
|
前端开发
Layui 内置方法 - layer.load(加载层)
Layui 内置方法 - layer.load(加载层)
3034 0
|
4月前
|
前端开发 JavaScript 开发者
前端组件库 ——LayUI 知识点大全(四)
教程来源 https://zlpow.cn LayUI 2.8+/3.0 支持 CSS 变量主题定制、深浅色切换;提供移动端专用版本;支持按需引入与模块化加载;可开发自定义模块及集成 ECharts 等第三方插件,兼顾简洁性与扩展性,适合快速构建后台系统。
|
机器学习/深度学习 人工智能 自然语言处理
Emotion-LLaMA:用 AI 读懂、听懂、看懂情绪,精准捕捉文本、音频和视频中的复杂情绪
Emotion-LLaMA 是一款多模态情绪识别与推理模型,融合音频、视觉和文本输入,通过特定情绪编码器整合信息,广泛应用于人机交互、教育、心理健康等领域。
1866 11
Emotion-LLaMA:用 AI 读懂、听懂、看懂情绪,精准捕捉文本、音频和视频中的复杂情绪
|
JavaScript 前端开发
layui下拉框xm-select自定义搜索使用方法
【10月更文挑战第28天】`xm - select` 是基于 Layui 的下拉框增强插件,支持自定义搜索功能。实现步骤包括:1. 引入 Layui 和 xm - select 的核心文件;2. 创建下拉框的基本 HTML 结构;3. 使用 `layui.use` 函数初始化插件并配置搜索功能;4. 可选地进行高级自定义搜索优化,如模糊匹配、多字段搜索和实时更新数据。通过这些步骤,可实现灵活的下拉框搜索功能。
4562 1
|
前端开发 程序员 API
前端|基于 Layui 实现动态搜索选择框
网页端实现动态搜索选择框,要求下拉选项列表能根据用户输入内容动态刷新,最终提交的值必须是由选项列表中点选的。
786 3
|
前端开发 PHP
ThinkPHP6布局的方式之模板布局,全局配置方式,模板标签方式,动态方法布局
本文介绍了ThinkPHP6中实现模板布局的三种方式:全局配置方式、模板标签方式和动态方法布局,并通过示例代码展示了如何在项目中应用这些布局方式。
ThinkPHP6布局的方式之模板布局,全局配置方式,模板标签方式,动态方法布局