如何不将多个画廊的图像与颜色框结合起来

Question

在此颜色框使用问题上需要您的专家帮助/建议。

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

假设代码如下：

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

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

在 html 中，它看起来像：

<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>
...
...
...

正如您在此处看到的那样，仅显示相册的第一张图片，其后续图片仅用于加载 (for 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'));
    });
});

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

<div id="album_post_1156" style="margin-top:8px;" class="bulletin_message_pic l hide_post1156" style="">
<a href="https://www.XYZsite.com/album/e4da3b7fbbce2345d7772b0674a318d5/ea5d2f1c4608232e07d3aa3d998e5135/c1-jpg_071724.jpg" class="album_view" rel="album_view" ><img src="https://www.XYZsite.com/album/e4da3b7fbbce2345d7772b0674a318d5/ea5d2f1c4608232e07d3aa3d998e5135/c1-jpg_071724.jpg" width="400" height="300" /></a>
<a href="https://www.XYZsite.com/album/e4da3b7fbbce2345d7772b0674a318d5/ea5d2f1c4608232e07d3aa3d998e5135/c2-jpg_071721.jpg" class="album_view" rel="album_view"  title="Pic title"></a>
</div> 

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

<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”属性是否设置为错误或其他？

请帮忙。

Answer 1

你的锚元素已经有一个 rel 属性，所以不需要向 Colorbox 传递任何东西。尝试用以下代码替换您的代码：

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

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