Image gallery with forward and backward buttons to rotate through image list using JavaScript

Using JavaScript with Hype
7

Here is an updated version of @DBear 's excellent Simple Gallery.

Instead of creating an <img> tag , we create <div> Tags on the fly to hold images as their background image.
We insert the divs into a Group named as ‘ImageGroup’

The images are in the same array but we use a for loop to iterate over them to create and add the divs.

Now we can then move the ‘ImageGroup’ from left to right using the getter/setter API, this will in turn move the newly created divs that it holds. Making the background images slide across.
The ‘ImageGroup’ is inside another group named Frame. The Frame’s overflow is set to hidden.

We use the known width of the ‘ImageGroup’ 400px at the start as a base number to determine the first slide length.
We then use that number to calculate all left and right slides.

	var images = ["Pasted","Pasted-1","Pasted-2","Screen-Shot","flame2"]; // array of image names in resource folder
	 
	 //-- Get the picture frame details to use later in the code.
	 
	var imageGroup = hypeDocument.getElementById("imageGroup");
	var slideDistence = hypeDocument.getElementProperty(imageGroup, 'width');
	var imageGroupHeight  = hypeDocument.getElementProperty(imageGroup, 'height');
	
	
	
	var imageNumber = hypeDocument.getElementById("imageNumber");
	
	var startPosition =0;  //-- style position of first div
	 
	 //-- create div and set its attributes
for (i = 0; i < images.length; i++) { 
 	
 	var picture_frame = document.createElement("DIV");
	 	picture_frame.style.position= 'absolute';
		picture_frame.style.width = `${slideDistence}px`; //-we use the width of the imageGroup here for convenience .
		picture_frame.style.height = `${imageGroupHeight}px`; //-we use the height of the imageGroup here for convenience .
		picture_frame.style.left = `${startPosition}px`;
	 
		picture_frame.style.backgroundImage =  "url(${resourcesFolderName}/" + images[i]+ ".jpg)";
		picture_frame.style.backgroundSize = "contain"; 
		picture_frame.style.backgroundRepeat=  "no-repeat"; 
		picture_frame.style.backgroundPosition = "center";
		 
		
		 //-- add div to the group.
 		imageGroup.appendChild(picture_frame);
 		
 		
 startPosition +=  slideDistence // increase the position ready for the next div  (in this case  by 400  which is the width of the imageGroup)
 imageGroup.style.width = `${startPosition}px`; //-- increase the size of the holding group.
}
	

	var counter = 0;
	var imageCounter = 1;

	var arrow_right = document.getElementById("arrow_right"); // right button
	var arrow_left = document.getElementById("arrow_left"); // left button
	imageNumber.innerText = `1 of ${images.length}`;

	
	
	
	
	arrow_right.addEventListener("click", function () { // listening for user click on right arrow
	var imageGroupLeft = hypeDocument.getElementProperty(imageGroup, 'left');
	 
		counter += 1; // when clicked counter variable increases by 1
		if (counter >= images.length) { // checks to see if counter variable is greater than the array of filenames
			counter = images.length-1; // if it is greater or equal to it then we set the counter to this value
		} else {
		imageCounter++;
			 		hypeDocument.setElementProperty(imageGroup, 'left',imageGroupLeft - slideDistence, 1.0, 'easeinout') //-- slide the group
			 		
			 		imageNumber.innerText = `${imageCounter} of ${images.length}`;	
		}
		
	});
	
	arrow_left.addEventListener("click", function () { // listening for user click on left arrow
	var imageGroupLeft = hypeDocument.getElementProperty(imageGroup, 'left');
 
		counter -= 1;
		
		if (counter < 0) { // checks to see if counter variable is less than 0
			counter = 0; // if it is then set the counter to 0
		} else {
			 imageCounter--;
			 
			hypeDocument.setElementProperty(imageGroup, 'left', imageGroupLeft + slideDistence, 1.0, 'easeinout')  //-- slide the group
			imageNumber.innerText = `${imageCounter} of ${images.length}`;
		}
	});

There is also code to centre and size the images to the divs.

imageGallerySlide.v2.hypetemplate.zip (591.6 KB)

1 Like