Объединить несколько изображений в галерею
Привет, есть ли такая возможность, чтобы был скрипт, который если идет несколько тегов img подряд, он им добавлял контейнер и объединял в галерею? Т.е. если в статье несколько таких блоков, то каждый - это отдельная галлерея. Куда копать?
|
De12,
иди циклом по картинкам и оборачивай, в чём проблема ... [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Скрип то написать несложно, но постановка задачи неправильная.
А что делать с одиночным <img> ? А разве не может быть нескольких <img> подряд, которые не надо оборачивать, например, в шапке документа? |
Цитата:
Если одиночный - ничего. По поводу несколько подряд <img> - проверять только в контентной части, например если в контейнере <div class="content"> |
Цитата:
|
De12,
мини html до и после сделайте. |
Цитата:
Привет это первый абзац <img src="img1.jpg"> <img src="img2.jpg"> <img src="img3.jpg"> Это второй абзац <img src="img1.jpg"> <img src="img2.jpg"> Пример? Или что, я тупой наверное... Вот пример выше, того как будет в статье и нужно, чтобы если идет несколько подряд img, их оборачивало в контейнер какой-то например, чтобы из этого потом слайдер сделать. |
Примерно так это делается
const images = document.querySelectorAll('div.content img');
for (let i = 0; i < images.length; i++) {
const imgf = images[i];
const arri = [imgf];
let img = imgf.nextElementSibling;
while (img?.tagName === 'IMG') {
arri.push(img);
img = img.nextElementSibling;
i++;
}
if (arri.length > 1) {
const gal = document.createElement('div')
gal.className = 'gal';
imgf.parentElement.replaceChild(gal, imgf);
gal.append(...arri)
}
}
|
Цитата:
|
Цитата:
<div class="col-12 text"> <img data-src="/uploads/posts/2021-11/1636154460_default-good-1.png" class="fr-fic fr-dii lazy-loaded" alt="" src="/uploads/posts/2021-11/1636154460_default-good-1.png"> <img data-src="/uploads/posts/2021-11/1636154460_default-good-1.png" class="fr-fic fr-dii lazy-loaded" alt="" src="/uploads/posts/2021-11/1636154460_default-good-1.png"> <img data-src="/uploads/posts/2021-11/1636154460_default-good-1.png" class="fr-fic fr-dii lazy-loaded" alt="" src="/uploads/posts/2021-11/1636154460_default-good-1.png"> test test <img data-src="/uploads/posts/2021-11/1636154460_default-good-1.png" class="fr-fic fr-dii lazy-loaded" alt="" src="/uploads/posts/2021-11/1636154460_default-good-1.png"> <img data-src="/uploads/posts/2021-11/1636154460_default-good-1.png" class="fr-fic fr-dii lazy-loaded" alt="" src="/uploads/posts/2021-11/1636154460_default-good-1.png"> </div> вот такой текст был, класс контейнера с .content на .text в начале менял. |
| Часовой пояс GMT +3, время: 00:34. |