Question

假设我有一个由类.e.g'.myclass'

标识的div列表

在每个div内部将是一些html内容而不是图像。我如何打开colorbox（），以便在点击箭头时，它们会轻弹div？

我看了下面这个同样问题的帖子，但是他的解决方案并没有让我知道他是如何运作的：Duplicate question

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'
    });
});

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

4 个答案: