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 ...
随机推荐
- python selenium第一个WebDriver脚本
#coding=utf-8from selenium import webdriverimport timeimport osos.environ["webdriver.firefox.dr ...
- Linux基础命令---service
service service可以控制系统服务(打开.关闭.重启).service在尽可能可预测的环境中运行SystemV init脚本,删除大多数环境变量并将当前工作目录设置为根目录.脚本参数位于“ ...
- fastDFS errcode:9 path:Bad file descriptor errcode:22 path:Invalid argument
fastDFS errcode:9 path:Bad file descriptor errcode:22 path:Invalid argument <error>status:4 er ...
- 计算概论(A)/基础编程练习1(8题)/3:晶晶赴约会
#include<stdio.h> int main() { int w; scanf("%d", &w); || w==) { printf("%s ...
- android 实践项目四
android 实践项目四 本周主要是开发android baidumap实现公交的查询 1.权限的取得和对屏幕的支持 <uses-permission android:name="a ...
- IPMB接口协议总结
IPMB接口协议总结 IPMB,智能平台管理总线, 是ATCA(Advanced Telecom Computing Architecture)先进的电信计算平台的各FRU背板通讯的两组冗余I2C总线 ...
- Python3基础 str for 输出字符串中的每个字符
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- Linux必备知识
一.Linux命令行常用快捷键 在企业工作中,管理Linux时—般不会直接采用键盘.显示器登录系统,而是会通过网络在远程进行管理,因此,需要通过远程连接具连接到Linux系统中.目前最常用的Linux ...
- 字符编码(ASCII、ANSI、GB2312、UTF-8等)系统梳理(转载)
引言 在显示器上看见的文字.图片等信息在电脑里面其实并不是我们看见的样子,即使你知道所有信息都存储在硬盘里,把它拆开也看不见里面有任何东西,只有些盘片.假设,你用显微镜把盘片放大,会看见盘片表面凹凸不 ...
- hdu2552 (浮点数复杂运算的四舍五入)题解
三足鼎立 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...