magnific popup requires clicking twice to open image slider

Question

I have a scenario where my code to display image thumbnails are loaded into the DOM dynamically. Upon clicking the thumbnail, I want to load the full image using maginfic popup. Following is my view :

<div class="Right-Panel-Section popup-gallery">
        <h2>Images</h2>
        @foreach (var media in @Model.lsContentMedia)
        {
            <div class=" Float-Left" data-id="@media.MediaId">
                <a href="@media.ContentMediaFileName" >
                    <img src="@media.ContentMediaFileName" style="width:80px;height:80px;margin:5px;" title="@media.Description" class="gallery-item"/>
                </a>

            </div>
        }
    </div>

As I am unable to directly access the DOM elements, I am using a delegate to hook up Magnific as per below:

$("#Fixed-Container").on("click", ".popup-gallery", function (event) {
            $('.popup-gallery').magnificPopup({
                delegate: 'a',
                type: 'image',
                gallery: {
                    enabled: true,
                    navigateByImgClick: true,
                    preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
                }
            });
            event.preventDefault();
        });

I have included both the style and script files correctly. However, I can only view the images after initially clicking twice on any image. I would expect it to work with a single click, always. Any help on this would be much appreciated.

Answer 1

Try chaining .magnificPopup('open') to popup initialization.

Your code should read:

$("#Fixed-Container").on("click", ".popup-gallery", function (event) {
    $('.popup-gallery').magnificPopup({
        delegate: 'a',
        type: 'image',
        gallery: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
        }
    }).magnificPopup('open');
    event.preventDefault();
});