jquery – Lightbox navigation between multiple galleries

I’d like to preface by saying that I have almost no experience with Javascript in general, I am just a hobbyist who learns through trial and error, so bear with me haha.

I used a jQuery script to create a lightbox with navigation through images within one gallery. This is the original script.
I’ve played around with it, and here’s my current code:

$(document).ready(function() {

  var $lightbox = $('<div class ="lightbox"></div>');
  var $lightboxImage = $('<img id = "overlayImg"></img>');
  var $nextLightboxImage = $('<img>');
  var $button1 = $('<div class="slides-prev" id="icon-prev">-------</div>');
  var $button2 = $('<div class="slides-next" id="icon-next">-------</div>');

  $lightbox.hide();
  $lightboxImage.hide();
  $button1.hide();
  $button2.hide();

  $("body").append($lightbox);
  $("body").append($lightboxImage);
  $("body").append($button1);
  $("body").append($button2);


  $(".carousel-item.square").click(function() {
    $lightbox.show();
    $button1.show();
    $button2.show();
    getCurrentImage(this);
    $lightboxImage.show();
  });

  $button1.click(function(event) {
    getPrevImage();
  });

  $button2.click(function(event) {
    getNextImage();
  });

  function getCurrentImage(currentImage) {
    thisImage = $(currentImage).children("img");
    thisImageLocation = $(thisImage).attr("src");
    $lightboxImage.attr("src", thisImageLocation);
  }

  function getPrevImage() {
    prevImageParent = $(thisImage).parent().prev();
    prevImage = $(prevImageParent).children("img");
    prevImageLocation = $(prevImage).attr("src");
    $lightboxImage.attr("src", prevImageLocation);
    getCurrentImage(prevImageParent);
  }

  function getNextImage() {
    nextImageParent = $(thisImage).parent().next();
    nextImage = $(nextImageParent).children("img");
    nextImageLocation = $(nextImage).attr("src");
    $lightboxImage.attr("src", nextImageLocation);
    getCurrentImage(nextImageParent);
  }

  $lightbox.click(function() {
    $lightbox.hide();
    $lightboxImage.hide();
    $lightboxImage.attr("src", "");
    $button1.hide();
    $button2.hide();
  });

});
tr.gallery-square {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

td.gallery-square {
  flex-basis: 130px;
}

.carousel {
  position: relative;
  margin-inline: 5%;
}

.carousel-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  height: 100%;
  margin-right: -100%;
  backface-visibility: hidden;
}

.carousel-item {
  display: block;
}

.carousel-img {
  max-width: 100%;
  max-height: 100%;
  cursor: pointer;
}

.img-fluid {
  max-width: 100%;
}

.carousel-item.square {
  aspect-ratio: 1/1;
}

.carousel-thumbs .row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 5px;
  margin: 0;
}

.lightBox {
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  z-index: 0;
}

#overlayImg {
  position: fixed;
  display: none;
  max-width: 500px;
  max-height: 500px;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  box-shadow: 0 0 50px 0 #ff47ad;
  align-items: center;
  justify-content: center;
}

#icon-prev {
  display: none;
  color: transparent;
  position: fixed;
  top: 50%;
  left: 25%;
  opacity: 1;
  z-index: 15;
}

#icon-next {
  display: none;
  color: transparent;
  position: fixed;
  top: 50%;
  right: 25%;
  opacity: 1;
  z-index: 15;
}

.lightBox {
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  z-index: 0;
}

#overlayImg {
  position: fixed;
  display: none;
  max-width: 500px;
  max-height: 500px;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  box-shadow: 0 0 50px 0 #ff47ad;
  align-items: center;
  justify-content: center;
}

#icon-prev {
  display: none;
  color: transparent;
  position: fixed;
  top: 50%;
  left: 25%;
  opacity: 1;
  z-index: 15;
}

#icon-next {
  display: none;
  color: transparent;
  position: fixed;
  top: 50%;
  right: 25%;
  opacity: 1;
  z-index: 15;
}

.slides-next {
  right: 0;
  border-radius: 3px 0 0 3px;
  background-image: url(http://meawniverse-2.e-monsite.com/medias/images/puce5r.gif);
}

.slides-prev {
  background-image: url(http://meawniverse-2.e-monsite.com/medias/images/puce5l.gif);
}

.slides-prev,
.slides-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  user-select: none;
  color: transparent!important;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>


<body>
<div class="page">
  <table class="center">
    <tbody>
      <tr class="gallery-square">
        <td align="center" class="gallery-square">
          <div class="carousel slide gallery-square">
            <div class="carousel-inner">
              <div class="carousel-item square active"><img class="carousel-img img-fluid" src="https://i.ibb.co/0DNHt2D/sd-ssf-sage1.jpg" /></div>
              <div class="carousel-item square"><img class="carousel-img img-fluid" src="https://i.ibb.co/16P2dRq/sd-ssf-sage2.jpg" /></div>
            </div>
          </div>

          <div class="carousel slide carousel-thumbs">
            <div class="carousel-inner">
              <div class="carousel-item active">
                <div class="row">
                  <div class="thumb col-2 selected"><img class="img-fluid" src="https://i.ibb.co/0DNHt2D/sd-ssf-sage1.jpg" /></div>
                </div>
              </div>
            </div>
          </div>
        </td>
        <td align="center" class="gallery-square">
          <div class="carousel slide gallery-square">
            <div class="carousel-inner">
              <div class="carousel-item square active"><img class="carousel-img img-fluid" src="https://i.ibb.co/0ZjYpvZ/sd-ssf-cassie1.jpg" /></div>
              <div class="carousel-item square"><img class="carousel-img img-fluid" src="https://i.ibb.co/198s9Sr/sd-ssf-cassie2.jpg" /></div>
            </div>
          </div>

          <div class="carousel slide carousel-thumbs">
            <div class="carousel-inner">
              <div class="carousel-item active">
                <div class="row">
                  <div class="thumb col-2 selected"><img class="img-fluid" src="https://i.ibb.co/0ZjYpvZ/sd-ssf-cassie1.jpg" /></div>
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
</body>

Sorry this is very messy and quite long (I removed some of the code that is irrelevant to this situation) but here’s the page it is displayed on.

As you can see, navigation stops once it reached the last “img” child of “.carousel-item.square” within the same “.carousel-inner” parent. What I want to do, is the “prev” and “next” button to be able to reach the “img” child of ALL “.carousel-item.square” containers within the main “.page” container. But I dont want the navigation to display images parented by “.thumb.col-2”.

I tried messing around with the “.parent()” “.next()” “.children()” values ​​but to no avail. I feel like the solution is very simple but It’s slipping through my hands! I’ve been on this issue for hours now… A bit of help would be gladly appreciated. I’m sorry if my explanations are confusing!!

Thank you for reading and thanks in advance for any type of help!!!

Leave a Comment