Найти изображение src url для всех изображений в сообщении

Question

Краткое описание: Я в ситуации Jekyll, где мне нужно найти url src для каждого отдельного изображения и отправить его обратно в href = "imgurl". jQuery или Javascript.

То, что я пытался до сих пор:

$(document).ready(function(){ 

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

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

    $("article img").wrap('<a href="' + imgsrc + '" data-lightbox="' + postTitle + '"></a>'); 

Причиной я оберточная статья IMG в а-теге, происходит потому, что prose.io, который я использую для уценки, автоматически присваивает изображения в пределах р-теги.

В конечном итоге я хочу сгруппировать все изображения в одном сообщении (data-lightbox) и автоматически создать галерею лайтбоксов с добавленных изображений на страницу.

С моим существующим кодом мне удалось получить URL-адрес с первого добавленного изображения, но, к сожалению, все изображения в сообщении получили тот же URL-адрес, что и первый. Они отображают на месте как правильные изображения, но URL-адрес совпадает с первым изображением (позиция [0] в массиве). Когда я нажимаю изображение, открывается лайтбокс и появляется правильное количество изображений, но все они отображают первое изображение. Панель console.log корректно отображает все URL-адреса изображений в сообщении.

EDIT-BONUS: Подтвержден! В качестве бонусного вопроса: если бы я должен был сделать то же самое с текстом alt, скопировав его в атрибут data-title, как мне продолжить? В настоящее время имеется следующее:

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

    $("article img").each(function() { 
    $(this).wrap('<a href="' + this.src + '" data-lightbox="' + postTitle + '" data-title="' + altText + '"></a>'); 

});

Опять же, это просто дает мне первое изображение alt и присваивает его всем изображениям.

Я надеюсь, что некоторые из вас знают, как обойти этот беспорядок.

Заранее благодарю за ваше время!

Answer 1

Вы нарушаете imgsrc каждый раз, когда есть изображение.

попробовать что-то вроде этого:

$("article img").each(function() { 
    var src = this.src; 
    var alt = $(this).attr("alt"); 
    $(this).wrap('<a href="' + src + '" data-lightbox="' + postTitle + '" data-title="' + alt + '"></a>'); 
}); 

Проверить .attr() для получения дополнительной информации!