ConceptyalYarik
@ConceptyalYarik
Тупой как хлебушек

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы