JS querySelector addEventListenerer index getElementsByClassName parent div only

[preppietrash]

I have a page with some images displayed as modals inside accordions, simple 3 image across grid- works as planned click on image modal with caption and close button displayed- these are "open one at a time" accordions- if A is opened B closes / if B is opened A closes / so only 1 accordion is expanded at a time

no navigation I used W3 schools CSS and JS samples to put together to achieve and works as I intended-

I needed navigation for the images once clicked simple back/forward/exit (or the square space grid gallery function)

I have been able to achieve the navigation function with JS query indexing a UL/list

However all images present on the page are indexed, and displayed instead of only the images inside the accordion

Symptoms:

-Accordion A has 10 images

-Accordion B has 7 images

-Accordion C has 9 images

26 images are indexed and cycled thru no matter what image or what accordion is clicked on-

Desired results:

After an image is clicked inside accordion B modal pops up with navigation cycling thru only the 7 images inside Accordion B and the navigation stops once last image is reached.

The same for the other images inside the other accordions, regardless of number of images and position in document, only the images contained within that accordion are cycled.


Code Pen


it was suggested to me at another forum to look at var images = activeSection.querySelectorAll('img');
so it would only index the active section, which makes sense, however; I could not figure out where to insert and what to change in order for that var to work.

thanks

 

[Kuncode]

You can update your JS code to only get the images in the active section when the modal is triggered. Here's an example:

// Get the active section
var activeSection = document.querySelector('.active');

// Get only the images in the active section
var images = activeSection.querySelectorAll('img');

// Index of the image that is currently displayed
var currentIndex = 0;

// Add click event listener to the next button
document.querySelector('.next').addEventListener('click', function() {
  // Increase the current index
  currentIndex++;

  // Check if the current index is larger than the number of images
  if (currentIndex >= images.length) {
    // Reset the current index
    currentIndex = 0;
  }

  // Update the image in the modal
  document.querySelector('.modal-image').src = images[currentIndex].src;
});

// Add click event listener to the previous button
document.querySelector('.prev').addEventListener('click', function() {
  // Decrease the current index
  currentIndex--;

  // Check if the current index is negative
  if (currentIndex < 0) {
    // Reset the current index to the last image
    currentIndex = images.length - 1;
  }

  // Update the image in the modal
  document.querySelector('.modal-image').src = images[currentIndex].src;
});

This code assumes that the active section has a class active, and the modal image has a class modal-image. You'll need to adjust these selectors to match your HTML structure.