Fetfurmoz
@Fetfurmoz
frontend

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>
  • Вопрос задан
  • 49 просмотров
Пригласить эксперта
Ответы на вопрос 1
Fetfurmoz
@Fetfurmoz Автор вопроса
frontend
Решил вот так, может пригодиться
// Получаем все элемененты с подписями
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();
    });

  });
});


Но может кто то знает более правильное решение, буду благодарен
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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