magnific Popup: Öffnen durch Klicken auf etwas anderes als das Bild

Question

Client hat angefordert, dass die Bildunterschrift das Miniaturbild auf Hover vollständig abdecken, so dass ich jetzt in der Lage sein, auf die Beschriftung klicken zu können Magnific Popup anstelle der <a> öffnen. Bisher habe ich in der Lage gewesen zu tun:

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

Siehe fiddle für ein Beispiel, und die HTML und CSS (plus alternative JS, das funktioniert auch nicht).

Es gibt mir zwei Blocker:

1. Es ist immer das erste Bild, das anstelle des Bildes erscheint, dass man angeklickt.
2. Dieser Teil über return item.el.clone(); ist auskommentiert, weil es einen Fehler "item.el ist undefined" (was scheint nicht passiert, wenn magnificPopup über jQuery('.caption').magnificPopup() im Gegensatz zu jQuery.magnificPopup.open() instanziiert wird). Ich benötige jedoch den Untertitel HTML, um auch im Popup zu erscheinen.

Jede Hilfe wäre willkommen. Vielen Dank.

Answer 1

Wenn Sie ein Array von Elementen verwenden, können Sie den Index des ersten Elements übergeben, das Sie anzeigen möchten. Also habe ich var index = jQuery(this).parent().index() verwendet, um den Index des aktuellen angeklickte Element zu erhalten und dann diese Variable an die magnificPopup Funktion übergeben.

Um die Beschriftung in dem Popup-Fenster Ich habe eine zusätzliche Eigenschaft, um die Elemente hinzugefügt Objekt titleSrc genannt, die Sie in der Option dann retreive können titleSrcitem.data.titleSrc verwenden.

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