JS插件开发之LightBox图片画廊

最新推荐文章于 2024-04-17 09:39:55 发布

不吃鱼的猫咪

最新推荐文章于 2024-04-17 09:39:55 发布

阅读量2.4k

点赞数

分类专栏： web前端文章标签： html 插件 lightbox

web前端专栏收录该内容

40 篇文章 2 订阅

订阅专栏

工程目录结构图：
这里写图片描述
lightBox.js封装了写好的插件，直接导入即可，这里就不在详细解释代码了，主要介绍一下怎么运用该插件，下载地址：http://download.csdn.net/detail/u012612399/9373624
如果要兼容IE6的话，需要导入DD_belatedPNG.js。
html代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="css/public.css" />
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
        <script type="text/javascript" src="js/lightBox.js" ></script>
        <title></title>
        <script>
            $(function(){
                var lightbox = new LightBox({
                    speed:200,
                    maxWidth:900,
                    maxHeight:600
                });
            });

        </script>
    </head>
    <body style="height: 1200px;">

        class="js-lightbox" width="100" height="100"表示这个元素要启用lightbox<br>
        data-role="lightbox" 表示这个元素要启用lightbox<br>
        data-source="img/2-1.jpg"原图的地址<br>
        data-group="group-2"标识当前是否属于一个组别<br>
        data-id="gvfdg"图片的唯一标识<br>
        data-caption="rew"当前图片的描述文字<br>

    <h1>1组图片</h1>   
    <div>
        <img class="js-lightbox" width="100" height="100"
                data-role="lightbox" 
                data-source="img/1-1.jpg"
                src="img/1-1.jpg"
                data-group="group-1"
                data-id="hfuisdhf"
                data-caption="hfiugyuhfa"
                />
        <img class="js-lightbox" width="100" height="100" data-role="lightbox" data-source="img/1-2.jpg" src="img/1-2.jpg" data-group="group-1" data-id="vbdhfg" data-caption="hfiugyuhfa"/>
        <img class="js-lightbox" width="100" height="100" data-role="lightbox" data-source="img/1-3.jpg" src="img/1-3.jpg" data-group="group-1" data-id="jrtfgh" data-caption="hfiugyuhfa"/>

    </div>
    <h1>2组图片</h1>   
    <div>
        <img class="js-lightbox" width="100" height="100"
                data-role="lightbox" 
                data-source="img/2-1.jpg"
                src="img/2-1.jpg"
                data-group="group-2"
                data-id="vsasde"
                data-caption="htfger"
                />

    </div>


        <!--遮层-->
        <!--<div id="G-lightbox-mask"></div>-->
        <!--弹出层-->
        <!--<div id="G-lightbox-popup">
            <div class="lightbox-pic-view">
                <span class="lightbox-btn lightbox-prev-btn lightbox-prev-btn-show"></span>
                <img class="lightbox-imgage" src="img/2-2.jpg" width="100%"/>
                <span class="lightbox-btn lightbox-next-btn lightbox-next-btn-show"></span>
            </div>
            <div class="lightbox-pic-caption">
                <div class="lightbox-caption-area">
                    <p class="lightbox-pic-desc">图片标题</p>
                    <span class="lightbox-of-index">当前索引：1 of 4</span>
                </div>
                <span class="lightbox-close-btn"></span>
            </div>
        </div>-->
    </body>
<!--[if IE 6]> 
<script type="text/javascript" src="js/DD_belatedPNG.js" ></script>
<script type="text/javascript">
DD_belatedPNG.fix("#G-lightbox-mask,#G-lightbox-popup .lightbox-pic-view .lightbox-btn,#G-lightbox-popup .lightbox-pic-caption");
</script> 
<![endif]--> 

</html>

不吃鱼的猫咪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS插件开发之LightBox图片画廊

工程目录结构图： lightBox.js封装了写好的插件，直接导入即可，这里就不在详细解释代码了，主要介绍一下怎么运用该插件，下载地址：http://download.csdn.net/detail/u012612399/9333581 如果要兼容IE6的话，需要导入DD_belatedPNG.js。 html代码如下：<!DOCTYPE html><html> <head>
复制链接

扫一扫