如何以幻灯片形式在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') } 
    }); 
});