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

Здравствуйте, я использую 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». Любой совет поможет, спасибо.

Учитывая, что 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), но это просто дрянной код с точки зрения эффективности. Не добавляйте накладные расходы на функции, если они вам не нужны.