- 16, May 2024
- #1
Здравствуйте, я использую openseadragon, и мне удалось ссылаться на одно изображение на моей странице через openseadragon, но как сделать цикл большего количества изображений, чтобы на странице было еще 5 изображений…
В настоящее время у меня есть это как мой javascript
Код (разметка): Итак, мне нужно сделать следующее
(1) исправьте ссылки на ваш «id» и сделайте его переменной, а не статическим именем.
(2) исправьте блок div, включив в него уникальное имя класса, по которому вы можете искать функцию .each().
(3) реализовать цикл «каждый» и обновить ссылки на объекты для идентификатора и пути к изображению.
(4) добавьте 2 или более блока div для проверки вашего кода.
Обратите внимание, что вы можете тестировать код после каждого шага (должно это сделать). Имя класса должно быть что-то вроде «suarrmaterials-zoomable-image». добавьте несколько комментариев, чтобы описать, что происходит.
Самое главное, отделите функциональность «События» от функциональности экранного меню, поскольку сейчас это не ясно в js-файле. Любой совет поможет, спасибо.
В настоящее время у меня есть это как мой javascript
<div id="materials-osd" style="height:460px; width:310px;" data-image="2020/05/dscn0348-1.jpg"></div>
Код (разметка): это мой код, который я ввел в блок WordPress.
var imagePath = "/wp-content/uploads/" + $('#materials-osd').attr('data-image'); var viewer = OpenSeadragon({ id: "materials-osd", prefixUrl: "/wp-content/plugins/zoom-openseadragon/images/", tileSources: { type: "image", url: imagePath, buildPyramind: false } }); })(jQuery);
Код (разметка): Итак, мне нужно сделать следующее
(1) исправьте ссылки на ваш «id» и сделайте его переменной, а не статическим именем.
(2) исправьте блок div, включив в него уникальное имя класса, по которому вы можете искать функцию .each().
(3) реализовать цикл «каждый» и обновить ссылки на объекты для идентификатора и пути к изображению.
(4) добавьте 2 или более блока div для проверки вашего кода.
Обратите внимание, что вы можете тестировать код после каждого шага (должно это сделать). Имя класса должно быть что-то вроде «suarrmaterials-zoomable-image». добавьте несколько комментариев, чтобы описать, что происходит.
Самое главное, отделите функциональность «События» от функциональности экранного меню, поскольку сейчас это не ясно в js-файле. Любой совет поможет, спасибо.