Объединить несколько изображений в галерею

[De12]

Привет, есть ли такая возможность, чтобы был скрипт, который если идет несколько тегов img подряд, он им добавлял контейнер и объединял в галерею? Т.е. если в статье несколько таких блоков, то каждый - это отдельная галлерея. Куда копать?

[рони]

De12,
иди циклом по картинкам и оборачивай, в чём проблема ...

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

[voraa]

Скрип то написать несложно, но постановка задачи неправильная.
А что делать с одиночным <img> ?
А разве не может быть нескольких <img> подряд, которые не надо оборачивать, например, в шапке документа?

[De12]

Скрип то написать несложно, но постановка задачи неправильная.
А что делать с одиночным <img> ?
А разве не может быть нескольких <img> подряд, которые не надо оборачивать, например, в шапке документа?

Спасибо за вопрос.

Если одиночный - ничего.

По поводу несколько подряд <img> - проверять только в контентной части, например если в контейнере <div class="content">

[De12]

[html run]
... минимальный код страницы с вашей проблемой
[/html]

Мне кажется, вы не совсем поняли, что я хочу, либо я не правильно понял вашего ответа..

[рони]

De12,
мини html до и после сделайте.

[De12]

De12,
мини html до и после сделайте.

Привет это первый абзац
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
Это второй абзац
<img src="img1.jpg">
<img src="img2.jpg">

Пример? Или что, я тупой наверное... Вот пример выше, того как будет в статье и нужно, чтобы если идет несколько подряд img, их оборачивало в контейнер какой-то например, чтобы из этого потом слайдер сделать.

[voraa]

Примерно так это делается

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

[De12]

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

Спасибо, попробовал, но почему-то не сработало.

[De12]

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 в начале менял.