jQuery 灯箱插件
Posted
技术标签:
【中文标题】jQuery 灯箱插件【英文标题】：JQuery Lightbox plugin 【发布时间】：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>
【问题讨论】：
【参考方案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>
【讨论】：
以上是关于jQuery 灯箱插件的主要内容，如果未能解决你的问题，请参考以下文章
Featherlight是一个非常轻量级的jQuery灯箱插件。它'；它简单而灵活，易于使用。Featherlight具有最小的css，并且不使用内联样式，所有内容都以名称分隔，它'；s完