Magnific PopUp Inline Gallery

Question

i am using the magnific Popup Plugin (http://dimsemenov.com/plugins/magnific-popup/documentation.html#initializing_popup)

May i put my code in here first:

 $(document).ready(function() {

$('.open-popup-link').magnificPopup({        
    // Delay in milliseconds before popup is removed
    removalDelay: 600,

    // Class that is added to popup wrapper and background
    // make it unique to apply your CSS animations just to this exact popup
    mainClass: 'mfp-fade',

    type:'inline',
    midClick: true, // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.,
    callbacks: {
        beforeOpen: function() {
            if($(".image-container img").attr("title") != "" && $('.image-container img').length > 0){

                if ($('.imagetitle').length > 0) { 
                    // it exists 
                }else{
                    $(".image-container").append("<span class='imagetitle'>"+$(".image-container img").attr("title")+"</span>");
                    $(".image-container span.imagetitle").css({
                        "left": $(".image-container img").position().left+"px",
                        "margin-top":10+"px",
                        "margin-bottom":10+"px"                                
                    });
                }
            }
            //Make it a Gallery! - Whoop Whoop
            if($("div.white-popup").length > 1){
                $("div.white-popup").append("<div class='popupgalleryarrowleft'>&nbsp;</div>");
                $("div.white-popup").append("<div class='popupgalleryarrowright'>&nbsp;</div>");
            }
        },
        open: function(){
            // Klick Function für die Gallery einbauen!  
            $(".popupgalleryarrowleft").click(function(){
                $.magnificPopup.instance.prev();                    
            });

            $(".popupgalleryarrowright").click(function(){
                $.magnificPopup.instance.next();
            });
        }
    }                
});         

});

So i want to have an inline gallery. It works everything fine, but this part doesnt:

 // Klick Function für die Gallery einbauen!  
            $(".popupgalleryarrowleft").click(function(){
                $.magnificPopup.instance.prev();                    
            });

            $(".popupgalleryarrowright").click(function(){
                $.magnificPopup.instance.next();
            });

I am just trying to get the next instance, when there is one. When i am running this code via firebug on runtime, it works!

Can anyone help me with this? Hopefully.

Greetings David

Answer 1

was looking for the same thing. I think here what you are looking for http://codepen.io/anon/pen/kInjm

$('.open-gallery-link').click(function() {

  var items = [];
  $( $(this).attr('href') ).find('.slide').each(function() {
    items.push( {
      src: $(this) 
    } );
  });

  $.magnificPopup.open({
    items:items,
    gallery: {
      enabled: true 
    }
  });
});

Answer 2

I needed to create a custom navigation for galleries, so I played with using $.magnificPopup.instance.next();. It does work when put into a click handler for a gallery. Otherwise, there is no "next instance" to find because it doesn't exist yet.

This will navigate to the next gallery image when clicking on bottom/title bar (see it on codepen):

$('.gallery').magnificPopup({
  type: 'image', 
  gallery: {
    enabled: true
  }
});

$('.gallery').click(function() {
  $('.mfp-bottom-bar').click(function() {
    $.magnificPopup.instance.next();
  });
  return false;
});

And here's a more complete example on Codepen, with multiple galleries.

This one also adjusts for the height of the custom navigation and padding in the popup, using callbacks. Useful because the navigation button in my project had significant height and was being cut off by the bottom of the screen. (By default, only the image height itself is used to calculate how the popup fits in the viewport.)

Hope this is useful to someone. I know the question was two years ago, but maybe others will also find it by Googling, like I did.