Javascript 如何不将多个库的图像与colorbox组合

需要您的专家帮助/建议解决此配色箱使用问题

我有一套图库要在屏幕上显示，每个图库都是通过点击显示的相册的图片来触发的。问题在于，它将出现在同一屏幕上的所有三个画廊的图像组合在一起，并在每个相册的视图中显示所有图像。 尝试更改每个专辑的触发器的“rel”属性，但仍然无法使其工作

假设代码如下所示：

var rel = $(this).attr('rel');

$(".album_view").colorbox({
   rel: rel,
   maxWidth: "800px",
   maxHeight: "600px",
   width: "auto",
   height: "auto"
});

<a  href="https://www.website.com/album/folder1/image1.jpg" class="album_view" rel="album_view_1024" target="album_post_1024" ><img src="https://www.website.com/album/folder1/image1.jpg" width="464"  height="261" /></a>
<a  href="https://www.website.com/album/folder1/image2.jpg" class="album_view" rel="album_view_1024" target="album_post_1024" ></a>
<a  href="https://www.website.com/album/folder1/image3.jpg" class="album_view" rel="album_view_1024" target="album_post_1024" ></a>
<a  href="https://www.website.com/album/folder1/image4.jpg" class="album_view" rel="album_view_1024" target="album_post_1024" ></a>
...
...
...
<a  href="https://www.website.com/album/folder2/image1.jpg" class="album_view" rel="album_view_2324" target="album_post_2324" ><img src="https://www.website.com/album/folder2/image1.jpg" width="464"  height="261" /></a>
<a  href="https://www.website.com/album/folder2/image2.jpg" class="album_view" rel="album_view_2324" target="album_post_2324" ></a>
<a  href="https://www.website.com/album/folder2/image3.jpg" class="album_view" rel="album_view_2324" target="album_post_2324" ></a>
...
...
...

在html中，它看起来像：

var rel = $(this).attr('rel');

$(".album_view").colorbox({
   rel: rel,
   maxWidth: "800px",
   maxHeight: "600px",
   width: "auto",
   height: "auto"
});

<a  href="https://www.website.com/album/folder1/image1.jpg" class="album_view" rel="album_view_1024" target="album_post_1024" ><img src="https://www.website.com/album/folder1/image1.jpg" width="464"  height="261" /></a>
<a  href="https://www.website.com/album/folder1/image2.jpg" class="album_view" rel="album_view_1024" target="album_post_1024" ></a>
<a  href="https://www.website.com/album/folder1/image3.jpg" class="album_view" rel="album_view_1024" target="album_post_1024" ></a>
<a  href="https://www.website.com/album/folder1/image4.jpg" class="album_view" rel="album_view_1024" target="album_post_1024" ></a>
...
...
...
<a  href="https://www.website.com/album/folder2/image1.jpg" class="album_view" rel="album_view_2324" target="album_post_2324" ><img src="https://www.website.com/album/folder2/image1.jpg" width="464"  height="261" /></a>
<a  href="https://www.website.com/album/folder2/image2.jpg" class="album_view" rel="album_view_2324" target="album_post_2324" ></a>
<a  href="https://www.website.com/album/folder2/image3.jpg" class="album_view" rel="album_view_2324" target="album_post_2324" ></a>
...
...
...

...
...
...
...
...
...

正如您在那里看到的，只显示相册的第一个图像，下面的图像仅用于加载（用于rel）到幻灯片放映。 但是，如果我单击第一张相册或第二张相册，它会在每个相册显示中显示所有7张图像（2张相册中的4+3张）：(

试图通过上述参数更改“rel”，但无效

我在这里遗漏了什么？我不是这方面的专家。请帮忙。 任何提示/建议/示例都将不胜感激

编辑：2017年9月15日。添加以下内容：

以下是在相册上单击/加载时将调用的脚本

<link rel="stylesheet" 
href="https://www.XYZsite.com/css/photo_gallery.css" />
<script 
src="https://www.XYZsite.com/js/gallery_js/photo_gallery_jquery.js">
</script>
<script>
    $(document).ready(function(){
    $(".image_view").colorbox({rel:'nofollow', maxWidth:"800px", maxHeight:"600px", width:"auto", height:"auto"});
    $('.image_view').click(function(e){
        //alert($(this).attr('title'));
        $('#popup_title').html($(this).attr('title'));
        $('#popup_content').html($(this).attr('content'));
    });

    $(".album_view").colorbox({maxWidth:"100%", maxHeight:"600px", width:"auto", height:"auto", current:"{current}/{total}"});
    $('.album_view').click(function(e){
        $('#popup_title').html($(this).attr('title'));
        $('#popup_content').html($(this).attr('content'));
    });
});

$（文档）.ready（函数（）{
$（“.image_view”）.colorbox（{rel:'nofollow'，maxWidth:“800px”，maxHeight:“600px”，width:“auto”，height:“auto”}）；
$（'.image_view'）。单击（函数（e）{
//警报（$（this.attr（'title'））；
$（'#popup_title'）.html（$（this.attr（'title'））；
$（'#popup_content'）.html（$（this.attr（'content'））；
});
$（“.album_view”）.colorbox（{maxWidth:“100%”，maxHeight:“600px”，width:“auto”，height:“auto”，current:{current}/{total}}）；
$（'.album_view'）。单击（函数（e）{
$（'#popup_title'）.html（$（this.attr（'title'））；
$（'#popup_content'）.html（$（this.attr（'content'））；
});
});

在后面的代码中，如果发布了任何相册，那么它应该在屏幕上显示第一个图像，并调用颜色来显示其余的图像。（下面的一个有2个测试图像）

在同一页上，还有另一个相册帖子，其中包含4个测试图像。它使用与以下相同的“rel”组调用上述相同的colorbox脚本：

<div id="album_post_1024" style="margin-top:8px;" class="bulletin_message_pic l hide_post1024" style="">
<a href="https://www.XYZsite.com/album/e4da3b7fbbce2345d7772b0674a318d5/c9f0f895fb98ab9159f51fd0297e236d/p02gsc0n.jpg" class="album_view" rel="album_view" ><img src="https://www.XYZsite.com/album/e4da3b7fbbce2345d7772b0674a318d5/c9f0f895fb98ab9159f51fd0297e236d/p02gsc0n.jpg" width="464" height="261" /></a>
<a href="https://www.XYZsite.com/album/e4da3b7fbbce2345d7772b0674a318d5/c9f0f895fb98ab9159f51fd0297e236d/s0775904_sc7.jpg" class="album_view" rel="album_view"  title="Pic title"></a>
<a href="https://www.XYZsite.com/album/e4da3b7fbbce2345d7772b0674a318d5/c9f0f895fb98ab9159f51fd0297e236d/tc32lew56_large.jpg" class="album_view" rel="album_view"  title="Pic title"></a>
<a href="https://www.XYZsite.com/album/e4da3b7fbbce2345d7772b0674a318d5/c9f0f895fb98ab9159f51fd0297e236d/tcl60e55_large.jpg" class="album_view" rel="album_view"  title="Pic title"></a>
</div> 

所以，问题是，如果我单击第一张专辑的图像或第二张专辑的图像，它会在同一个颜色框窗口中一个接一个地显示所有（2+4）6张图像（来自两张专辑），其中它应该只显示该特定专辑的图像

而且，它甚至不是根据图像的实际宽度/高度自动显示图像窗口，而是以一个大小显示所有宽度/高度：(

我在这里遗漏了什么？是“rel”和“auto”属性设置为错误还是其他

---

请提供帮助。

您的锚元素已具有rel属性，因此无需向Colorbox传递任何内容。请尝试用以下内容替换您的代码：

$(".album_view").colorbox({
   maxWidth: "800px",
   maxHeight: "600px",
   width: "auto",
   height: "auto"
});

---

您正在通过传递Colorbox来替换锚元素的rel值。一些常量值应用于每个“.album_view”元素。在不知道“this”是什么的情况下，我不确定rel变量值是什么，但这就是为什么所有元素都被分组在一起的原因。

锚元素已经有rel属性，因此存在no需要将任何内容传递给Colorbox。请尝试用以下内容替换您的代码：

$(".album_view").colorbox({
   maxWidth: "800px",
   maxHeight: "600px",
   width: "auto",
   height: "auto"
});

---

您正在通过传递Colorbox来替换锚元素的rel值。一些常量值应用于每个“.album_view”元素。我不确定rel变量值是什么，但不知道“this”是什么，但这就是为什么所有内容都被分组在一起的原因。

使用“rel”属性指定要显示为on的图片组如文章所示，第一组项目使用相册id rel=''相册视图1024“传递，第二组使用rel=“相册视图2324传递“。因此，rel值被传递到colorbox脚本中，并使colorbox生成带有相关图片的幻灯片。我尝试了您的建议，删除了.album_view脚本中的“rel”。但它仍在每个幻灯片放映中显示所有相册图片：（使用“rel”属性指定要显示为一个相册的图片组。如文章中所示，第一组项目使用相册id rel=''album\u view\u 1024'传递，第二组使用rel=“album\u view\u 2324”传递“。因此，rel值被传递到colorbox脚本中，并使colorbox生成带有相关图片的幻灯片。我尝试了您的建议，删除了.album_view脚本中的“rel”。但它仍在每个幻灯片放映中显示所有相册图片：(