Лайтбокс Prime-UI работает только один раз
Я просмотрел различные вопросы о стековом потоке, которые могут быть связаны с этой проблемой, и пара вопросов явно является одной и той же проблемой, однако на них не было ответа. Я снова задаю вопрос и предоставляю свой вариант использования, чтобы выяснить, дает ли он какую-то ясность потенциальным дающим ответы.
Я просто пытаюсь смоделировать лайтбокс для primeui, но когда я его запускаю, у меня возникают следующие проблемы.
Возникают две проблемы:
1. Только самый первый щелчок на любом из двух изображений полностью открывает лайтбокс. После его закрытия при втором и каждом следующем щелчке (независимо от того, какое изображение) отображается только загрузчик, но не фактическое изображение. После первого щелчка консоль JS сообщает:
"Uncaught TypeError: this.imageDisplay.zIndex не является функцией в $.(Анонимная функция).(Анонимная функция)._ showNavigators"
2.В лайтбоксе нет кнопок "Предыдущая / Следующая" или нижнего колонтитула, как в витрине.
Ниже приведена версия примера кода, который я использую
<!DOCTYPE html>
<html>
<head>
<title>
Prime UI Dialog Sample
</title>
<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/primeui/4.1.15/primeui.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript" src="primeui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/x-tag/1.5.11/x-tag-core.min.js"></script>
<script type="text/javascript" src="primeelements.min.js"></script>
<script>
$(function() {
$('#images').puilightbox();
});
</script>
</head>
<body>
<div id="images">
<a href="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Elaborate_ironwork_galleries_on_the_corner_of_Royal_and_St._Peter_streets_New_Orleans.jpg/1280px-Elaborate_ironwork_galleries_on_the_corner_of_Royal_and_St._Peter_streets_New_Orleans.jpg">
<img style="width: 240px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Elaborate_ironwork_galleries_on_the_corner_of_Royal_and_St._Peter_streets_New_Orleans.jpg/1280px-Elaborate_ironwork_galleries_on_the_corner_of_Royal_and_St._Peter_streets_New_Orleans.jpg" alt="The French Quarter 1" />
</a>
<a href="https://upload.wikimedia.org/wikipedia/commons/b/b2/French_Quarter_example_of_late_18th-century_Spanish_architecture_built_after_the_Great_Fires_of_1788_and_1794.jpg">
<img style="width: 240px;" src="https://upload.wikimedia.org/wikipedia/commons/b/b2/French_Quarter_example_of_late_18th-century_Spanish_architecture_built_after_the_Great_Fires_of_1788_and_1794.jpg" alt="The French Quarter 2" />
</a>
</div>
</body>
</html>
Я попытался удалить ссылки на jquery в отведениях, которые я нашел, предполагая, что primeui включает в себя копию jquery, и эти две версии могут конфликтовать. Это не помогло.
Я пробовал разные версии разных библиотек. Это не помогло.
Я нашел пример работающего компонента primeui в Plunker и изменил все, кроме ссылок на сценарии javascript. Это не помогло.
У кого-нибудь есть идеи, в чем может быть проблема?