3

假设您有一个标准的彩盒库：

<a href="img1.jpg" rel="gallery">img1</a>
<a href="img2.jpg" rel="gallery">img2</a>
<a href="img3.jpg" rel="gallery">img3</a>

我的问题是，是否可以说从链接打开画廊，例如<a href="gallery#img2">link from other page</a>，重定向到画廊页面，打开以 img2 开头的颜色框，但在颜色框窗口中还有 rel 组的其余部分？

我希望我有道理！

谢谢

编辑：我在那里的触发器有点快......我的意思是给出我已经尝试过的例子（简化）：

<script>
    $(document).ready(function(){
        $.colorbox({
           rel: 'gallery',
        });
    });
</script>

结果：无法打开任何东西。

<script>
    $(document).ready(function(){
        $.colorbox({
           href: 'img2.jpg',
        });
    });
</script>

结果：在“href”中打开图像，但没有其他组。

<script>
    $(document).ready(function(){
        $.colorbox({
           rel: 'gallery',
           href: 'img2.jpg',
        });
    });
</script>

结果：同上。

4

1 回答 1

5

首先，让我们确保我理解... 2 页，第一个链接到第二个画廊。单击第一页中的链接时，第二个画廊将加载到单击的图像（例如，图像 2 of 4）。如果是这样的话...

在指向画廊的页面上，使用以下链接：

<a href="gallery?img=img1">img1</a>

在您的图库页面中，使用此答案中的 getUrlParam ，您的 JS：

//get parameter from url, returns null if not sent
function getUrlParam(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}

$(function() {
    var imgId = getUrlParam("img");

    //init the gallery
    $(".gallery").colorbox({
        rel: "gallery1"
    });

    //if an image id sent, activate that colorbox item
    if(imgId) {
        $("#" + imgId).click();
    }
});

然后确保您的所有画廊项目都有类和 id，例如：

<img id="img1" class="gallery" href="myImage" />

就是这样！你完成了。

现在稍微解释一下，以澄清为什么您的代码无法正常工作...

请注意上面的示例中缺少 htmlrel属性。不要将“rel”颜色框属性与 htmlrel属性混淆。这是可以理解的（同名），但两者在看起来并不相关（最好不要将它们视为相同）。实际上，您甚至不需要 htmlrel属性。所以只需删除它。

colorbox "rel" 属性仅用于对已找到的 colorbox 项目进行分组。事实上，“rel”的值可能是“xyz”——它只是你的颜色框组的任意名称。rel 属性本身并不寻找属于该组的项目，只是命名找到的项目。您可以使用带有选择器的 colorbox 函数来查找项目：

$(".gallery").colorbox();

此代码查找所有具有 class 的 dom 元素gallery。现在没有那个 rel 属性，所有这些元素都将是分开的——你点击一个，只能看到那个图像。使用“rel”属性可以在单击其中一个时查看找到的所有项目：

$(".gallery").colorbox({
    rel: "myWonderfulGallery"
});

因此，在您的第二个和第三个示例的上下文中，您只看到了 1 个图像，因为仅引用了 1 个图像（通过 href 属性 - 同样， rel 属性不抓取任何图像）。希望有帮助！

于 2012-07-29T21:08:03.527 回答