Magnific 팝업 인라인 갤러리

Question

내가 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를 통해이 코드를 실행하면 작동합니다!

아무도 도와 줄 수 있습니까? 희망을 갖고.

인사말 David

Answer 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 
    } 
    }); 
}); 

Answer 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 더 완전한입니다.

이 것은 또한 콜백을 사용하여 팝업에서 사용자 정의 탐색 및 패딩의 높이를 조정합니다. 내 프로젝트의 탐색 버튼이 중요한 높이를 갖고 화면 하단에서 잘려나 가기 때문에 유용합니다. 기본적으로 이미지 높이 자체 만이 팝업이 뷰포트에 맞게 표시되는 방식을 계산하는 데 사용됩니다.

희망자에게 유용합니다. 나는 그 질문이 2 년 전 이었지만, 아마 다른 사람들도 내가 한 것처럼 인터넷 검색으로 그것을 발견 할 것입니다.