Finden Sie die Bild-Quellen-URL für alle Bilder in einem Beitrag ⇐ Jquery

[Guest]

Kurze Zusammenfassung: Ich bin in einer Jekyll-Situation, in der ich die Quell-URL für jedes einzelne Bild finden und sie zurück in ein a href="imgurl" posten muss. jQuery oder Javascript.

Was ich bisher versucht habe:

Code: Select all

$(document).ready(function(){

var postTitle = document.title.replace(/ /g,'');

$("article img").each(function() {
imgsrc = this.src;
console.log(imgsrc);
});

$("article img").wrap('');

Der Grund, warum ich das Artikel-img in ein A-Tag verpacke, ist, dass prose.io, das ich für den Markdown verwende, die Bilder innerhalb von p- automatisch zuweist. Tags.

Was ich schließlich tun möchte, ist, alle Bilder im selben Beitrag zu gruppieren (Daten-Lightbox) und automatisch eine Lightbox-Galerie aus den der Seite hinzugefügten Bildern zu erstellen.

Mit meinem vorhandenen Code ist es mir gelungen, die URL aus dem ersten hinzugefügten Bild abzurufen, aber leider wird allen Bildern im Beitrag dieselbe URL zugewiesen wie das Erste. Sie werden vor Ort als die richtigen Bilder angezeigt, aber die URL ist genau die gleiche wie beim ersten Bild (Position [0] im Array). Wenn ich auf ein Bild klicke, öffnet sich die Lightbox und die richtige Anzahl an Bildern erscheint, aber alle zeigen das erste Bild. Das console.log gibt alle URLs der Bilder im Beitrag korrekt aus.

EDIT-BONUS: Validiert! Als Bonusfrage: Wie würde ich vorgehen, wenn ich dasselbe mit dem Alternativtext machen würde, indem ich ihn in das Datentitelattribut kopiere? Habe derzeit Folgendes:

Code: Select all

var altText = $("img", this).attr("alt");

$("article img").each(function() {
$(this).wrap('');

});

Auch hier bekomme ich nur das erste Bild alt und weist es allen zu Bilder.

Ich hoffe, einige von euch wissen, wie sie dieses Chaos umgehen können.

Im Voraus vielen Dank dafür Deine Zeit!