我正在关注 Bootstrap 灯箱缩略图的在线教程。我多次输入完全相同的代码，但它不起作用。每当我单击图像时，它都会在新选项卡中打开，而不是在同一窗口中弹出。 这是代码，
<title>Lightbox</title>
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="F:/LightBox/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--
<link rel="stylesheet" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
-->
<link rel="stylesheet" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<a href="1.jpg"="image=1" data-title="my CATioN"><img src="1.jpg" alt="" class="img-thumbnail"</a>
</div>
</div>
</div>
<!--
<script src="F:/LightBox/lightbox.js"></script>
-->
</body>
我尝试在不同位置添加 lightbox.js 文件，但仍然不起作用。
最佳答案
您的 HTML 中有一些错误:
您的
img标记已关闭。您将其包含在
a标记href="1.jpg"="image=1"中，只需 链接到图像路径一次。您没有使用插件的数据属性:
data-lightbox=""位于您的a标记上。
查看文档:Lightbox2
工作示例
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-3">
<a class="img-thumbnail" href="http://placehold.it/350x350/f00" data-lightbox="example-set" data-title="title">
<img class="img-thumbnail" src="http://placehold.it/350x350/f00" alt="alt">
</a>
</div>
<div class="col-sm-3">
<a class="img-thumbnail" href="http://placehold.it/350x350/000" data-lightbox="example-set" data-title="title">
<img class="img-thumbnail" src="http://placehold.it/350x350/000" alt="alt">
</a>
</div>
<div class="col-sm-3">
<a class="img-thumbnail" href="http://placehold.it/350x350/ff0" data-lightbox="example-set" data-title="title">
<img class="img-thumbnail" src="http://placehold.it/350x350/ff0" alt="alt">
</a>
</div>
<div class="col-sm-3">
<a class="img-thumbnail" href="http://placehold.it/350x350" data-lightbox="example-set" data-title="title">
<img class="img-thumbnail" src="http://placehold.it/350x350" alt="alt">
</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.min.js"></script>关于javascript - 为什么 Bootstrap 灯箱缩略图不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38293139/