layui图片显示
有些东西看文档可以实现,但当真不如自己写的实在。所以还是记录下来吧。
1. 图片赋值
<div id="layer-photos-demo" class="layer-photos-demo" style="padding: 10px;">
@if(empty($classroomSnapShots))
无数据
@else
@foreach($classroomSnapShots as $pictureUrl)
<img layer-src={{$pictureUrl}} src={{$pictureUrl}}
width="400px" height="224px" style="margin: 3px; border: black 2px" ;/> @endforeach
@endif </div>
2. 调用layui.photos
<script>
var $;
var layer;
layui.use(['element', 'jquery', 'form', 'layer'], function() {
$ = layui.jquery;
layer = layui.layer; layer.photos({
photos: '#layer-photos-demo'
, anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
});
});
</script>
layui图片显示的更多相关文章
- layui.table图片显示不全和404问题
1.图片显示不全 在使用layui.table组件中,加载的图片显示不全,需重新定义CSS如下: .layui-table-cell{ height: auto!important; white-sp ...
- layui图片懒加载-loading占位图
前言 使用layui的图片懒加载,发现未加载的图片没有loading占位图,显示的是裂图,看着不是很好.找了一些解决方法我统一记录一下. layui图片懒加载使用方法 layui.use(’flow’ ...
- 4.C#WinForm基础图片(显示和隐藏)
要求: 软件上有一张图片,默认是隐藏的.用户在文本框中输入身份证号(131226198105223452),点击按钮,如果年龄大于18岁,则显示图片. 知识点: 取当前年份,Date Time Now ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- Latex图片显示问题(1)
用latex编译后,若用dvipdf生成pdf文件,则其中有个eps图的左侧会显示不完全:若是用dvips--pspdf生成pdf文件,图像显示没问题. 这种情况的问题出在,加载 graphicx 宏 ...
- WPF 图片显示中的保留字符问题
在WPF中显示一张图片,本是一件再简单不过的事情.一张图片,一行XAML代码即可. 但是前段时间遇到了一件奇怪的事: 开发机上运行正常的程序,在某些客户机器上却显示不了图片,而且除了这个问题,其它运行 ...
- JS控制图片显示的大小(图片等比例缩放)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Android ListView滑动过程中图片显示重复错乱闪烁问题解决
最新内容建议直接访问原文:Android ListView滑动过程中图片显示重复错乱闪烁问题解决 主要分析Android ListView滚动过程中图片显示重复.错乱.闪烁的原因及解决方法,顺带提及L ...
- java web图片显示到浏览器
今天研究了一下午,图片显示问题. jsp中获取绝对路径的方法:String contextPath = request.getContextPath();String path = request.g ...
随机推荐
- 干货:Java多线程详解(内附源码)
线程是程序执行的最小单元,多线程是指程序同一时间可以有多个执行单元运行(这个与你的CPU核心有关). 在java中开启一个新线程非常简单,创建一个Thread对象,然后调用它的start方法,一个 ...
- ELK+Kafka学习笔记之搭建ELK+Kafka日志收集系统集群
0x00 概述 关于如何搭建ELK部分,请参考这篇文章,https://www.cnblogs.com/JetpropelledSnake/p/9893566.html. 该篇用户为非root,使用用 ...
- Mysql优化_内置profiling性能分析工具
如果要进行SQL的调优优化和排查,第一步是先让故障重现,但是这个并不是这一分钟有问题,下一秒就OK.一般的企业一般是DBA数据库工程师从监控里找到问题.DBA会告诉我们让我们来排查问题,那么可能很多种 ...
- linux 挂载硬盘 + 对硬盘 分区
parted命令可以划分单个分区大于2T的GPT格式的分区,也可以划分普通的MBR分区 fdisk命令对于大于2T的分区无法划分,所以用fdisk无法看到parted划分的GPT格式的分区 1. 用 ...
- CSS3 转换
CSS3 转换 版权声明:未经博主授权,内容严禁转载 什么是转换 转换时使元素改变形状.尺寸和位置的一种效果. 可以对元素应用 2D 或 3D 转换,从而对元素进行旋转.缩放.移动或倾斜. 2D 转换 ...
- Ubuntu18.04安装Openssl-1.1.1
1.查看版本 Ubuntu的版本是18.04.使用openssl version命令查看openssl版本,可以看到Ubuntu自带了openssl-1.1.0版本,因此安装新版本需要替换旧版本. 2 ...
- Python3基础 set 自动将重复合并掉 不支持索引
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- CSS形变与动画
形变 2D形变 matrix(): 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵 translate(): 指定对象的2 ...
- 矩阵二分快速幂优化dp动态规划
矩阵快速幂代码: int n; // 所有矩阵都是 n * n 的矩阵 struct matrix { int a[100][100]; }; matrix matrix_mul(matrix A, ...
- Codeforces Round #530 (Div. 1)
A - Sum in the tree 就是贪心选尽量让上面的点权尽量大,那么对于偶数层的点,其到根节点的和即为所有儿子中的最大值. #include<bits/stdc++.h> usi ...