Допустим, в контенте странице content-page
нужно заменить все вставленные изображения с классом img-replace
на обертку с ссылкой для fancybox и контентом с figure и figcaption.
<div class="content-page">
<img src="https://test.ru/img-1.jpg" alt="alt-text" title="title text" class="img-replace">
<img src="https://test.ru/img-2.jpg" alt="alt-text" title="title text" class="img-replace">
<img src="https://test.ru/img-3.jpg" alt="alt-text" title="title text" class="img-replace">
</div>
Сделать это через js можно следующим образом:
document.querySelectorAll(".content-page img.img-replace").forEach(img => {
const imgSrc = img.getAttribute("src");
const imgTitle = img.getAttribute("title");
const imageWrapper = document.createElement("a");
imageWrapper.classList.add("new-class");
imageWrapper.dataset.fancybox = "";
imageWrapper.href = imgSrc;
imageWrapper.innerHTML = `
<figure>
<img src="${imgSrc}" title="${imgSrc}" class="class-image">
<figcaption>${imgTitle}</figcaption>
</figure>
`;
img.replaceWith(imageWrapper);
});