Jquery 如何在Colorbox中以幻灯片形式显示多个div？

假设我有一个按类标识的div列表。例如“.myclass”

在每个div中都有一些html内容，而不是图像。 如何打开colorbox（），以便在单击箭头时，它们将在div中快速移动

我看了下面的帖子，也是同样的问题，但他的解决方案并没有告诉我他是如何解决的：

colorbox是否是用于此目的的正确插件？

更新：

我知道你已经接受了答案，但这里有一个比目前接受的答案更简洁的方法：

HTML:

---

这是我能得到的最好的。我必须用“rel”对它进行分组，并为您想要分组的每个div调用colorBox一次

更新

---

我已将上面的基础小提琴更新为Adam的解决方案。他使用

。each

和

。find

很好地允许通过相同类名的div而不是唯一id进行迭代。您可以在这里看到我的原始解决方案：

仅从Adam的解决方案继续，您实际上可以提供函数作为设置参数，这意味着您不必使用

each（）

有时会有点耗电

HTML:

---

这对我来说非常有效——我更喜欢将内联内容放在一起。只需确保使用最新的Colorbox版本（当前为1.3.19）

---

我试过他们的例子，但它只显示了一个div被使用。如果我尝试用多个div和一个class属性替换内联html，那么它就不起作用了。它仍然显示所有div，而不是幻灯片。有什么想法吗？你有没有尝试过在“example8”类中使用多个div？我将我的评论整理成一个适当的实现。我知道你已经接受了答案，但我建议你放弃你的实现。。。。见我的帖子更新。@Adam Terlson同意，你的答案+1。将我的基本小提琴更新为您的解决方案。其他人仍然可以在上看到我的原始解决方案。

<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>

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

<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>

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

<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>

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