灯箱效果

灯箱组件已经打包为单独的组件,可脱离UI总组件单独使用。
下载组件

单张图片

商品名称1
<div class="ui-piclist ui-piclist-100">
<div class="ui-piclist-item">
<div class="ui-piclist-image"><a href="/upfile/11.jpg" class="ui-lightbox" title="测试1"><img src="/upfile/1.jpg"/></a></div>
<div class="ui-piclist-body">
<div class="ui-piclist-title ui-text-hide ui-text-center">商品名称1</div>
</div>
</div>
</div>

两张图片(不同分组,互不冲突)

商品名称1
商品名称1
<div class="ui-piclist ui-piclist-100 ui-piclist-col-2">
<div class="ui-piclist-item">
<div class="ui-piclist-image"><a href="/upfile/11.jpg" class="ui-lightbox" data-name="lightbox[two]" data-title="每个人都有一个死角, 自己走不出来,别人也闯不进去。每个人都有一个死角, 自己走不出来,别人也闯不进去。" title="测试1"><img src="/upfile/1.jpg"/></a></div>
<div class="ui-piclist-body">
<div class="ui-piclist-title ui-text-hide ui-text-center">商品名称1</div>
</div>
</div>
<div class="ui-piclist-item">
<div class="ui-piclist-image"><a href="/upfile/22.jpg" class="ui-lightbox" data-name="lightbox[two]" title="我把最深沉的秘密放在那里。"><img src="/upfile/2.jpg"/></a></div>
<div class="ui-piclist-body">
<div class="ui-piclist-title ui-text-hide ui-text-center">商品名称1</div>
</div>
</div>
</div>

多张图片

商品名称1
商品名称1
商品名称1
商品名称1
<div class="ui-piclist ui-piclist-100">
<div class="ui-piclist-item">
<div class="ui-piclist-image"><a href="/upfile/11.jpg" class="ui-lightbox" data-name="lightbox" data-title="每个人都有一个死角, 自己走不出来,别人也闯不进去。每个人都有一个死角, 自己走不出来,别人也闯不进去。" title="测试1"><img src="/upfile/1.jpg"/></a></div>
<div class="ui-piclist-body">
<div class="ui-piclist-title ui-text-hide ui-text-center">商品名称1</div>
</div>
</div>
<div class="ui-piclist-item">
<div class="ui-piclist-image"><a href="/upfile/22.jpg" class="ui-lightbox" data-name="lightbox" data-hide="true" title="我把最深沉的秘密放在那里。"><img src="/upfile/2.jpg"/></a></div>
<div class="ui-piclist-body">
<div class="ui-piclist-title ui-text-hide ui-text-center">商品名称1</div>
</div>
</div>
<div class="ui-piclist-item">
<div class="ui-piclist-image"><a href="/upfile/33.jpg" class="ui-lightbox" data-name="lightbox" title="你不懂我,我不怪你。"><img src="/upfile/3.jpg"/></a></div>
<div class="ui-piclist-body">
<div class="ui-piclist-title ui-text-hide ui-text-center">商品名称1</div>
</div>
</div>
<div class="ui-piclist-item">
<div class="ui-piclist-image"><a href="/upfile/44.jpg" class="ui-lightbox" data-name="lightbox" title="每个人都有一道伤口, 或深或浅,盖上布,以为不存在。"><img src="/upfile/4.jpg"/></a></div>
<div class="ui-piclist-body">
<div class="ui-piclist-title ui-text-hide ui-text-center">商品名称1</div>
</div>
</div>
</div>
<script>
$(function()
{
$(".msg").click(function()
{
var title=$(this).attr("data-title");
var color=$(this).attr("data-color");
var align=$(this).attr("data-align");
var progress=$(this).attr("data-progress");
var time=$(this).attr("data-time");
$.toast(
{
'title':title,
'text':'错误内容',
'align':align,
'color':color,
'progress':progress,
'time':time
});
});
})
</script>

视频效果

测试视频播放
<div class="ui-piclist ui-piclist-100">
<div class="ui-piclist-item">
<div class="ui-piclist-image"><a href="http://img.ksbbs.com/asset/Mon_1605/25d705200a4eab4.mp4" class="ui-lightbox" data-auto="autoplay" data-mode="video"><img src="/upfile/1.jpg"/></a></div>
<div class="ui-piclist-body">
<div class="ui-piclist-title ui-text-hide ui-text-center">测试视频播放</div>
</div>
</div>
</div>

框架效果

测试框架
<div class="ui-piclist ui-piclist-100">
<div class="ui-piclist-item">
<div class="ui-piclist-image"><a href="/demo/iframe.html" class="ui-lightbox" data-mode="iframe" data-width="1200" data-height="700"><img src="/upfile/1.jpg"/></a></div>
<div class="ui-piclist-body">
<div class="ui-piclist-title ui-text-hide ui-text-center">测试框架</div>
</div>
</div>
</div>

参数说明

参数 默认值 是否必须 参数说明
data-name 分组名称
data-title 底部文字
data-hide false 是否显示底部文字
data-mode image 显示类型,可选值(image:图片,video:视频,iframe:框架网页)
data-auto 是否自动播放,可选值:autoplay
data-width 650 框架宽度
data-height 450 框架高度
data-id 获取指定ID文本框的值为图片