Как оптимизировать повторяющийся блок с фотографиями, где меняется только путь и названия фотографий, чтобы не писать его множество раз?

Question

[Ярик Трясцин]

Верстаю фотогалерею c помощью bootstrap и нескольких плагинов: masonry, fancybox. Получилось так, что у меня используется один и тот же блок, где изменяется только путь и название фотографий. Хотелось бы как-нибудь оптимизировать этот момент, чтобы вручную не прописывать эти блоки по сотни раз. Попытался что-нибудь придумать с методами JS: createElement и insertAdjacentHTML. Но первый игнорирует колонки bootstrap и вся картинка на весь экран расползается, а второй добавляет дополнительные стили (position: absolute, left: 0px, top: 0px) и тоже всё ломается.
Сам блок, если понадобится:

Comments

[iBird Rose]

для этого тебе нужен бекенд. ну либо фреймворк для фронта (vue, react и т.д.)
ну если прям вообще по простому, то препроцессоры можешь заюзать. к примеру pug https://gist.github.com/neretin-trike/53aff5afb761...

Answer 1

[Алексей Чернявский]

<div id="orig" class="col-xl-2 col-lg3 col-md4 col-sm-6 col-6 item" style="display:none">
    <img />
    <div class="cover-item-gallery">
        <a data-fancybox="Gallery" >
        <i class="fa fa-search fa-2x"></i>
        </a>
    </div>
</div>
<div id="images">

</div>

<script>
    let images=["img/img1.jpg","img/img2.jpg"]
    $(document).ready(function () {
        images.forEach(function (src) {
            var clone = $("#orig").clone().show();
            $(clone).removeAttr("id");
            $(clone).find("a").attr("href", src);
            $(clone).find("img").attr("src", src);
            $("#images").append(clone);
        })
    })
</script>

Я бы пошел примерно таким путем. Получаем от куда-то массив ссылок на изображения и клонируя исходный элемент заполняем им контейнер

Comments

[Ярик Трясцин]

Я попробовал ваш вариант, вроде работает и создаются новые блоки, но им присваиваются стили position: absolute, left, right и др. Это можно как-то исправить?

[Алексей Чернявский]

Так удалите эти стили у исходного элемента (id="orig"). Вы же его клонируете, вот эти стили и есть у них.

[Ярик Трясцин]

Алексей Чернявский, А как убрать их, если они сами появляются автоматически уже в самом браузере(скрин сделан уже в коде страницы в браузере), в верстке их нет и в css таких стилей нет?

[Алексей Чернявский]

Каким образом у вас генерируется блок с id="orig"? Видимо его генерит какой-то php-код?