jquary插件Lightbox灯箱

最新推荐文章于 2024-06-23 18:12:33 发布

和蔼的阿木木o

最新推荐文章于 2024-06-23 18:12:33 发布

阅读量773

点赞数

分类专栏： js 文章标签：前端 servlet javascript

本文链接：https://blog.csdn.net/m0_59642141/article/details/126732886

版权

js 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

使用教程

Lightbox2Lightbox is a script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.https://lokeshdhakar.com/projects/lightbox2/

使用案例

    <style>
        div img {
            width: 200px;
        }
    </style>
</head>

<body>
    <a href="./img/1.jpg" data-lightbox="pic" data-title="这是一个大美女">
        <img src="./img/1.jpg" alt="" width="300">
    </a>

    <div>
        <a href="./img/pic1.jpg" data-lightbox="pic1" data-title="明星"><img src="./img/pic1.jpg" alt=""></a>
        <a href="./img/pic2.jpg" data-lightbox="pic2" data-title="明星"><img src="./img/pic2.jpg" alt=""></a>
        <a href="./img/pic3.jpg" data-lightbox="pic1" data-title="明星"><img src="./img/pic3.jpg" alt=""></a>
        <a href="./img/pic4.jpg" data-lightbox="pic1" data-title="明星"><img src="./img/pic4.jpg" alt=""></a>
    </div>
</body>
<!-- 先引入jquery 再引入lightbox -->
<!-- <script src="./js/jquery-3.6.1.js"></script>
<script src="./js/lightbox.min.js"></script> -->

<script src="./js/lightbox-plus-jquery.min.js"></script>
<script>
    lightbox.option({
        'resizeDuration': 200,
        'wrapAround': true,
        albumLabel: "当前第%1张，总%2张"
    })
</script>