jQuery 灯箱插件答案

【问题标题】：JQuery Lightbox pluginjQuery 灯箱插件
【发布时间】：2019-12-16 06:34:58
【问题描述】：

美好的一天！我想寻求一些帮助，因为灯箱似乎对我不起作用，因为我可以在我的页面上看到图像，但单击它时没有任何反应。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/lightbox.css'); ?>">

</head>
<body>
    <div class="lightbox">
        <div><img src="<?php echo base_url('assets/images/image1.jpg'); ?>"></div>
        <div><img src="<?php echo base_url('assets/images/image2.jpg'); ?>"></div>
    </div>
    <script type="text/javascript" src="<?php echo base_url('assets/js/jquery-3.4.1.min.js'); ?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/js/lightbox.min.js'); ?>"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('.lightbox').lightbox();
    });
    </script>
</body>
</html>

【问题讨论】：

标签： jquery jquery-plugins lightbox2

【解决方案1】：

您需要使用图像上的 data-lightbox 属性来初始化灯箱，而不是使用 Javascript。只需删除您的 JS 代码并用这个替换您的 HTML

<div class="lightbox">
 <div><img src="<?php echo base_url('assets/images/image1.jpg'); ?>" data-lightbox="image1"></div>
 <div><img src="<?php echo base_url('assets/images/image2.jpg'); ?>" data-lightbox="image2"></div>
</div>

of（如果您想在同一个图库中同时拥有两张图片）：

<div class="lightbox">
 <div><img src="<?php echo base_url('assets/images/image1.jpg'); ?>" data-lightbox="myGallery"></div>
 <div><img src="<?php echo base_url('assets/images/image2.jpg'); ?>" data-lightbox="myGallery"></div>
</div>

【讨论】：