굉장한 팝업 : 이미지가 아닌 다른 것을 클릭하여 엽니 다.

Question

클라이언트가 이미지 캡션을 가져 왔을 때 미리보기 이미지를 완전히 덮어 씌울 것을 요청 했으므로 캡션을 클릭하여 <a> 대신 고급 팝업을 열어야합니다.

jQuery(".caption").on("click", function(event) { 
    var items = []; 
    jQuery(".item").each(function() { 
    items.push({ 
     src: jQuery(this).find("a").first().attr("href") 
    }); 
    }); 
    jQuery.magnificPopup.open({ 
    type: 'image', 
    gallery: { 
     enabled: true 
    }, 
    items: items, 
    image: { 
     titleSrc: function(item) { 
     console.log(item.el); 
     // return item.el.clone(); 
     } 
    } 
    }); 
}); 

는 예를 들어 fiddle를 참조하고, HTML 및 CSS (플러스 대안 JS 중 하나가 작동하지 않는 :

JS/jQuery를 : 지금까지 내가 할 수 있었다).

1. 대신 하나를 클릭하는 이미지, 팝업 첫 번째 이미지는 항상 :

   그것은 나에게 두 차단제를주고 있어요.

2. 약 return item.el.clone(); 부분은 "item.el is undefined"오류가 발생했기 때문에 주석 처리되었습니다 (magnificopopup은 jQuery.magnificPopup.open()이 아닌 jQuery('.caption').magnificPopup()을 통해 인스턴스화 될 때 발생하지 않는 것 같습니다). 그러나 캡션 HTML도 팝업에 표시해야합니다.

어떤 도움을 주시면 감사하겠습니다. 감사.

Answer 1

항목 배열을 사용하면 표시하려는 첫 번째 항목의 인덱스를 전달할 수 있습니다. 그래서 var index = jQuery(this).parent().index()을 사용하여 현재 클릭 된 항목의 색인을 얻은 다음 해당 변수를 magnificPopup 함수에 전달했습니다.

캡션을 팝업으로 가져 오려면 titleSrc이라는 항목 개체에 추가 속성을 추가 한 다음 item.data.titleSrc을 사용하여 titleSrc 옵션에서 검색 할 수 있습니다.

https://jsfiddle.net/sjp7j1zx/4/

실제로

jQuery(".caption a").on("click", function(event) { 
    event.stopPropagation(); 
}); 

jQuery(".caption").on("click", function(event) { 
    var items = []; 
    jQuery(".item").each(function() { 
    // Pass an extra titleSrc property to the item object so we can use it in the magnificPopup function 
    items.push({ 
     src: jQuery(this).find("a").first().attr("href"), 
     titleSrc: jQuery(this).find('.caption').html() 
    }); 
    }); 

    // Get the index of the current selected item 
    var index = jQuery(this).parent().index(); 

    jQuery.magnificPopup.open({ 
    type: 'image', 
    gallery: { 
     enabled: true 
    }, 
    items: items, 
    image: { 
     titleSrc: function(item) { 
     // get the titleSrc from the data property of the item object that we defined in the .each loop 
     return item.data.titleSrc; 
     } 
    } 
    // Pass the current items index here to define which item in the array to show first 
    }, index); 
});