Создание нескольких экземпляров с помощью nzbin PhotoViewer javascript - PullRequest
0 голосов
/ 20 апреля 2020

Я реализовал скрипт PhotoViewer.js, который идет отсюда:

Responsive-Photo-Viewer. html

Я новичок в JavaScript. Сценарий, который я добавил ниже, работает хорошо. Я храню все фотографии в одной библиотеке. Но я хотел бы добавить второй или третий экземпляр на той же странице. Я не смог найти ничего связанного с этим в документации.

По умолчанию HTML показывает data-group="a" в качестве идентификатора, как показано ниже. Я добавил второй альбом и просто назвал их элементы как data-group="b", но это не сработало.

Это должно прояснить все:

<div id="food1">
    <div class="image-set">
      <a data-gallery="manual" data-title="Salads" data-group="a"
         href="img/slide01.jpg">
        <img src="img/slide01.png" alt="Salads"> /*thumb*/
      </a>
      <a data-gallery="manual" data-title="Soups" data-group="a"
         href="img/slide02.jpg">
        <img src="img/slide02.png" alt="Soups"> /*thumb*/
      </a>
      <a data-gallery="manual" data-title="Desserts" data-group="a"
         href="img/slide03.jpg">
        <img src="img/slide03.png" alt="Desserts"> /*thumb*/
      </a>
</div>


<div id="food2">
    <div class="image-set">
      <a data-gallery="manual" data-title="Fish" data-group="b"
         href="img/slide04.jpg">
        <img src="img/slide04.png" alt="Fish"> /*thumb*/
      </a>
      <a data-gallery="manual" data-title="Meat" data-group="b"
         href="img/slide05.jpg">
        <img src="img/slide05.png" alt="Meat"> /*thumb*/
      </a>
      <a data-gallery="manual" data-title="Bacon" data-group="b"
         href="img/slide06.jpg">
        <img src="img/slide06.png" alt="Bacon"> /*thumb*/
      </a>
</div>

JavaScript, который инициализирует Плагин:

<script>
window.prettyPrint && prettyPrint();

// initialize manually with a list of links
$('[data-gallery=manual]').click(function (e) {

  e.preventDefault();

  var items = [],
    options = {
      index: $(this).index(),
    };

  $('[data-gallery=manual]').each(function () {
    let src = $(this).attr('href');
    items.push({
      src: $(this).attr('href'),
      title: $(this).attr('data-title')
    });
  });

  new PhotoViewer(items, options);

});
</script>

Любая помощь приветствуется!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...