我似乎无法让多个 JQuery LightBox 画廊在 HTML 页面上工作。我已经尝试过不久前有人在类似帖子中提出的所有建议,但我仍然无法让它发挥作用!
这里有一些背景信息......
我开发了一个静态 HTML 页面,其中包含三个独立的灯箱画廊。第一个画廊加载并完美运行,但第二个和第三个画廊无法加载;既不显示超链接图像(触发灯箱画廊)也不显示该画廊中的图像,我只是得到“加载”动画。
我在 HTML 中调用 Lightbox javascript,并为第二个和第三个画廊复制了 Javascript 调用函数,称它们为“#gallery1 a”、“#gallery2 a”、“#gallery3 a”等,但它仍然没有不行。
我知道这三个画廊一起工作,因为如果我复制第一个画廊(包括画廊 1 的所有图像)并将其再次粘贴到下面,所有三个画廊都可以工作。当我在第二个和第三个画廊中更改我想要的照片的文件名时,问题就来了。
我在下面附上了来自静态页面的摘录<head>
以及来自静态页面的 html,这样你就可以看到我到目前为止所做的一切。
如果有人能指出让这三个画廊都能正常工作的地方,我将不胜感激。
提前谢谢了...
这是 HTML 的 HEAD:
<head>
$(function() {
$('#gallery a').lightBox();
});
$(function() {
$('#gallery1 a').lightBox();
});
$(function() {
$('#gallery2 a').lightBox();
});
$(function() {
$('#gallery3 a').lightBox();
});
</head>
现在对于 HTML:
<div id="gallery">
<ul>
<li>
<a href="portfolio/Bathroom install 2 watermarked/ian work photos 089.jpg">
<img src="portfolio/Bathroom install 2 watermarked/ian work photos 112.jpg"/>
</a>
<li><a href="portfolio/Bathroom install 2 watermarked/ian work photos 090.jpg"></a>
</li>
<li><a href="portfolio/Bathroom install 2 watermarked/ian work photos 111.jpg"></a>
</li>
<li><a href="portfolio/Bathroom install 2 watermarked/ian work photos 112.jpg"></a>
</li>
<li><a href="portfolio/Bathroom install 2 watermarked/ian work photos 113.jpg"></a>
</li>
<li><a href="portfolio/Bathroom install 2 watermarked/ian work photos 114.jpg"></a>
</li>
</ul>
</div>
<div id="gallery1">
<ul>
<li>
<a href="portfolio/Bathroom install 3 watermarked/ian work photos 089.jpg">
<img src="portfolio/Bathroom install 3 watermarked/ian work photos 182.jpg"/>
</a>
<li><a href="portfolio/Bathroom install 3 watermarked/ian work photos 183.jpeg"></a>
</li>
<li><a href="portfolio/Bathroom install 3 watermarked/ian work photos 184.jpg"></a>
</li>
<li><a href="portfolio/Bathroom install 3 watermarked/ian work photos 185.jpg"></a>
</li>
<li><a href="portfolio/Bathroom install 3 watermarked/ian work photos 186.jpg"></a>
</li>
<li><a href="portfolio/Bathroom install 3 watermarked/ian work photos 187.jpg"></a>
</li>
</ul>
</div>