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 ...
随机推荐
- Mocha describe 生命周期
1 describe('test', function() { 2 // 在本测试块的所有测试用例之前执行且仅执行一次 3 before(function() { 4 5 }); 6 // 在本测试块 ...
- Xcode10.x适配的部分问题
因为我们项目是一个Workspace,由若干个库组成(组件化比较碎),又涉及到海外和国内(存在很多差异性),整个项目的编译是由每个库的脚本(每个库生成会支持32位和64位,每次编译前会清除历史缓存), ...
- torch7入门(安装与使用)
http://blog.csdn.net/real_myth/article/details/52291636 1.安装与使用 测试系统是ubuntu14.04LTS,默认安装在-/torch,当然我 ...
- Antlr4 SQL Query 解析实例
grammar MysqlQuery; @header{package com.antlr.mysql.query;} AS : A S; SELECT : S E L E C T; FROM : F ...
- C++设计模式 之 “对象创建”模式:Factory Method、Abstract Factory、Prototype、Builder
part 0 “对象创建”模式 通过“对象创建” 模式绕开new,来避免对象创建(new)过程中所导致的紧耦合(依赖具体类),从而支持对象创建的稳定.它是接口抽象之后的第一步工作. 典型模式 Fact ...
- 01: JavaScript实例
1.1 基础 JavaScript 实例 <body> <script type="text/javascript"> document.write(&qu ...
- js面向对象编程: js类定义函数时prototype和this区别?
参考文章的链接:http://www.2cto.com/kf/201406/307790.html 测试代码如下: function ListCommon2(afirst) { var first=a ...
- 【自动化】基于Spark streaming的SQL服务实时自动化运维
设计背景 spark thriftserver目前线上有10个实例,以往通过监控端口存活的方式很不准确,当出故障时进程不退出情况很多,而手动去查看日志再重启处理服务这个过程很低效,故设计利用Spark ...
- spring boot application.properties/application.yml 配置属性大全
来自官网 https://docs.spring.io/spring-boot/docs/current/reference/html/common-application-properties.h ...
- Python 逗号的几种作用
转自http://blog.csdn.net/liuzx32/article/details/7831247 最近研究Python 遇到个逗号的问题 一直没弄明白 今天总算搞清楚了 1.逗号在参数传 ...