magnific-popup打开项目数组中的某个项目

时间:2013-10-21 07:32:16

标签: jquery magnific-popup

我有一系列看起来像这样的项目:

items: [
{
    src: '#white-popup0',
    type: 'inline'
},
{
    src: '#white-popup1',
    type: 'inline'
},
{
    src: '#white-popup2',
    type: 'inline'
}]

和一些匹配该数组的html内容,看起来有点像这样:

<div id="white-popup0" class="white-popup">
<div class="popup_social_buttons">
    <iframe src="//www.facebook.com/plugins/like.php"><!-- FB like button --></iframe>
    <a href="//www.pinterest.com/pin/create/button/"><!-- Pinterest button --></a>
    <div id="___plusone_3" ><!-- G+ button --></div>
</div>
<img alt="alt text here" src="some_picture.jpg" class="img-responsive">
<button title="Close (Esc)" type="button" class="mfp-close">×</button>
</div>

html内容对于每个“#white-popup”具有相同的结构。 现在,我打开magnific-popup的方法是从一个bootstrap轮播中触发.magnificPopup函数,其中我的数组中的项目数量完全相同。我需要做一些能从我的js数组中触发某个项目的东西。例如,如果我点击我的轮播中的第二项,我将.magnificPopup打开所有项目,但从第二项开始。

提前致谢。

2 个答案:

答案 0 :(得分:4)

open方法有一个可选的第二个参数,它是要打开的项目的索引。

$.magnificPopup.open({
 items: [
{
    src: '#white-popup0',
    type: 'inline'
},
{
    src: '#white-popup1',
    type: 'inline'
},
{
    src: '#white-popup2',
    type: 'inline'
}]

}, 2);

http://dimsemenov.com/plugins/magnific-popup/documentation.html#public_methods

答案 1 :(得分:0)

open方法似乎不再支持简单地为索引添加可选的第二个参数。我想这是来自Magnific的旧版本,因为它似乎没有起作用。

根据文档,您现在可以在选项中包含索引参数。

这对我有用。

&#13;
&#13;
$.magnificPopup.open({
 items: [
{
    src: '#white-popup0',
    type: 'inline'
},
{
    src: '#white-popup1',
    type: 'inline'
},
{
    src: '#white-popup2',
    type: 'inline'
}],
 index: 2
});
&#13;
&#13;
&#13;