Question

我似乎无法在HTML页面上使用多个JQuery LightBox库。我已经尝试了similar post有人做了一段时间的所有建议，但我仍然无法让它工作！

这里有一些背景信息......

我开发了一个静态HTML页面，其中包含三个独立的Lightbox库。第一个画廊加载并完美地工作，但第二和第三画廊无法加载;既没有显示超链接图像（触发灯箱库），也没有显示那个图库中的图像，我只是得到了'加载'动画。

我在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>

如何使多个jQuery LightBox库在一个页面上工作

0 个答案: