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

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 of 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”颜色框属性与 html rel 属性混淆。这是可以理解的（同名），但两者在看起来并不相关（最好不要将它们视为相同）。实际上，您甚至不需要 html rel 属性。所以干脆删掉吧。

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

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

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

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

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