Встроенная галерея Magnific PopUp

я использую плагин всплывающих окон magnific (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 во время выполнения, он работает!

Кто-нибудь может мне с этим помочь? С надеждой.

Привет Дэвид


javascript jquery popup magnification-api magnific-popup
person David Lambauer    schedule 30.01.2014    source источник
comment
Возможный дубликат Как определить галерею встроенного контента в HTML для использования с Magnific-Popup ?   -  person Gianfranco P.    schedule 02.10.2015

Ответы (2)


arrow_upward
1
arrow_downward

искал то же самое. Я думаю, здесь то, что вы ищете 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 
    }
  });
});
person Nathan Do    schedule 04.09.2014

arrow_upward
0
arrow_downward

Мне нужно было создать пользовательскую навигацию для галерей, поэтому я поэкспериментировал с $.magnificPopup.instance.next();. Он работает, когда помещается в обработчик кликов для галереи. В противном случае «следующий экземпляр» не будет найден, потому что он еще не существует.

Это приведет к переходу к следующему изображению галереи при нажатии на нижнюю/заголовочную строку (см. на codepen) :

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

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

А вот более полный пример на Codepen с несколькими галереями.

Этот также настраивает высоту пользовательской навигации и отступов во всплывающем окне с помощью обратных вызовов. Полезно, потому что кнопка навигации в моем проекте имела значительную высоту и обрезалась нижней частью экрана. (По умолчанию для расчета того, как всплывающее окно помещается в области просмотра, используется только высота самого изображения.)

Надеюсь, это кому-нибудь пригодится. Я знаю, что вопрос был два года назад, но, возможно, другие также найдут его в Google, как и я.

person Sarai L.    schedule 20.03.2016