如何打開來自url的特定圖片的colorbox圖庫？

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 ，而且在colorbox窗口中還有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頁，第一個鏈接到第二個畫廊。當第一頁中的鏈接被點擊時，第二個圖庫加載到圖像點擊（例如，4的圖像2）。如果是這樣的......

在頁面指向庫，使用等環節：

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

在您的畫廊頁面，使用getUrlParam從this answer，您的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(); 
    } 
}); 

然後確保您的所有圖庫商品都有類別和編號，例如：

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

就是這樣！你完成了。

現在一點解釋，以澄清爲什麼你的代碼是不工作...

通知在我的例子缺乏HTML的rel屬性上面。不要將「rel」colorbox屬性與html rel屬性混淆。這是可以理解的（同名），但這兩者在外觀上沒有關係（最好不要把它們看作是一樣的）。事實上，你甚至不需要html rel屬性。所以只需刪除它。

colorbox「rel」屬性僅用於對已找到的colorbox項目進行分組。實際上，「rel」的值可能是「xyz」 - 它只是您的colorbox組的任意名稱。 rel屬性本身不會查找屬於該組的項目，只是命名找到的項目。您可以使用與選擇的顏色框功能找到的項目：

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

這個代碼是找到與類gallery所有的DOM元素。現在沒有這個rel屬性，所有這些元素都會分開 - 你點擊一個元素，只看到那一個圖像。使用「相對」屬性，以便能夠看到所有發現的物品，當你點擊其中一個：

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

所以在你的第二和第三個例子的情況下，你只看到了1個圖像，因爲只有1個圖像被引用（通過href屬性 - 再次，rel屬性不抓取任何圖像）。希望有所幫助！