Nextgen gallery как описание caption обернуть в ссылку?
Wordpress плагин NextGEN Gallery, на странице вывожу галерею NextGEN Basic Thumbnails просмотр caption-view.php с описанием, так вот само изображение оборачивается в ссылку при клике появляется галерея изображений которые можно в модальном окне просматривать, а само описание выводиться под ссылкой в и при клике никак не реагирует,
вопрос: как это описание добавить в эту ссылку? или как обернуть отдельно в ссылку ? или вывести ту же галерею по клике на ?
Код который выводится на странице:
<div class="ngg-gallery-thumbnail"> <a href="http://pech.g1t.ru/wp-content/gallery/barbekyu/barbeku-1.jpg" title="Барбекю комплекс с духовкой и плитой под казан " class="ngg-simplelightbox" rel="6880edb6875b5400ce4e6a832889112a" data-image-id="16" data-src="http://pech.g1t.ru/wp-content/gallery/barbekyu/barbeku-1.jpg" data-thumbnail="http://pech.g1t.ru/wp-content/gallery/barbekyu/thumbs/thumbs-barbeku-1.jpg" data-title="Барбекю комплекс с духовкой и плитой под казан " data-description="Барбекю комплекс с духовкой и плитой под казан "> <img title="Барбекю комплекс с духовкой и плитой под казан " alt="Барбекю комплекс с духовкой и плитой под казан " src="http://pech.g1t.ru/wp-content/gallery/barbekyu/thumbs/thumbs-barbeku-1.jpg" width="240" height="160"> </a> <span>Барбекю комплекс с духовкой и плитой под казан </span> </div> |
<div class="ngg-gallery-thumbnail"> <a href="http://pech.g1t.ru/wp-content/gallery/barbekyu/barbeku-1.jpg" title="Барбекю комплекс с духовкой и плитой под казан " class="ngg-simplelightbox" rel="6880edb6875b5400ce4e6a832889112a" data-image-id="16" data-src="http://pech.g1t.ru/wp-content/gallery/barbekyu/barbeku-1.jpg" data-thumbnail="http://pech.g1t.ru/wp-content/gallery/barbekyu/thumbs/thumbs-barbeku-1.jpg" data-title="Барбекю комплекс с духовкой и плитой под казан " data-description="Барбекю комплекс с духовкой и плитой под казан "> <img title="Барбекю комплекс с духовкой и плитой под казан " alt="Барбекю комплекс с духовкой и плитой под казан " src="http://pech.g1t.ru/wp-content/gallery/barbekyu/thumbs/thumbs-barbeku-1.jpg" width="240" height="160"> </a> <span>Барбекю комплекс с духовкой и плитой под казан </span> </div>
Дополнительно:
Вам сюда, разработчик плагина поможет лучше т.к. он знает лучше свой код
Ответы:
Решил вот так, может пригодиться
// Получаем все элемененты с подписями const captions = document.querySelectorAll('.ngg-gallery-thumbnail span'); // Проходимся по каждому элементу captions.forEach(caption => { // Берем ссылку на изображение // из родительского элемента caption const imgLink = caption.parentElement.querySelector('a'); // Добавляем обработчик клика на подпись caption.addEventListener('click', e => { // Предотвращаем дефолтное поведение e.preventDefault(); // Имитируем клик по ссылке на изображение imgLink.click(); }); }); |
// Получаем все элемененты с подписями const captions = document.querySelectorAll('.ngg-gallery-thumbnail span'); // Проходимся по каждому элементу captions.forEach(caption => { // Берем ссылку на изображение // из родительского элемента caption const imgLink = caption.parentElement.querySelector('a'); // Добавляем обработчик клика на подпись caption.addEventListener('click', e => { // Предотвращаем дефолтное поведение e.preventDefault(); // Имитируем клик по ссылке на изображение imgLink.click(); }); });
а что бы срабатывало в ajax, добавляем еще это
jQuery(document).on('ajaxSuccess', function() { const captions = document.querySelectorAll('.ngg-gallery-thumbnail span'); captions.forEach(caption => { const imgLink = caption.parentElement.querySelector('a'); caption.addEventListener('click', e => { e.preventDefault(); imgLink.click(); }); }); }); |
jQuery(document).on('ajaxSuccess', function() { const captions = document.querySelectorAll('.ngg-gallery-thumbnail span'); captions.forEach(caption => { const imgLink = caption.parentElement.querySelector('a'); caption.addEventListener('click', e => { e.preventDefault(); imgLink.click(); }); }); });
Но может кто то знает более правильное решение, буду благодарен
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
В NextGEN Gallery caption и ссылка на изображение часто выводятся разными шаблонными файлами. Если изображение открывает lightbox, а описание выводится отдельно текстом, нужно переопределить шаблон вывода caption, а не править ядро плагина.
Правильный путь — найти используемый template, скопировать его в папку темы по правилам NextGEN и изменить разметку там. В зависимости от версии это может быть template для Basic Thumbnails или конкретный файл display type.
Идея такая: у изображения уже есть URL/страница/поле, которым можно обернуть caption:
<a href="<?php echo esc_url($image->imageURL); ?>" class="ngg-caption-link"> <?php echo esc_html($image->alttext); ?> </a>
Но точные имена свойств зависят от объекта NextGEN: это может быть
imageURL,thumbURL,alttext,description. Сначала посмотрите, что доступно в шаблоне.Если нужно, чтобы caption открывал тот же lightbox, что и картинка, ссылка caption должна иметь те же data-атрибуты/class, что и ссылка изображения. Иначе она просто перейдёт на файл или страницу.
Не меняйте файлы плагина напрямую: после обновления NextGEN правки пропадут. Используйте override в теме или фильтры/хуки NextGEN, если они есть для выбранного display type.
Если gallery грузится через AJAX, убедитесь, что lightbox повторно инициализируется после подгрузки. Иначе ссылка будет, но модальное окно не откроется.
Итог: копируйте шаблон caption-view/display type в тему, оборачивайте описание в ссылку с теми же параметрами, что у изображения, и тестируйте lightbox после AJAX-подгрузки. Core плагина не трогайте.