如何以幻灯片形式在Colorbox中显示多个div?
假设我有一个由类.e.g标识的div列表'.myclass'如何以幻灯片形式在Colorbox中显示多个div?
在每个div中将会是一些html内容而不是图像。 我该如何着手打开colorbox(),以便点击箭头时,他们会弹出divs?
我看了看下面的帖子这是同样的问题,但他的解决方案没有给我线索,他是如何得到它的工作:Duplicate question
是颜色框,甚至正确的插件呢?
这是我能得到的最好的。我必须用'rel'对它进行分组,并为每个想要分组的div调用一次colorBox。
http://jsfiddle.net/briguy37/rc5m7/
UPDATE
我更新的基础上面捣鼓亚当的解决方案。他使用.each
和.find
很好地允许遍历同一个className的div而不是唯一的id。你可以看到我在这里的原始解决方案:http://jsfiddle.net/rc5m7/13/
UPDATE:
我知道你已经接受一个答案,但这里有一个更清洁的方式比目前公认的答案:
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,而不是幻灯片。有任何想法吗? – jaffa 2011-05-18 14:22:34
您是否尝试过使用“example8”类的多个div? – 2011-05-18 16:30:53
信息已更新。 – 2011-05-18 17:51:39
刚刚从亚当的解决方案遵循,你可以实际提供的功能设置参数,这意味着你将不必使用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版本(目前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') }
});
});
我冲出我的评论到合适的实现。我知道你已经接受了一个答案,但我建议你切换你的实现....查看我的帖子更新。 – 2011-05-18 17:45:37