宏伟的弹出式内嵌画廊答案

【问题标题】：Magnific PopUp Inline Gallery宏伟的弹出式内嵌画廊
【发布时间】：2014-01-30 09:32:04
【问题描述】：

我正在使用 magnific Popup 插件 (http://dimsemenov.com/plugins/magnific-popup/documentation.html#initializing_popup)

我可以先把我的代码放在这里吗：

 $(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();
            });
        }
    }                
});

});

所以我想要一个内联画廊。一切正常，但这部分没有：

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

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

我只是想获得下一个实例，当有一个时。当我在运行时通过 firebug 运行此代码时，它可以工作！

谁能帮我解决这个问题？希望。

大卫你好

【问题讨论】：

How do I define a gallery of inline content in HTML for use with Magnific-Popup ?的可能重复

标签： javascript jquery popup magnific-popup magnification-api

【解决方案1】：

正在寻找同样的东西。我想你在找什么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 
    }
  });
});

【讨论】：

【解决方案2】：

我需要为画廊创建自定义导航，所以我使用了$.magnificPopup.instance.next();。当放入画廊的点击处理程序时，它确实有效。否则，找不到“下一个实例”，因为它还不存在。

点击底部/标题栏 (see it on codepen) 时，这将导航到下一个图库图片：

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

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

这里有一个更完整的example on Codepen，有多个画廊。

这也使用回调调整自定义导航的高度和弹出窗口中的填充。很有用，因为我项目中的导航按钮有很大的高度并且被屏幕底部截断。（默认情况下，仅使用图像高度本身来计算弹出窗口如何适应视口。）

希望这对某人有用。我知道这个问题是两年前的问题，但也许其他人也会像我一样通过谷歌搜索找到它。

【讨论】：