JavaScript Image Gallery and Dynamic Image Gallery using page classes or create page elements on the fly with code

Here is an example of a JavaScript image gallery maker that creates a simple image gallery with prev/next buttons to navigate through the images:

<div id=”gallery”>

  <img src=”image1.jpg” id=”current-image”>

  <button id=”prev-button”>Prev</button>

  <button id=”next-button”>Next</button>

</div>

<script>

  var images = [“image1.jpg”, “image2.jpg”, “image3.jpg”, “image4.jpg”];

  var currentIndex = 0;

  var gallery = document.getElementById(“gallery”);

  var currentImage = document.getElementById(“current-image”);

  var prevButton = document.getElementById(“prev-button”);

  var nextButton = document.getElementById(“next-button”);

  prevButton.addEventListener(“click”, function() {

    currentIndex–;

    if (currentIndex < 0) {

      currentIndex = images.length – 1;

    }

    currentImage.src = images[currentIndex];

  });

  nextButton.addEventListener(“click”, function() {

    currentIndex++;

    if (currentIndex >= images.length) {

      currentIndex = 0;

    }

    currentImage.src = images[currentIndex];

  });

</script>

This example uses JavaScript to select the elements from the HTML, and add event listeners to the prev/next buttons to navigate through the images in the images array when clicked. The currentIndex variable keeps track of the current image being displayed, and the currentImage.src property is updated to show the next/prev image in the array when the buttons are clicked.

The above code is an example of a JavaScript image gallery maker that creates a simple image gallery with prev/next buttons. The code uses JavaScript to select the necessary elements from the HTML, such as the gallery container, current image, and prev/next buttons. It then adds event listeners to the prev/next buttons, so that when they are clicked, the current image being displayed is updated to the next/prev image in the images array. The currentIndex variable keeps track of the current image being displayed, and it is updated each time the prev/next buttons are clicked. When the current index reaches the end of the images array, it resets to the first image, thus creating an infinite loop.

Dynamic Image Gallery

How to Create an Image Gallery and Dynamic Image Gallery with JavaScript Code

The image gallery can also be used within a function to create multiple image galleries all working independently.  Either creating them on the fly within the code or selecting existing elements with the class name and generating images within those elements.

const output = document.querySelector(‘.output’);

const images = [‘one.jpg’,’two.jpg’,’three.jpg’,’four.jpg’];

/*

for(let x=0;x<12;x++){

   const el = document.createElement(‘div’);

   output.append(el);

   cGallery(el);

}

*/

const eles = document.querySelectorAll(‘.gal’);

eles.forEach(el => {

   cGallery(el);

})

function cGallery(parentEle){

   let curIndex = 0;

   const gallery = document.createElement(‘div’);

   const curImage = document.createElement(‘img’);

   curImage.setAttribute(‘src’,’one.jpg’);

   const btn1 = document.createElement(‘button’);

   btn1.textContent = ‘Prev’;

   const btn2 = document.createElement(‘button’);

   btn2.textContent = ‘Next’;

   parentEle.append(gallery);

   gallery.append(curImage);

   gallery.append(btn1);

   gallery.append(btn2);

   btn1.addEventListener(‘click’,()=>{

       curIndex–;

       if(curIndex<0){

           curIndex = images.length-1;

       }

       console.log(images[curIndex]);

       curImage.src = images[curIndex];

   })

   btn2.addEventListener(‘click’,()=>{

       curIndex++;

       if(curIndex >= images.length){

           curIndex = 0;

       }

       console.log(images[curIndex]);

       curImage.src = images[curIndex];

   })

}