灯箱效果

<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>

<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>

<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>