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

Question

假设我有一个由类 .eg '.myclass' 标识的 div 列表，

每个 div 内都会有一些 html 内容而不是图像。 我该如何打开 colorbox() 以便单击箭头时它们会快速浏览 div？

我查看了以下帖子，这是同样的问题，但他的解决方案没有给我任何关于他如何使其工作的线索： 重复问题

colorbox 是正确的插件吗？

Answer 1

更新：

我知道您已经接受了答案，但这里有一个比当前接受的答案更清晰的方法：

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 2

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

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

更新

我'已将上面的基本小提琴更新为 Adam 的解决方案。他很好地使用了 .each 和 .find 来允许迭代相同 className 的 div，而不是通过唯一的 id。您可以在这里看到我的原始解决方案： http://jsfiddle.net/rc5m7/13/

Answer 3

这对我来说非常有效 - 更喜欢将内联内容保留在一起。只需确保您使用最新的 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') }
    });
});

Answer 4

只是为了遵循 Adam 的解决方案，您实际上可以提供函数作为设置参数，这意味着您不必使用 有时会有点耗电的 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'
    });
});