如何以幻燈片形式在Colorbox中顯示多個div？

Question

假設我有一個由類.e.g標識的div列表'.myclass'

在每個div中將會是一些html內容而不是圖像。 我該如何着手打開colorbox（），以便點擊箭頭時，他們會彈出divs？

我看了看下面的帖子這是同樣的問題，但他的解決方案沒有給我線索，他是如何得到它的工作：Duplicate question

是顏色框，甚至正確的插件呢？

Answer 1

這是我能得到的最好的。我必須用'rel'對它進行分組，併爲每個想要分組的div調用一次colorBox。

http://jsfiddle.net/briguy37/rc5m7/

UPDATE

我更新的基礎上面搗鼓亞當的解決方案。他使用.each和.find很好地允許遍歷同一個className的div而不是唯一的id。你可以看到我在這裏的原始解決方案：http://jsfiddle.net/rc5m7/13/

Answer 2

UPDATE：

我知道你已經接受一個答案，但這裏有一個更清潔的方式比目前公認的答案：

http://jsfiddle.net/rc5m7/14/

HTML：

<div class="colorbox">Div #1 
    <div style="display:none"> 
      Data#1 inside div. This is just a test. 
    </div> 
</div> 

<div class="colorbox">Div #2 
    <div style="display:none"> 
      Data#2 inside div. This is just a test. 
    </div> 
</div> 

JS：

$(document).ready(function() { 
    $('div.colorbox').each(function() { 
     $(this).colorbox({ 
      html: $(this).find('div').html(), 
      rel: 'group_1' 
     }); 
    }); 
}); 

Answer 3

剛剛從亞當的解決方案遵循，你可以實際提供的功能設置參數，這意味着你將不必使用each()有時可以是一個小耗電。

HTML：

<div class="colorbox">Div #1 
    <div style="display:none"> 
      Data#1 inside div. This is just a test. 
    </div> 
</div> 

<div class="colorbox">Div #2 
    <div style="display:none"> 
      Data#2 inside div. This is just a test. 
    </div> 
</div> 

JS：

$(document).ready(function() { 
    $('div.colorbox').colorbox({ 
     html: function() { return $(this).find('div').html(); }, 
     rel: 'group_1' 
    }); 
}); 

Answer 4

這完美的工作對我來說 - 者優先保留聯內容都在一起。只要確保你使用最新的Colorbox版本（目前1.3.19）。

<a class="info_link" rel="help_msg1" href="#">Need help 1?</a> 
<a class="info_link" rel="help_msg2" href="#">Need help 2?</a> 

<div style="display: none;"> 
    <div id='help_msg1'> 
     Help message 1 goes here 
    </div> 
    <div id='help_msg2'> 
     Help message 2 goes here 
    </div> 
</div> 

和JS看起來像這樣：

$(document).ready(function() { 
    $(".info_link").colorbox({  
     width:"50%", 
     inline: true, 
     href: function() { return '#'+$(this).attr('rel') } 
    }); 
});