jQuery插件lightbox，评论照片点击放大轮播显示

最新推荐文章于 2022-09-21 16:42:22 发布

小曲曲

最新推荐文章于 2022-09-21 16:42:22 发布

阅读量403

点赞数

本文链接：https://blog.csdn.net/weixin_43848576/article/details/89301929

版权

下载插件

https://lokeshdhakar.com/projects/lightbox2/

引入css、js文件HTML、并初始化

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../dist/css/lightbox.min.css">
    <style>
        img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <a href="../dist/images/share_1.jpg" data-lightbox="roadtrip"><img src="../dist/images/share_1.jpg" alt=""></a>
    <a href="../dist/images/share_2.png" data-lightbox="roadtrip"><img src="../dist/images/share_2.png" alt=""></a>
    <a href="../dist/images/share_3.png" data-lightbox="roadtrip"><img src="../dist/images/share_3.png" alt=""></a>
    <script src="../dist/js/jquery-3.2.1.min.js"></script>
    <script src="../dist/js/lightbox.min.js"></script>
    <script>
        $(function() {
            // 初始化：注意初始化的时机
            lightbox.option({
                'resizeDuration': 200,
                'wrapAround': true,
                'albumLabel': '%1/%2', //图片下方显示 当前页码/总页码  1/3
                'disableScrolling': true, //禁止页面滚动
                'maxWidth': 600,
                'maxHeight': 1100,
                'positionFromTop': 50, //距离顶部的距离，如果不设置出不来
                'fitImagesInViewport': true,
                'resizeDuration': 300
            })
        })
    </script>
</body>

</html>

按钮图片，默认的

下载的包里有

如果出不来添加样式

 <style>
         #lightbox {
            position: absolute !important;
            left: 0 !important;
            top: 50px !important;
        }
    </style>