Dynamically add items to Magnific Popup gallery

javascript jquery magnific-popup
Marvin3 picture Marvin3 · Nov 7, 2013 · Viewed 8k times · Source

Is there any way to dynamically add gallery items in Magnific Popup that is already open? (or update the current item). Can't find anything about in in plugin docs.

Answer

Dmitry Semenov picture Dmitry Semenov · Nov 7, 2013

Yes, it's possible:

// get instance (after popup was opened)
var mfp = $.magnificPopup.instance;

// modify the items array (push/remove/edit)
mfp.items.push({
    src: "some-image.jpg"
});

// call update method to refresh counters (if required)
mfp.updateItemHTML();

Regarding to what to put in items array, refer to documentation - http://dimsemenov.com/plugins/magnific-popup/documentation.html#from-the-items-option

Related questions

How to open a magnific popup on page load?

I'm using Magnific Popup and I would like to have a video come up as soon as the page loads in a popup. I got the plugin to work fine, but I have no idea on how to get it …

Read More
magnific popup not working

I am using Magnific Popup. $(document).ready(function() { $('.image-viewer').magnificPopup({ type: 'ajax' }); }); This is the html: <a href="/site-media/{{ photo.image }}" class="image-viewer"><img class="fest-content-event-content-photo" width = "100%" src="/site-media/{{ photo.thumbnail2 }}" /></a> But, …

Read More
Magnific popup: Get current element in callback

In Magnific Popup, I want to get an attribute in the link that is clicked and use it in a callback function (using callbacks: open) to make some changes in the DOM. How can I do this? For example, in …

Read More