Unite Gallery on a UI page does not work, why?

nick0989 · ‎06-22-2022

I'm trying to use the Unite Gallery to put my images into a gallery on a UI page. This is the error i'm running into.

Uncaught TypeError: e is undefined.

I'm grabbing my images from a script that pulls a presigned url from AWS then populating the image source attribute with the URL. Looping through to add the images to the div, and then calling the unite gallery.

<head>
    This is a script tag url... src="https://cdnjs.cloudflare.com/ajax/libs/unitegallery/1.7.40/js/unitegallery.min.js"
    <link href="https://cdnjs.cloudflare.com/ajax/libs/unitegallery/1.7.40/css/unite-gallery.min.css" rel="stylesheet" type="text/css" />
	  
    <!-- unite gallery theme -->
    This is a script tag url... src="https://cdnjs.cloudflare.com/ajax/libs/unitegallery/1.7.40/themes/tilesgrid/ug-theme-tilesgrid.min.js"
 </head>

<div id="gallery" style="display: none"></div>

Gallery says to have the style on the div as display none.

And the JS is:

var ga = new GlideAjax('deliverables_uploader_s3');
ga.addParam('sysparm_name','presignedImages');
ga.getXML(getAWSData);

function getAWSData(response) {
	var answer = response.responseXML.documentElement.getAttribute("answer");
	var data = JSON.parse(answer);	

	data.forEach(function(item) {
		var image = document.createElement("img");
		image.setAttribute("src", item);
		document.getElementById("gallery").appendChild(image);
	});

	$j("#gallery").unitegallery({
		gallery_theme: "tilesgrid",
		gallery_width: "100%"
	});
}

You can try this code and it'll work if you put images into the div, but won't work if the forEach is adding new images to the div. I don't get it.