How can I reset my html image gallery to start with first image after leaving it?

Question

I have a website with multiple image galleries on different parts of the website. When you click on the image of specific gallery it changes to next one of that gallery and so on. What I am trying to achieve is to reset the previous gallery to image 1 when you start clicking on a different gallery. So when the user goes back to the previous gallery, it would start from the first image.

Code used for the galleries:

let projectIndexes = {
 project1: 1,
 project2: 1,

}

showDivs("project1", projectIndexes.project1);
showDivs("project2", projectIndexes.project2);

function plusDivs(project, n) {
  showDivs(project, projectIndexes[project] += n);

}

function showDivs(project, index) {
  let i;
  let x = document.getElementById(project).getElementsByClassName("slidess");
  if (index > x.length) { index = 1 }
  if (index < 1) { index = x.length }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
 }
  x[index - 1].style.display = "block";
  projectIndexes[project] = index;
  let elements = document.getElementById(project).querySelector('.imgslide').children;
  let imgNames = [];
  for (let i = 0; i < elements.length; i++) {
    imgNames.push(elements[i].children[0].children[0].alt);
}

}

<div class="slide">
          <div class="slide-content">
            <div class="nextt" onclick="plusDivs('project1', 1)"></div>
          </div>
          <div class="image-container container prjct">
            <div class="projects" id="project1">
              <div class="imgslide noselect">
                <div class="content-container slidess">
                  <div class="style-3 style-3-left">
                    <img class="imageName" alt="Img" src="">
                  </div>
                  <div class="style-3 style-3-middle">
                    <img class="imageName" alt="Img" src="">
                  </div>
                  <div class="style-3 style-3-right">
                    <img class="imageName" alt="Img" src="">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="slide">
            <div class="slide-content">
              <div class="nextt" onclick="plusDivs('project2', 1)"></div>
            </div>
            <div class="image-container container prjct">
              <div class="projects" id="project2">
                <div class="imgslide noselect">
                  <div class="content-container slidess">
                    <div class="style-3 style-3-left">
                      <img class="imageName" alt="Img" src="">
                    </div>
                    <div class="style-3 style-3-middle">
                      <img class="imageName" alt="Img" src="">
                    </div>
                    <div class="style-3 style-3-right">
                      <img class="imageName" alt="Img" src="">
                    </div>
                  </div>
                  <!-- <div class="img-name"></div> -->
                </div>
              </div>
            </div>
          </div>

I know a way to force show the first element, but it turns out it does that for all projects. What I was not able to find is a way to recognise when clicking on a new project, that the previous and only previous project needs to reset to first image. I have been struggling with this for a while now and cannot make it work, so any help would be highly appreciated. And if something is not clear, let me know and I will clarify things.

Answer 1

If I'm following you correctly, the following should do it.

function resetPriorGalleries(currentProject) {
    var projectDivs = document.getElementsByClassName("projects");

    for (let i = 0; i < projectDivs.length; i++) {
        if (projectDivs[i].id === currentProject)
            return;
        showDivs(projectDivs[1].id, 1);
    }
}

The best place to call it would probably be in the onclicks.

onclick="plusDivs('project2', 1); resetPriorGalleries('project2');"