magnificポップアップ：画像以外のものをクリックすると開きます

Question

クライアントは、画像キャプションがホバー上のサムネイルを完全に覆うように要求しました。キャプチャをクリックして<a>ではなくMagnificent Popupを開く必要があります。これまでのところ私はやることができた：

JS/jQueryの：

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 ）。

私に2つのブロッカーを与えている：

1. それは代わりに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を使用して取得できます。

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