how to loop multiple images on single page/post

Hello I am using openseadragon, and I was able to reference one image on my page via openseadragon, but how to do loop more images so I can have 5 more images on the page…

Currently I have this as my javascript

    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); 

Code (markup):

This is my code I inputted into a wordpress block

<div id="materials-osd" style="height:460px; width:310px;" data-image="2020/05/dscn0348-1.jpg"></div>

Code (markup):

So I need to do the following
(1) fix references to your "id" and make it a variable vs static name

(2) fix the div block to include a unique class name that you can search on for the .each() function

(3) implement the "each" loop and update the object references for id and imagepath

(4) add 2 or more div blocks to test your code. Note that you can test the code after each step (should do that) .
The classname be something like "suarrmaterials-zoomable-image"

Any advice helps thank you.

 

Given that openseadragon is a vanilla implementation, why are you pissing on it with the mental huffing midgetry that is jQuery? Likewise why are you declaring width and height in the markup where it has NO business being?

I mean, their example code is derpy enough without pissing on it further.

Really though, given the DIV has NO business in the markup since it's scripting only functionality, first thing I'd do is get it out of the markup and create it with createElement and attach it with appendChild.... then apply the viewer to it storing the viewer in an array.

Something like (guessing wildly here)

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
	});
}

Code (markup):

Using the element parameter and creating them directly on the DOM dodges having to screw around with ID's altogether. Just swap document.body for whatever you want to splice these multiple viewers into.

You were looking to make multiple instances of said image views, right?

Also, trying to "each" with a calllback just adds pointless overhead. I know it's "hot and trendy" right now to make EVERYTHING a blasted callback (thanks to the derpy arrow function BS), but that's just really crappy code from an efficiency standpoint. Don't add function overhead when you don't need it.