Multiple Image Slideshow Javascript Issue

Question

I have 4 image slideshows, and I am having trouble with the Javascript. I have given the div both an id and a class name. The class imageContainer is used in the CSS. Therefore I am using id for the Javascript, but it won't work. I can do this with one image slideshow, but I need to have multiple slideshows on the same page.

The HTML code below is not my actual code, it is just placeholder code I wrote to show what I want to achieve. The Javascript code, however, is my actual code.

I appreciate the help.

function openWin(url) {
  aWindow = window.open(url, "Window 1", "width=400, height=400");
}

var numslides = 0,
  currentslide = 0;
var slides = new Array();

function MakeSlideShow() {
  container = document.getElementsById("Gallery");
  for (i = 0; i < imgs.length; i++) {
    if (imgs[i].className != "imga") continue;
    slides[numslides] = imgs[i];

    if (numslides == 0) {
      imgs[i].style.display = "block";
    } else {
      imgs[i].style.display = "none";
    }
    imgs[i].onclick = NextSlide;
    numslides++;
  }
}

function NextSlide() {
  slides[currentslide].style.display = "none";
  currentslide++;
  if (currentslide >= numslides) currentslide = 0;
  slides[currentslide].style.display = "block";
}
window.onload = MakeSlideShow;

Gallery 1

  
  
  
  


Gallery 2

  
  
  
  


Gallery 3

  
  
  
  


Gallery 4

Triby · Accepted Answer

ID's must be unique, so, the best way to do this is get all galleries by their class name and start getting images from there. Note that slides is now a bidimensional array to hold gallery and images, something like:

slides[0] = [image100, image101, image102, image103];

I've added indexes for gallery and image to each picture using dataset propperty, so, you only need to know wich image was clicked instead of trying to get from currentslide. Also, numslides is provided from gallery length.

var slides = new Array();
    
function MakeSlideShow() 
{
    	var containers = document.getElementsByClassName("imageContainer");
      for(var x = 0; x < containers.length; x++) {
          // Create gallery
          slides[x] = new Array();
          var imgs = containers[x].children;
          for(var i = 0; i < imgs.length; i++) {
              // Add image to current gallery
              slides[x][i] = imgs[i];
              // Set it's display, note that at least 1 images was added
              if(slides[x].length == 1) {
                  imgs[i].style.display = 'block';
              } else {
                  imgs[i].style.display = 'none';
              }
              // Add gallery and image info
              imgs[i].dataset.gallery = x;
              imgs[i].dataset.img = i;
              // Add onclick event, but we need to send current image
              imgs[i].onclick = function() {
                  nextSlide(this);
              }
          }
      }
}

// This function needs to know wich img was clicked
function nextSlide(pic)
{
    // Get gallery and image from dataset to know what to do
    var gallery = pic.dataset.gallery;
    var img = pic.dataset.img;
    // Hide current image
    slides[gallery][img].style.display = 'none';
    // Search for next
    img ++;
    // No more images availabel, go to first
    if(img == slides[gallery].length) {
        img = 0;
    }
    // Show next image
    slides[gallery][img].style.display = 'block';
}
window.onload = MakeSlideShow;

Multiple Image Slideshow Javascript Issue

Answers (1)

Related Questions