如何不使用彩盒将多个图库的图像组合起来

Question

需要您对此colorbox使用问题的专家帮助/建议。

我有一组画廊可以在屏幕上显示，每个画廊都是通过点击显示的相册的图片触发的。问题在于它将同一屏幕上出现的所有三个画廊的图像组合在一起，并显示每个专辑视图中的所有图像。 尝试改变每个专辑的触发器的'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张图片（4张+3张专辑）:(

试图通过上述参数更改'rel' ，但它没有工作

缺少什么我在这里我不是一个亲本，虽然请帮 任何提示/咨询/例如将不胜感激

编辑：。？。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个测试图像在里面。它具有相同的“相对”群呼与上述相同颜色框脚本：

<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个图像（来自这两个专辑）一起放在同一个colorbox窗口中，它应该只显示该特定专辑的图像。

而且也，它甚至不显示图像窗口中按图像的实际宽度/高度自动的，而它是表示一个尺寸宽/高:(

所有我缺少什么吗？是“相对”和“自动”属性设置为错误还是其他什么东西？

请帮助。

Answer 1

你的锚元素已经有一个rel属性，所以没有必要东西传递给彩盒。尝试用这种替代代码：

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

您借助于通过彩盒更换锚元素的相对价值的一些常数得到了适用于每一个“.album_view”元素。我不确定你的rel变量值是什么，但不知道这是什么，但这就是为什么一切都被分组在一起的原因。