ב
  •   בס
Интересное:
Публикации / WEB

Галерея через дополнительные поля в DLE с решение проблемы

Решение проблемы с выводом галереи через дополнительные поля в DLE

В чём проблема?

В том что стандартный вывод загруженных изображений галереи через допполя [xfgiven_galimg][xfvalue_galimg][/xfgiven_galimg]  выводит изображения так:

<ul class="xfieldimagegallery galimg">
<li><img src="/uploads/posts/2025-02/5c547a7e7c.webp" alt=""></li>
<li><img src="/uploads/posts/2025-02/c991b2e73c.webp" alt=""></li>
<li><img src="/uploads/posts/2025-02/2b6d4eb093.webp" alt=""></li>
</ul>

То-есть получается что тут нет не инструмента нажатия для открытия и просмотра ни атрибутов соответствующих для этого. И исходя из данной проблемы требуется решение через хук. 

Создаём поле, к примеру galimg

вставляет этот код

[xfgiven_galimg]
<style type="text/css">
/* Основные стили галереи */
.xfieldimagegallery {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    clear: both;
}

.xfieldimagegallery li {
    position: relative;
    cursor: pointer;
    transition: transform 0.3s;
    padding-bottom: 100%;
    overflow: hidden;
}

.xfieldimagegallery li img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

/* Ховер-эффекты */
.xfieldimagegallery li:hover {
    transform: scale(1.05);
    z-index: 2;
}

/* Фикс обтекания */
.xfieldimagegallery + * {
    clear: both;
    margin-top: 30px !important;
}

/* Адаптивность */
@media (max-width: 768px) {
    .xfieldimagegallery {
        grid-template-columns: repeat(3, 1fr);
    }
}
</style>

<!-- Подключение Fancybox -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Оборачиваем изображения в ссылки для Fancybox
    document.querySelectorAll('.xfieldimagegallery img').forEach(img => {
        // Используем текущий src изображения
        const originalSrc = img.src;
        
        // Создаем обертку-ссылку
        const wrapper = document.createElement('a');
        wrapper.className = 'fancybox';
        wrapper.href = originalSrc;
        wrapper.setAttribute('data-fancybox', 'gallery');
        wrapper.setAttribute('data-caption', img.alt || ''); // Добавляем описание, если есть
        
        // Оборачиваем изображение в ссылку
        img.parentNode.replaceChild(wrapper, img);
        wrapper.appendChild(img);
    });

    // Инициализация Fancybox
    Fancybox.bind('[data-fancybox]', {
        // Настройки Fancybox
        Thumbs: {
            autoStart: true,
        },
        Toolbar: {
            display: {
                left: [],
                middle: [],
                right: ['close'],
            },
        },
    });
});
</script>

[xfvalue_galimg]
[/xfgiven_galimg]

есть короткий вариант этого же кода

[xfgiven_galimg]
<style type="text/css">.xfieldimagegallery{list-style:none;padding:0;margin:20px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;clear:both}.xfieldimagegallery li{position:relative;cursor:pointer;transition:transform 0.3s;padding-bottom:100%;overflow:hidden}.xfieldimagegallery li img{position:absolute;width:100%;height:100%;object-fit:cover;border:3px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:all 0.3s ease}.xfieldimagegallery li:hover{transform:scale(1.05);z-index:2}.xfieldimagegallery + *{clear:both;margin-top:30px!important}@media (max-width:768px){.xfieldimagegallery{grid-template-columns:repeat(3,1fr)}}</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<script>document.addEventListener('DOMContentLoaded',function(){document.querySelectorAll('.xfieldimagegallery img').forEach(img=>{const originalSrc=img.src;const wrapper=document.createElement('a');wrapper.className='fancybox';wrapper.href=originalSrc;wrapper.setAttribute('data-fancybox','gallery');wrapper.setAttribute('data-caption',img.alt||'');img.parentNode.replaceChild(wrapper,img);wrapper.appendChild(img)});Fancybox.bind('[data-fancybox]',{Thumbs:{autoStart:!0,},Toolbar:{display:{left:[],middle:[],right:['close'],},},})});</script>
[xfvalue_galimg]
[/xfgiven_galimg]

и получаем результаты работы с адаптивной галереей.

Примеры можно наблюдать на странице в верху и внизу.

Переключение изображений весьма удобное как в десктопной так и в мобильной версии.

 

Так же можно вывести две галереи, одну над публикацией другою под публикацией, для этого создаём два доп.поля называем их galimg1 и galimg2, далее вставляем код примерно так:

<style type="text/css">.xfieldimagegallery{list-style:none;padding:0;margin:20px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;clear:both}.xfieldimagegallery li{position:relative;cursor:pointer;transition:transform 0.3s;padding-bottom:100%;overflow:hidden}.xfieldimagegallery li img{position:absolute;width:100%;height:100%;object-fit:cover;border:3px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:all 0.3s ease}.xfieldimagegallery li:hover{transform:scale(1.05);z-index:2}.xfieldimagegallery + *{clear:both;margin-top:30px!important}@media (max-width:768px){.xfieldimagegallery{grid-template-columns:repeat(3,1fr)}}</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<script>document.addEventListener('DOMContentLoaded',function(){document.querySelectorAll('.xfieldimagegallery img').forEach(img=>{const originalSrc=img.src;const wrapper=document.createElement('a');wrapper.className='fancybox';wrapper.href=originalSrc;wrapper.setAttribute('data-fancybox','gallery');wrapper.setAttribute('data-caption',img.alt||'');img.parentNode.replaceChild(wrapper,img);wrapper.appendChild(img)});Fancybox.bind('[data-fancybox]',{Thumbs:{autoStart:!0,},Toolbar:{display:{left:[],middle:[],right:['close'],},},})});</script>

[xfgiven_galimg1][xfvalue_galimg1][/xfgiven_galimg1]     

<div class="mt-4 text-justify">{full-story}</div>

[xfgiven_galimg2][xfvalue_galimg2][/xfgiven_galimg2]

Чтобы между ними был тег выводящий полное описание. Важно что подключать хак решения вывода галереи нужно только для первого дополнительного поля, второе подденется автоматически поскольку стили и скрипты уже подключены ранее чуть выше.