彩盒图像显示不工作

Question

我的 html 中有一个简单的 'a' 标签，就像这样

<a class='gallery' href='image.jpg'>photo</a>

我的jquery是这个...

 $(document).ready(function() {
 $('a.gallery').colorbox();
 });

但是，它只是在新 window 中打开图像。

我的导入是这样的...

<link rel="stylesheet" href="colorbox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>

就下载而言，我把它解压到我网站其余文件所在的文件夹中。

Answer 1

我想你的js资源没有找到。尝试使用 CDN 并检查您的 js 路径。

我在这里放了一个工作示例。

$(document).ready(function() {
  $('a.gallery').colorbox();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js"></script>
<a class='gallery' href='http://www.telegraph.co.uk/content/dam/Travel/galleries/travel/hubs/thebigpicture/the-big-picture-photography-competition-round-393/Fary-Afshar-xlarge.jpg'>photo</a>

彩盒图像显示不工作

Colorbox image display not working

html

css

jquery

colorbox