CODEWITHSUNDEEP
jquerymagnific-popup
dustfeather
dustfeather

Reputation: 86

magnific-popup open certain item in item array

i have an array of items that looks something like this:

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

And some html content to match that array, that looks somewhat like this:

<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>

The html content has the same structure for every "#white-popup". Now, the way I open up the magnific-popup is by triggering the .magnificPopup function from a bootstrap carousel where i have the exact same amount of items like in my array. I need to do something that would trigger a certain item from my js array. For instance if i click the second item from my carousel, I'll have .magnificPopup open all items but starting with the second one.

Thanks in advance.

Upvotes: 3

Views: 6668

Answers (2)

overeasy
overeasy

Reputation: 404

The open method no longer seems to support simply adding the optional second parameter for index. I guess this was from an older version of Magnific, because it didn't seem to be working.

Per the documentation, you can now include an index parameter in options.

This worked for me.

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

Upvotes: 0

Dmytro Semenov
Dmytro Semenov

Reputation: 4616

The open method has an optional second parameter, which is the index of item to 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

Upvotes: 4

Related Questions