如何在 Colorbox 中将多个 div 显示为幻灯片？答案

【问题标题】：How to display multiple divs in Colorbox as a slideshow?如何在 Colorbox 中将多个 div 显示为幻灯片？
【发布时间】：2011-05-18 13:42:50
【问题描述】：

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

在每个 div 中都会有一些 html 内容而不是图像。如何打开 colorbox() 以便在单击箭头时，它们会在 div 中滑动？

我查看了以下相同问题的帖子，但他的解决方案让我不知道他是如何工作的：Duplicate question

colorbox 甚至是正确的插件吗？

【问题讨论】：

我将我的评论刷新为正确的实现。我知道你已经接受了一个答案，但我建议你切换你的实现....查看我的帖子更新。

标签： jquery lightbox colorbox

【解决方案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'
        });
    });
});

【讨论】：

我试过他们的例子，但它只显示了一个正在使用的 div。如果我尝试用多个 Div 和一个类属性替换内联 html，它就不起作用。它仍然显示所有 div 而不是幻灯片。有什么想法吗？
您是否尝试过拥有多个“example8”类的 div？

【解决方案2】：

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

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

更新

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

【讨论】：

@Adam Terlson 同意，+1 对您的回答。将我的基础小提琴更新为您的解决方案。其他人仍然可以在jsfiddle.net/rc5m7/13 看到我原来的解决方案。

【解决方案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') }
    });
});

【讨论】：

【解决方案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'
    });
});

【讨论】：