如何从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的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" />

而已!你完成了.

现在做一点解释来澄清你的代码无法正常工作的原因......

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

colorbox"rel"属性仅用于对已找到的颜色框项目进行分组.事实上,"rel"的值可能是"xyz" - 它只是彩盒组的任意名称.rel属性本身不会查找属于该组的项目,只是命名找到的项目.您可以使用颜色框功能和选择器来查找项目:

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

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

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

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