Я реализовал скрипт 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>
Любая помощь приветствуется!