Добавьте функциональность лайтбокса к изображениям в списке, на которые нельзя нажимать - PullRequest
Новая
       7

Добавьте функциональность лайтбокса к изображениям в списке, на которые нельзя нажимать

0 голосов
/ 13 февраля 2019

Я использую определенную тему WordPress с редактором, который имеет собственную функцию галереи.Невозможно создать стандартную галерею WordPress с этим редактором тем.У него есть собственная галерея, которая генерирует код, подобный следующему: 

<ul class="wp-block-gallery columns-3 is-cropped">
<li class="blocks-gallery-item"><figure><img src="http://www.website.com/wp-content/uploads/2019/01/stefaan-25-1024x768.jpg" alt="" data-id="211" data-link="http://www.website.com/teset/stefaan-25/" class="wp-image-211"><figcaption><br></figcaption></figure>
</li>

<li class="blocks-gallery-item"><figure><img src="http://www.website.com/wp-content/uploads/2019/01/stefaan-en-joerie-25-12-1.jpg" alt="" data-id="218" data-link="http://www.website.com/teset/stefaan-en-joerie-25-12-2/" class="wp-image-218" ></figure>
</li>

<li class="blocks-gallery-item"><figure><img src="http://www.website.com/wp-content/uploads/2019/01/stefan-15-1-1024x768.jpg" alt="" data-id="219" data-link="http://www.website.com/teset/stefan-15-2/" class="wp-image-219"></figure>
</li>

Теперь я хочу добавить некоторые функциональные возможности лайтбокса.Есть ли какой-нибудь jquery скрипт или плагин, который может работать с этим кодом?Обернуть изображения тегом href, а затем запустить еще немного кода jquery, чтобы каждая ul могла стать галереей лайтбокса с изображениями в ней?

1 Ответ

0 голосов
/ 14 февраля 2019

Если бы вы могли обернуть ваши изображения ссылками, тогда подойдет любой скрипт типа лайтбокса.Но, если вы не можете изменить макет, вы можете, например, использовать fancybox, например: 

var $images = $('.wp-block-gallery img');
var fb = [];

$images.each(function(index, img) {
   fb.push({
     src : img.src,
     type: 'image',
     $orig : $(img).parent()
   })
});

$('.wp-block-gallery').on('click', 'img', function() {
  $.fancybox.open(fb, {
    // Here you can put your custom options
  }, $images.index(this))
});

Демо - https://codepen.io/anon/pen/LqJMwJ

...