Jquery ColorBox：顯示內嵌內容，如圖庫

我試圖使用名爲ColorBox的Jquery Lightbox（http://colorpowered.com/colorbox/），但我遇到了一些麻煩。Jquery ColorBox：顯示內嵌內容，如圖庫

我想使用燈箱顯示內嵌內容，但也有下一個和上一個按鈕出現。這樣，就像在照片庫中一樣，我將能夠瀏覽與下一個和上一個按鈕共享相同ID屬性的所有項目。如果我將它硬編碼到模板中，它會起作用，但是如果我將它自動粘貼到帖子末尾，它就不會。

我經常添加一個新元素，所以向開始添加一個新元素需要比我想要的更長的時間。所以我自動執行這個程序，生成的代碼看起來和你的完全一樣（在你的文章中），但是colorbox不起作用。現在是否有人如何解決它（如果可能）？幫助將不勝感激。

這工作：

<p><a class="group1" href="#box1">Grouped Photo 1</a></p> 
<p><a class="group1" href="#box2">Grouped Photo 2</a></p> 
<p><a class="group1" href="#box3">Grouped Photo 3</a></p> 

<div id="box1"> 
    Some text in box 1 Some text in box 1 
    Some text in box 1 
    Some text in box 1 
    Some text in box 1 
    Some text in box 1 
</div> 

<div id="box2"> 
    Some text in box 2 
    Some text in box 2 
    Some text in box 2 
    Some text in box 2 
    Some text in box 2   
</div> 

<div id="box3"> 
    Some text in box 3 
    Some text in box 3 
    Some text in box 3 
    Some text in box 3 
    Some text in box 3     
</div>

如果我編輯這樣上面的代碼它不

<div class="links"> 
<p><a class="group1">Grouped Photo 1</a></p> 
<p><a class="group1">Grouped Photo 2</a></p> 
<p><a class="group1">Grouped Photo 3</a></p> 
</div> 
<div class="boxes"> 
     <div> 
      Some text in box 1 Some text in box 1 
      Some text in box 1 
      Some text in box 1 
      Some text in box 1 
      Some text in box 1 
     </div> 

     <div> 
      Some text in box 2 
      Some text in box 2 
      Some text in box 2 
      Some text in box 2 
      Some text in box 2   
     </div> 

     <div> 
      Some text in box 3 
      Some text in box 3 
      Some text in box 3 
      Some text in box 3 
      Some text in box 3     
     </div> 
</div>

和Javascript：

$('.links a').each(function(index) { 
    $(this).attr("href","#box"+index); 
}); 
$('.boxes div').each(function(index) { 
    $(this).attr("id","#box"+index); 
}); 
$(".group1").colorbox({rel:'group1', inline:true, href:$(this).attr('href'), width:"60%"});

此經過的所有環節和爲它們添加與鏈接在href屬性中相同的id

來源

2012-05-27 user1412371

只是一個小忠告：我不會用顏色框，如果我是你。這在一段時間以來一直是屁股或我的痛苦。我搬到了影子箱。 Fancybox也不錯。 –

好的，會嘗試shadowbox thx :) – user1412371

Colorbox通過在調用DOM元素時查看DOM元素來設置其所有內部結構。這意味着如果在Colorbox的設置事件之後添加屬性，插件將不會看到它們。

確保推遲您對Colorbox的調用，直到您運行HREF和ID分配，並查看是否將行爲更改爲您的行爲。

來源

2012-05-28 04:15:12

對不起，我沒有添加該代碼。但我已經這樣做:) – user1412371

Colorbox將下一個和上一個按鈕添加到通過共享rel屬性創建的組中。你所要做的就是在第一個代碼示例中添加rel="group1"，其中有class="group1"，並且應該出現按鈕。

來源

2012-05-28 05:42:47 HaleFx

即使我沒有rel屬性並且'圖像'計數是正確的，按鈕也會顯示出來。沒有顯示任何內容，該框是空的。 Thx爲所有答案 – user1412371

沒關係，我發現了一個愚蠢的小錯誤。

$('.boxes div').each(function(index) { 
    $(this).attr("id","#box"+index); 
});

固定它：

$('.boxes div').each(function(index) { 
    $(this).attr("id","box"+index); 
});

來源

2012-05-29 14:19:20 user1412371

Jquery ColorBox：顯示內嵌內容，如圖庫

回答

相關問題