В fancybox показывать только фотографии из указанных c div в лайтбокс - PullRequest
Новая
       44

В fancybox показывать только фотографии из указанных c div в лайтбокс

1 голос
/ 30 января 2020

У меня есть 2 пункта на моей странице, где есть несколько картинок, использующих fancybox. Когда пользователь нажимает на фотографию, он видит изображение в lightbox, в то время как другие изображения отображаются в виде большого пальца с правой стороны.

enter image description here

Что я пытаюсь сделать, так это то, что пользователь в представлении выше может видеть только те фотографии div, которые нажали, а не все! Поэтому, если он щелкнет 1-е изображение первого div, то он должен видеть только 2 изображения в виде большого пальца ...

Я пытался использовать data-fancybox="images1" и data-fancybox="images2" в якорях каждый div, но это не сработало .. 

$('[data-fancybox="images"]').fancybox({
  buttons: [
    'slideShow',
    'zoom',
    'fullScreen',
    'download',
    'thumbs',
    'close'
  ],
  thumbs: {
    autoStart: true
  }
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.js"></script>


<div class="row mb-5">
<a href="https://source.unsplash.com/IvfoDk30JnI/1500x1000" data-fancybox="images" data-caption="caprtion..">
  <img src="https://source.unsplash.com/IvfoDk30JnI/240x160" />
</a>

<a href="https://source.unsplash.com/0JYgd2QuMfw/1500x1000" data-fancybox="images" data-caption="caprtion..">
  <img src="https://source.unsplash.com/0JYgd2QuMfw/240x160" />
</a>
</div>


<div class="row">
<a href="https://source.unsplash.com/xAgvgQpYsf4/1500x1000" data-fancybox="images" data-caption="caprtion..">
  <img src="https://source.unsplash.com/xAgvgQpYsf4/240x160" />
</a>
</div>

1 Ответ

1 голос
/ 30 января 2020

Использование одинаковых значений для атрибута data-fancybox (например, data-fancybox="images1") скажет сценарию сгруппировать их, demo: 

$('[data-fancybox]').fancybox({
  buttons: [
    'slideShow',
    'zoom',
    'fullScreen',
    'download',
    'thumbs',
    'close'
  ],
  thumbs: {
    autoStart: true
  }
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.js"></script>


<div class="row mb-5">
<a href="https://source.unsplash.com/IvfoDk30JnI/1500x1000" data-fancybox="images1" data-caption="caprtion..">
  <img src="https://source.unsplash.com/IvfoDk30JnI/240x160" />
</a>

<a href="https://source.unsplash.com/0JYgd2QuMfw/1500x1000" data-fancybox="images1" data-caption="caprtion..">
  <img src="https://source.unsplash.com/0JYgd2QuMfw/240x160" />
</a>
</div>


<div class="row">
<a href="https://source.unsplash.com/xAgvgQpYsf4/1500x1000" data-fancybox="images2" data-caption="caprtion..">
  <img src="https://source.unsplash.com/xAgvgQpYsf4/240x160" />
</a>
</div>

Но, чтобы применить ваши настройки, убедитесь, что ваш селектор действительно возвращает ваши элементы. Например, если у вас есть $('[data-fancybox="images"]').fancybox({..});, он не будет выбирать элементы, имеющие data-fancybox="images1"

...