知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    精简版图片展示插件Lightbox

    作者:佳明妈 来源:懒人建站 2010-04-01 人气:
    这是个精简版图片展示插件Lightbox,JS文件体积只有16K,JS体积变小,页面 能快速加载。a 标签中添加 rel="lightbox" 注意a标签的链接是指向图片路径。

    这是个精简版图片展示插件Lightbox,JS文件体积只有16K,单纯展示图片足够用了,JS体积变小,也使得页面能快速加载。太多的,体积过大的JS引用,会使页面加载过慢。

    引用的方法,参考演示

    单张图片的引用:
    单张图片就在 a 标签中添加 rel="lightbox" 注意a标签的链接是指向图片路径。
    <a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40"

    alt="" /></a>

    图片组的引用:
    图片组就在 a 标签中添加 rel="lightbox[plants]" 注意a标签的链接是指向图片路径。
    <a href="images/image-6.jpg" rel="lightbox[plants]" title="Press X to close"><img

    src="images/thumb-6.jpg" width="100" height="40" alt="Plants: image 4 0f 4 thumb" /></a>

    提示:screen.css这个样式非必须,不属于展示插件部分。xstyle.css这个样式是直属展示插件的样式,你可以修改这个样式控制展示效果的样式。

     

    精简版图片展示插件Lightbox-<a href=懒人建站" border="0" height="248" onclick="window.open('/uploads/allimg/100401/1_100401102140_1.jpg')" src="/uploads/allimg/100401/1_100401102140_1.jpg" style="cursor: pointer;" width="342" />

     

    ↓ 查看全文

    精简版图片展示插件Lightbox由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    精简版图片展示插件Lightbox-最新评论