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

Javascript-форум (https://javascript.ru/forum/)

- Javascript под браузер (https://javascript.ru/forum/css-html/)

- - Объединить несколько изображений в галерею (https://javascript.ru/forum/css-html/83274-obedinit-neskolko-izobrazhenijj-v-galereyu.html)

обернуть элементы идущие подряд

De12,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .gal {
            border: #0000FF 1px solid;
            counter-reset: num;
        }

        .gal img:before {
            counter-increment: num;
            content: counter(num)' картинка';
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const images = document.querySelectorAll('div.text img');
            for (let i = 0; i < images.length; i++) {
                const imgf = images[i];
                const arri = [imgf];
                let img = imgf.nextSibling;
                while (img = img.nextSibling) {
                    if (img && img.nodeType === 3 && !(img.data.trim())) continue;
                    if (img == images[i + 1]) arri.push(images[++i]);
                    else break;
                }
                if (arri.length > 1) {
                    const gal = document.createElement('div')
                    gal.className = 'gal';
                    imgf.parentElement.replaceChild(gal, imgf);
                    gal.append(...arri)
                }
            }
        });
    </script>
</head>

<body>
    <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">
        <b>test</b>
        <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">
    </div>
</body>

</html>

Цитата:

Сообщение от De12

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

Все прекрасно работает

<!DOCTYPE html>
<html>
 
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        img {
            height: 40px;
            margin: 8px;
        }
        .gal {
            border: #0000FF 1px solid;
            counter-reset: num;
        }
 
        .gal img:before {
            counter-increment: num;
            content: counter(num)' картинка';
        }
    </style>
</head>
 
<body>
    <div class="content">
        <p>
        <img src="http://kangax.github.io/compat-table/logo.png">
        <img src="http://kangax.github.io/compat-table/logo.png">
        <img src="http://kangax.github.io/compat-table/logo.png">
        <img src="http://kangax.github.io/compat-table/logo.png">
        <img src="http://kangax.github.io/compat-table/logo.png">
        <b>test</b>
        <img src="http://kangax.github.io/compat-table/logo.png">
        <p>
        <div>
        <img src="http://kangax.github.io/compat-table/logo.png">
        <img src="http://kangax.github.io/compat-table/logo.png">
        <img src="http://kangax.github.io/compat-table/logo.png">
        </div>
        <p>
        <img src="http://kangax.github.io/compat-table/logo.png">
        </p>
        <div>
        <img src="http://kangax.github.io/compat-table/logo.png">
        <img src="http://kangax.github.io/compat-table/logo.png">
        <img src="http://kangax.github.io/compat-table/logo.png">
        </div>
    </div>
<script>
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)
    }
     
}

</script>   
</body>
 
</html>

Цитата:

Сообщение от voraa (Сообщение 541256)

Все прекрасно работает

<!DOCTYPE html>
<html>
 
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        img {
            height: 40px;
            margin: 8px;
        }
        .gal {
            border: #0000FF 1px solid;
            counter-reset: num;
        }
 
        .gal img:before {
            counter-increment: num;
            content: counter(num)' картинка';
        }
    </style>
</head>
 
<body>
    <div class="content">
        <p>
        <img src="http://kangax.github.io/compat-table/logo.png">
        <img src="http://kangax.github.io/compat-table/logo.png">
        <img src="http://kangax.github.io/compat-table/logo.png">
        <img src="http://kangax.github.io/compat-table/logo.png">
        <img src="http://kangax.github.io/compat-table/logo.png">
        <b>test</b>
        <img src="http://kangax.github.io/compat-table/logo.png">
        <p>
        <div>
        <img src="http://kangax.github.io/compat-table/logo.png">
        <img src="http://kangax.github.io/compat-table/logo.png">
        <img src="http://kangax.github.io/compat-table/logo.png">
        </div>
        <p>
        <img src="http://kangax.github.io/compat-table/logo.png">
        </p>
        <div>
        <img src="http://kangax.github.io/compat-table/logo.png">
        <img src="http://kangax.github.io/compat-table/logo.png">
        <img src="http://kangax.github.io/compat-table/logo.png">
        </div>
    </div>
<script>
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)
    }
     
}

</script>   
</body>
 
</html>

Спасибо, работает отлично, осталось сделать, чтобы еще img оборачивало в <li> </li>, чтобы в слайдер это обернуть все

Почти отлично работает, одна проблема. если не тегов разделительных <div> или <p> например, между ними, то все в одну пачку собирает.

Цитата:

Сообщение от De12

если не тегов разделительных

безтеговый текст - не айс, смотрите #11

Цитата:

Сообщение от De12

чтобы еще img оборачивало в <li> </li>, чтобы в слайдер это обернуть все

вам показали как оборачивать в div, сделайте по этому примеру