CODEWITHSUNDEEP
jquerymagnific-popup
Justice Gödel Conder
Justice Gödel Conder

Reputation: 157

Select next popup with Magnific Popup (jQuery)

I'm using the Magnific Popup library. I need to have the next nearest popup-div-content load when the link is clicked. It works for hard coded id's but I need it to work generically (next) because this is going into a cms and I will not know how many items are being loaded.

<a href="#" class="open-popup-link">1st link</a>
<div class="white-popup mfp-hide">
    <p>First popup content</p>
</div><br>

<a href="#" class="open-popup-link">2nd link</a>
<div class="white-popup mfp-hide">
    <p>Second popup content</p>
</div><br>

<a href="#" class="open-popup-link">3nd link</a>
<div class="white-popup mfp-hide">
    <p>Third popup content</p>
</div>

$('.open-popup-link').magnificPopup({
    items: {
        // src: $('.white-popup'), // works but loads all
        src: $(this).next('.white-popup'), // should load only next popup div
        type: 'inline'
    }
});

Fiddle: http://jsfiddle.net/BinaryAcid/XadjS/2/

Upvotes: 2

Views: 1906

Answers (1)

Chris Sobolewski
Chris Sobolewski

Reputation: 12935

When you're passing in your object literal in to the .magnificPopup() function, you're not inside a function. In other words, you're still in the global scope. So this is still referring to the window, and not the div, which is what you seem to be expecting here.

In order to reference the DOM node with this, you can instead bind the popup within JQuery's .each() like so:

$('.open-popup-link').each(function(){
    $(this).magnificPopup({
      items: {
      src: $(this).next('.white-popup'), // should load the next popup
      type: 'inline'
      }
    })
});

You can see a working example at

http://jsfiddle.net/XadjS/4/

Upvotes: 2

Related Questions