Ищу модуль/плагин для изображений на сайте.

[ros24]

Ищу модуль/плагин для изображений на сайте по клику, просмотра нескольких изображений в режиме галереи.
Загрузка изображений будет пользователями через поле "Загружаемая галерия изображений". Cms dle 18.0

Может есть у кого варианты решения данного вопроса. Реализация делается под шаблон Andera.

​

 

[Puerchik]

через класс class="highslide"

который отвечает за всплывающее увеличение изображений при клике.

<a href="пример.jpg" class="highslide">
<img src="пример.jpg" alt="Описание">
</a>

 

[arturweb]

Ищу модуль/плагин для изображений на сайте по клику, просмотра нескольких изображений в режиме галереи.
Загрузка изображений будет пользователями через поле "Загружаемая галерия изображений". Cms dle 18.0

Может есть у кого варианты решения данного вопроса. Реализация делается под шаблон Andera.

В DLE самый просто способ - использовать highslide. Но чтобы вручную не прописывать класс всем изображениям, можешь подключить простой скрипт:

<script>
document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll(".xfieldimagegallery img").forEach(function(img) {
        let src = img.getAttribute("src");
        let link = document.createElement("a");
        link.href = src;
        link.className = "highslide";
        link.setAttribute("onclick", "return hs.expand(this)");
        img.parentNode.insertBefore(link, img);
        link.appendChild(img);
    });
});
</script>

Если и после этого не заработает, тогда нужно дополнительно подключать стили\скрипты в теме:

<link rel="stylesheet" href="/engine/classes/highslide/highslide.css" />
<script src="/engine/classes/highslide/highslide.js"></script>

 

[ros24]

В DLE самый просто способ - использовать highslide. Но чтобы вручную не прописывать класс всем изображениям, можешь подключить простой скрипт:

<script>
document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll(".xfieldimagegallery img").forEach(function(img) {
        let src = img.getAttribute("src");
        let link = document.createElement("a");
        link.href = src;
        link.className = "highslide";
        link.setAttribute("onclick", "return hs.expand(this)");
        img.parentNode.insertBefore(link, img);
        link.appendChild(img);
    });
});
</script>

Если и после этого не заработает, тогда нужно дополнительно подключать стили\скрипты в теме:

<link rel="stylesheet" href="/engine/classes/highslide/highslide.css" />
<script src="/engine/classes/highslide/highslide.js"></script>

Спасибо! То что нужно! Ещё вопрос к этой же теме, вопрос переключения между собой можно реализовать? Если несколько фотографий.

 

[arturweb]

Спасибо! То что нужно! Ещё вопрос к этой же теме, вопрос переключения между собой можно реализовать? Если несколько фотографий.

Для доп. поля типа "галерея изображений", при клике по картинке открывается fancy-галерея с возможностью переключения.
Если переключателя нет, то скорее всего твоя тема перебивает его. Попробуй на дефолтном шаблоне затестить

 

[stillmaster]

Можно немного изменить вывод галереи через плагин например у меня используется swiper и стандартная галерея тут нужно настраивать под каждый случай

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 <div class="gallery-top2 swiper-container swiper-top">
            [xfvalue_slide]
            <div class="swiper-pagination"></div>
</div>

А так в шаблоне выглядит.

 

[stillmaster]

нужно ко всем изображениям добавлять data-highslide=15 в этом случае все изображения с 15 объединяться в один пул там выше это сделано.