как зациклить несколько изображений на одной странице/публикации

[ljvjdjq]

Здравствуйте, я использую openseadragon, и мне удалось ссылаться на одно изображение на моей странице через openseadragon, но как сделать цикл большего количества изображений, чтобы на странице было еще 5 изображений…

В настоящее время у меня есть это как мой 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».

Любой совет поможет, спасибо.

 

[netwixell]

Учитывая, что openseadragon — это ванильная реализация, почему вы ругаетесь на него с помощью jQuery? Аналогично, почему вы объявляете ширину и высоту в разметке там, где это НЕ имеет никакого значения?

Я имею в виду, что их примерный код достаточно сумасшедший, чтобы не ругаться на него дальше.

На самом деле, учитывая, что DIV НЕ имеет никакого отношения к разметке, поскольку он выполняет только функции сценариев, первое, что я бы сделал, это вытащил его из разметки, создал с помощью createElement и прикрепил его с помощью AppendChild.... затем применил средство просмотра к он хранит средство просмотра в массиве.

Что-то вроде (здесь я догадываюсь)

var
seaDragonImages = [
'images/image1.png',
'images/image2.png',
'images/image3.png'
],
viewers = [];
for (var i = 0, imageURI; imageURI = seaDragonImages[i]; i++) {
viewers.push(OpenSeadragon({
element : document.body.appendChild(document.createElement('div')),
url : imageURI,
buildPyramind : false
});
}

Код (разметка): использование параметра элемента и создание его непосредственно в DOM позволяет избежать необходимости вообще возиться с идентификаторами. Просто замените document.body на то, во что вы хотите объединить эти несколько средств просмотра.

Вы хотели создать несколько экземпляров указанных представлений изображений, верно?

Кроме того, попытка «каждого» с помощью обратного вызова просто добавляет бессмысленные накладные расходы. Я знаю, что сейчас «горячо и модно» делать ВСЕ чертовым обратным вызовом. (спасибо функции дерпи-стрелка BS), но это просто дрянной код с точки зрения эффективности. Не добавляйте накладные расходы на функции, если они вам не нужны.