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 single page/post

Discussion in 'jQuery' 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
            }
        });
    })(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
    SEMrush
    (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.
     
    Soupi, May 29, 2020 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,327
    Likes Received:
    1,821
    Best Answers:
    244
    Trophy Points:
    515
    #2
    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.
     
    deathshadow, May 31, 2020 IP