Question

假设您有一个标准的颜色框库：

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

结果：与上述相同。

Answer 1

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

在指向图库的页面上，使用以下链接：

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

在您的图库页面中，使用来自this answer的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" />

就是这样！你已经完成了。

现在做一点解释，澄清为什么你的代码不起作用......

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

colorbox“rel”属性仅用于对已找到的颜色框项目进行分组。事实上，“rel”的值可能是“xyz” - 它只是彩盒组的任意名称。 rel属性本身不会查找属于该组的项目，只是命名找到的项目。您可以将颜色框功能与选择器一起使用来查找项目：

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

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

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

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

如何从URL打开特定图像的彩盒库？

1 个答案: