1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to loop multiple images on a single page/post

Discussion in 'HTML & Website Design' started by Soupi, May 29, 2020.

  1. #1
    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
    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"
    add some comments to describe what is going on. Most importantly, separate the Events functionality from the OSD functionality as right now it isn't clear in the js file.
    Any advice helps thank you.
    Last edited: May 29, 2020
    Soupi, May 29, 2020 IP