jquary插件Lightbox灯箱

jquary插件Lightbox灯箱jquary灯箱插件使用教程

使用教程

Lightbox2Lightbox is a script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.jquary插件Lightbox灯箱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>

今天的文章jquary插件Lightbox灯箱分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/8411.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注