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

正如你在那里看到的那样，只显示了第一张专辑图片，其后面只是加载（用于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传递给应用于每个＆＃39; .album_view＆＃39;的常量值来替换锚元素的rel值。元件。我不知道你的rel变量值是什么，而不知道这个＆＃39;这个＆＃39;是的，但这就是为什么一切都聚集在一起。

如何不将多个画廊的图像与彩盒相结合

1 个答案: