How do I get jQuery to load the clicked image?

Question

I've got an image gallery set up and what I'm trying to make happen is when a user clicks on an image in the gallery it opens a Lightbox modal window which the user can then scroll through the gallery with next and previous buttons in the modal window. The issue I'm having is that I can't seem to get jQuery to load the clicked image.

Still new to coding, so thank you in advance for any information you can provide :)

const images = document.querySelectorAll('.gallery-container .img-fluid');
let i = 0;
       
$( document ).ready(function() {
 
  
       $('.lightbox-trigger').click(function(e) {
        e.preventDefault();

         
         $('.gallery-container').addClass('lightbox-active');
         $('#lightbox').removeClass('lightbox-hidden');
         
          for(i = 0; i<images.length; i++) {
          $(".lightbox-image").attr('src', 'images[i]');
         }    

         
         $('.prev').on('click', function() {
            imageIndex = (imageIndex + images.length -1) % (images.length);    
            $("#image").attr('src', images[i]);
         })
         
           $(".next").on("click", function(){
            imageIndex = (imageIndex+1) % (images.length);    
            $("#image").attr('src', images[i]);
        });
      
         
    });

    $('.closeBtn').click(function() { 
        // $('#lightbox').hide();
      $('.gallery-container').removeClass('lightbox-active');
      $('#lightbox').addClass('lightbox-hidden');
    });
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: black;
}

body {
  color: white;
  font-family: 'Montserrat';
}

/* ///////////////////// NAVBAR //////////////////////// */
.navbar-style {
  box-shadow: 0 4px 2px -2px #333;
}

.nav-logo {
  width: 10%;
}

.nav-custom img {
  width: 64px;
}

.icon-bar {
  background: white;
}

/* ///////////////////// NAVBAR //////////////////////// */

/* ///////////////////// MAIN AREA //////////////////////// */

.slogan h1 {
  font-weight: 200;
  font-size: 1.2rem;
  margin-top: 2rem;
  margin-left: 2rem;
}

.background-img img {
  width: 80%;
}

.button {
  margin-top: 2rem;
  margin-left: 2rem;
  background-color: black;
}

.blurb {
  font-family: 'League Script', cursive;
  font-weight: 100;
  margin-top: 2rem;
  margin-left: 2rem;
}

/* ///////////////////// FRONT GALLERY //////////////////////// */



.gallery-container {
  display: flex;
  justify-content: center;
  border: solid 1px white;
  margin: 0, auto;
}

.gallery-container img:hover {
  transform: scale(1.1);
}

.flex-column {
  justify-content: space-between; /* have images appear as a four sided block */
  max-width: 250px;
}

/* ---------- LIGHTBOX ---------- */

#lightbox {
  position: fixed; 
/*  ^keeps lightbox window in the current viewport  */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0,0,0,.7);
  
}

/* LIGHTBOX CLOSE BUTTON */
#lightbox .closeBtn {
  text-align: right;
  margin-right: 20px;
  font-size: 3rem;
}

.closeBtn {
  cursor: pointer;
}

/* LIGHTBOX IMAGE */
#lightbox img {
  box-shadow: 0 0 25px #111;
  max-width: 300px;
}

#content {
  display: flex;
  justify-content: center;
}

#content img{
  position: fixed;
  top: 0;
  margin-top: 4rem;
  width: 100%;
}

/* BLUR BACKGROUND WHEN LIGHTBOX IS ACTIVE */
.lightbox-active {
  filter: blur(5px);
}


/* LIGHTBOX ARROWS */
.arrowBTN {
  position: absolute;
  text-decoration: none;
  color: white;
  cursor: pointer;
  font-size: 2rem;
  text-align: center;
  margin-top: 25%;
  transform: translateY(-25%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.5);
}

.prev {
  left: 0;
  margin-left: 1rem;
}

.next {
  right: 0;
  margin-right: 1rem;
}

#lightbox a {
  text-decoration: none;
   color: white;
}

#lightbox a:hover {
   background-color: rgba(255,255,255, 0.2);
}

.lightbox-hidden {
  display: none;
}

.lightbox-show {
  opacity: 1;
}




















@media screen and (min-width: 1650px) {
  .flex-column {
    display: flex;
    justify-content: space-evenly;
  }
}

img {
  margin: 5px;
}



/* ///////////////////////////////////// */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <section id="front-gallery">
      <div class="container-fluid gallery-container">
        <div class="d-flex flex-row">
          
<!--   ////////  1st COLUMN   ////////    -->    
          <div class="d-flex flex-column">
<!--      FIRST IMAGE        -->
            <a style="display:contents" href="https://cdn.pixabay.com/photo/2017/04/05/17/45/girl-2205813_1280.jpg" class="lightbox-trigger">
            <img src="https://cdn.pixabay.com/photo/2017/04/05/17/45/girl-2205813_1280.jpg" alt="woman black and white photo" class="img-fluid image">
            </a>
            
<!--      SECOND IMAGE        -->
            <a style="display:contents" href="https://cdn.pixabay.com/photo/2014/10/13/18/10/woman-487090_1280.jpg" class="lightbox-trigger">
            <img src="https://cdn.pixabay.com/photo/2014/10/13/18/10/woman-487090_1280.jpg" alt="dog" class="img-fluid">
            </a>
          </div>
          
<!--   ////////  2nd COLUMN   ////////    -->       
    <div class="d-flex flex-column">
<!--      THIRD IMAGE        -->
       <a style="display:contents" href="https://cdn.pixabay.com/photo/2016/11/29/13/00/black-1869685_1280.jpg" class="lightbox-trigger">
            <img src="https://cdn.pixabay.com/photo/2016/11/29/13/00/black-1869685_1280.jpg" alt="woman color photo" class="img-fluid">
      </a>
<!--      FOURTH IMAGE        -->   
             <a style="display:contents" href="https://cdn.pixabay.com/photo/2015/03/04/19/42/woman-659352_1280.jpg" class="lightbox-trigger">
            <img src="https://cdn.pixabay.com/photo/2015/03/04/19/42/woman-659352_1280.jpg" alt="woman with tattoos" class="img-fluid">
      </a>
            </div>
          
 <!--   ////////  3rd COLUMN   ////////    -->     
  <div class="d-flex flex-column">
<!--      FIFTH IMAGE        -->  
                 <a style="display:contents" href="https://cdn.pixabay.com/photo/2015/07/02/10/11/person-828630_1280.jpg" class="lightbox-trigger">
            <img src="https://cdn.pixabay.com/photo/2015/07/02/10/11/person-828630_1280.jpg" alt="outline of man photo" class="img-fluid">
    </a>
    
<!--      SIXTH IMAGE        -->   
     <a style="display:contents" href="https://cdn.pixabay.com/photo/2017/05/27/17/52/model-2349037_1280.jpg" class="lightbox-trigger">
            <img src="https://cdn.pixabay.com/photo/2017/05/27/17/52/model-2349037_1280.jpg" alt="woman under water" class="img-fluid">
    </a>
            </div>
          
<!--   ////////  4th COLUMN   ////////    -->              
  <div class="d-flex flex-column">
 <!--      SEVENTH IMAGE        -->  
         <a style="display:contents" href="https://cdn.pixabay.com/photo/2016/02/11/19/14/couple-1194312_1280.jpg" class="lightbox-trigger">
            <img src="https://cdn.pixabay.com/photo/2016/02/11/19/14/couple-1194312_1280.jpg" alt="couple" class="img-fluid">
    </a>

<!--      EIGHTH IMAGE        -->  
             <a style="display:contents" href="https://cdn.pixabay.com/photo/2017/11/03/10/34/studio-2913936_1280.jpg" class="lightbox-trigger">
            <img src="https://cdn.pixabay.com/photo/2017/11/03/10/34/studio-2913936_1280.jpg" alt="woman smiling" class="img-fluid">
               </a>
            </div>
          
 <!--   ////////  5th COLUMN   ////////    -->             
  <div class="d-flex flex-column">
<!--      NINTH IMAGE        -->    
             <a style="display:contents" href="https://cdn.pixabay.com/photo/2016/11/14/04/08/selfie-1822563_1280.jpg" class="lightbox-trigger">
              <img src="https://cdn.pixabay.com/photo/2016/11/14/04/08/selfie-1822563_1280.jpg" alt="kids taking selfie in field" class="img-fluid">
               </a>
    
<!--      TENTH IMAGE        -->  
                        <a style="display:contents" href="https://cdn.pixabay.com/photo/2021/04/02/12/01/woman-6144753_1280.jpg" class="lightbox-trigger">
              <img src="https://cdn.pixabay.com/photo/2021/04/02/12/01/woman-6144753_1280.jpg" alt="woman with eye makeup" class="img-fluid">
                          </a>
            </div>
          
 <!--   ////////  6th COLUMN   ////////    -->             
  <div class="d-flex flex-column">
<!--      ELEVENTH IMAGE        -->   
             <a style="display:contents" href="https://cdn.pixabay.com/photo/2016/10/27/03/43/radio-1773304_1280.jpg" class="lightbox-trigger">
              <img src="https://cdn.pixabay.com/photo/2016/10/27/03/43/radio-1773304_1280.jpg" alt="vintage radio" class="img-fluid">
               </a>
    
<!--      TWELFTH IMAGE        -->    
                        <a style="display:contents" href="https://cdn.pixabay.com/photo/2015/06/24/01/16/photographer-819365_1280.jpg" class="lightbox-trigger">
              <img src="https://cdn.pixabay.com/photo/2015/06/24/01/16/photographer-819365_1280.jpg" alt="outdoor photographer" class="img-fluid">
                          </a>
            </div>
          
 <!--   ////////  7th COLUMN   ////////    -->             
  <div class="d-flex flex-column">
    
<!--      THITEENTH IMAGE        -->  
             <a style="display:contents" href="https://cdn.pixabay.com/photo/2015/04/12/18/05/man-719228_1280.jpg" class="lightbox-trigger">
              <img src="https://cdn.pixabay.com/photo/2015/04/12/18/05/man-719228_1280.jpg" alt="man thinking" class="img-fluid">
               </a>
    
<!--      FOURTEENTH IMAGE        -->   
                        <a style="display:contents" href="https://cdn.pixabay.com/photo/2016/11/29/01/34/man-1866572_1280.jpg" class="lightbox-trigger">
              <img src="https://cdn.pixabay.com/photo/2016/11/29/01/34/man-1866572_1280.jpg" alt="man with jacket" class="img-fluid">
                          </a>
            </div>
          
          
          </div> <!-- END FLEX ROW -->
      </div>  <!-- END CONTAINER -->
    </section>



<!-- ////////////////////////////// -->
<div id="lightbox" class="lightbox-hidden">
  <p class="closeBtn">&times;</p>
  <div id="content">
    <img class="lightbox-img" id="lightbox-image" src="https://cdn.pixabay.com/photo/2016/11/14/04/08/selfie-1822563_1280.jpg" />
  </div>
 
  <a id= "prev" class="prev arrowBTN" aria-label="previous page">&#10094;</a>
  <a id="next" class="next arrowBTN" aria-label="next page">&#10095;</a>
</div>

score 0 · Answer 1 · answered Oct 22 '21 at 17:41

Is this what you're looking for?

You were interchanging the i variable with the imageIndex variable.

const images = document.querySelectorAll('.gallery-container .img-fluid');
let imageIndex = 0;

$(document).ready(function() {


  $('.lightbox-trigger').click(function(e) {
    e.preventDefault();


    $('.gallery-container').addClass('lightbox-active');
    $('#lightbox').removeClass('lightbox-hidden');

    for (i = 0; i < images.length; i++) {
      $(".lightbox-image").attr('src', 'images[i]');
    }


    $('.prev').on('click', function() {
      imageIndex = (imageIndex + images.length - 1) % (images.length);
      $("#content").empty().append(images[imageIndex]);
    })

    $(".next").on("click", function() {
      imageIndex = (imageIndex + 1) % (images.length);
      $("#content").empty().append(images[imageIndex]);

    });


  });

  $('.closeBtn').click(function() {
    // $('#lightbox').hide();
    $('.gallery-container').removeClass('lightbox-active');
    $('#lightbox').addClass('lightbox-hidden');
  });
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: black;
}

body {
  color: white;
  font-family: 'Montserrat';
}


/* ///////////////////// NAVBAR //////////////////////// */

.navbar-style {
  box-shadow: 0 4px 2px -2px #333;
}

.nav-logo {
  width: 10%;
}

.nav-custom img {
  width: 64px;
}

.icon-bar {
  background: white;
}


/* ///////////////////// NAVBAR //////////////////////// */


/* ///////////////////// MAIN AREA //////////////////////// */

.slogan h1 {
  font-weight: 200;
  font-size: 1.2rem;
  margin-top: 2rem;
  margin-left: 2rem;
}

.background-img img {
  width: 80%;
}

.button {
  margin-top: 2rem;
  margin-left: 2rem;
  background-color: black;
}

.blurb {
  font-family: 'League Script', cursive;
  font-weight: 100;
  margin-top: 2rem;
  margin-left: 2rem;
}


/* ///////////////////// FRONT GALLERY //////////////////////// */

.gallery-container {
  display: flex;
  justify-content: center;
  border: solid 1px white;
  margin: 0, auto;
}

.gallery-container img:hover {
  transform: scale(1.1);
}

.flex-column {
  justify-content: space-between;
  /* have images appear as a four sided block */
  max-width: 250px;
}


/* ---------- LIGHTBOX ---------- */

#lightbox {
  position: fixed;
  /*  ^keeps lightbox window in the current viewport  */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, .7);
}


/* LIGHTBOX CLOSE BUTTON */

#lightbox .closeBtn {
  text-align: right;
  margin-right: 20px;
  font-size: 3rem;
}

.closeBtn {
  cursor: pointer;
}


/* LIGHTBOX IMAGE */

#lightbox img {
  box-shadow: 0 0 25px #111;
  max-width: 300px;
}

#content {
  display: flex;
  justify-content: center;
}

#content img {
  position: fixed;
  top: 0;
  margin-top: 4rem;
  width: 100%;
}


/* BLUR BACKGROUND WHEN LIGHTBOX IS ACTIVE */

.lightbox-active {
  filter: blur(5px);
}


/* LIGHTBOX ARROWS */

.arrowBTN {
  position: absolute;
  text-decoration: none;
  color: white;
  cursor: pointer;
  font-size: 2rem;
  text-align: center;
  margin-top: 25%;
  transform: translateY(-25%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
}

.prev {
  left: 0;
  margin-left: 1rem;
}

.next {
  right: 0;
  margin-right: 1rem;
}

#lightbox a {
  text-decoration: none;
  color: white;
}

#lightbox a:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.lightbox-hidden {
  display: none;
}

.lightbox-show {
  opacity: 1;
}

@media screen and (min-width: 1650px) {
  .flex-column {
    display: flex;
    justify-content: space-evenly;
  }
}

img {
  margin: 5px;
}


/* ///////////////////////////////////// */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section id="front-gallery">
  <div class="container-fluid gallery-container">
    <div class="d-flex flex-row">

      <!--   ////////  1st COLUMN   ////////    -->
      <div class="d-flex flex-column">
        <!--      FIRST IMAGE        -->
        <a style="display:contents" href="https://cdn.pixabay.com/photo/2017/04/05/17/45/girl-2205813_1280.jpg" class="lightbox-trigger">
          <img src="https://cdn.pixabay.com/photo/2017/04/05/17/45/girl-2205813_1280.jpg" alt="woman black and white photo" class="img-fluid image">
        </a>

        <!--      SECOND IMAGE        -->
        <a style="display:contents" href="https://cdn.pixabay.com/photo/2014/10/13/18/10/woman-487090_1280.jpg" class="lightbox-trigger">
          <img src="https://cdn.pixabay.com/photo/2014/10/13/18/10/woman-487090_1280.jpg" alt="dog" class="img-fluid">
        </a>
      </div>

      <!--   ////////  2nd COLUMN   ////////    -->
      <div class="d-flex flex-column">
        <!--      THIRD IMAGE        -->
        <a style="display:contents" href="https://cdn.pixabay.com/photo/2016/11/29/13/00/black-1869685_1280.jpg" class="lightbox-trigger">
          <img src="https://cdn.pixabay.com/photo/2016/11/29/13/00/black-1869685_1280.jpg" alt="woman color photo" class="img-fluid">
        </a>
        <!--      FOURTH IMAGE        -->
        <a style="display:contents" href="https://cdn.pixabay.com/photo/2015/03/04/19/42/woman-659352_1280.jpg" class="lightbox-trigger">
          <img src="https://cdn.pixabay.com/photo/2015/03/04/19/42/woman-659352_1280.jpg" alt="woman with tattoos" class="img-fluid">
        </a>
      </div>

      <!--   ////////  3rd COLUMN   ////////    -->
      <div class="d-flex flex-column">
        <!--      FIFTH IMAGE        -->
        <a style="display:contents" href="https://cdn.pixabay.com/photo/2015/07/02/10/11/person-828630_1280.jpg" class="lightbox-trigger">
          <img src="https://cdn.pixabay.com/photo/2015/07/02/10/11/person-828630_1280.jpg" alt="outline of man photo" class="img-fluid">
        </a>

        <!--      SIXTH IMAGE        -->
        <a style="display:contents" href="https://cdn.pixabay.com/photo/2017/05/27/17/52/model-2349037_1280.jpg" class="lightbox-trigger">
          <img src="https://cdn.pixabay.com/photo/2017/05/27/17/52/model-2349037_1280.jpg" alt="woman under water" class="img-fluid">
        </a>
      </div>

      <!--   ////////  4th COLUMN   ////////    -->
      <div class="d-flex flex-column">
        <!--      SEVENTH IMAGE        -->
        <a style="display:contents" href="https://cdn.pixabay.com/photo/2016/02/11/19/14/couple-1194312_1280.jpg" class="lightbox-trigger">
          <img src="https://cdn.pixabay.com/photo/2016/02/11/19/14/couple-1194312_1280.jpg" alt="couple" class="img-fluid">
        </a>

        <!--      EIGHTH IMAGE        -->
        <a style="display:contents" href="https://cdn.pixabay.com/photo/2017/11/03/10/34/studio-2913936_1280.jpg" class="lightbox-trigger">
          <img src="https://cdn.pixabay.com/photo/2017/11/03/10/34/studio-2913936_1280.jpg" alt="woman smiling" class="img-fluid">
        </a>
      </div>

      <!--   ////////  5th COLUMN   ////////    -->
      <div class="d-flex flex-column">
        <!--      NINTH IMAGE        -->
        <a style="display:contents" href="https://cdn.pixabay.com/photo/2016/11/14/04/08/selfie-1822563_1280.jpg" class="lightbox-trigger">
          <img src="https://cdn.pixabay.com/photo/2016/11/14/04/08/selfie-1822563_1280.jpg" alt="kids taking selfie in field" class="img-fluid">
        </a>

        <!--      TENTH IMAGE        -->
        <a style="display:contents" href="https://cdn.pixabay.com/photo/2021/04/02/12/01/woman-6144753_1280.jpg" class="lightbox-trigger">
          <img src="https://cdn.pixabay.com/photo/2021/04/02/12/01/woman-6144753_1280.jpg" alt="woman with eye makeup" class="img-fluid">
        </a>
      </div>

      <!--   ////////  6th COLUMN   ////////    -->
      <div class="d-flex flex-column">
        <!--      ELEVENTH IMAGE        -->
        <a style="display:contents" href="https://cdn.pixabay.com/photo/2016/10/27/03/43/radio-1773304_1280.jpg" class="lightbox-trigger">
          <img src="https://cdn.pixabay.com/photo/2016/10/27/03/43/radio-1773304_1280.jpg" alt="vintage radio" class="img-fluid">
        </a>

        <!--      TWELFTH IMAGE        -->
        <a style="display:contents" href="https://cdn.pixabay.com/photo/2015/06/24/01/16/photographer-819365_1280.jpg" class="lightbox-trigger">
          <img src="https://cdn.pixabay.com/photo/2015/06/24/01/16/photographer-819365_1280.jpg" alt="outdoor photographer" class="img-fluid">
        </a>
      </div>

      <!--   ////////  7th COLUMN   ////////    -->
      <div class="d-flex flex-column">

        <!--      THITEENTH IMAGE        -->
        <a style="display:contents" href="https://cdn.pixabay.com/photo/2015/04/12/18/05/man-719228_1280.jpg" class="lightbox-trigger">
          <img src="https://cdn.pixabay.com/photo/2015/04/12/18/05/man-719228_1280.jpg" alt="man thinking" class="img-fluid">
        </a>

        <!--      FOURTEENTH IMAGE        -->
        <a style="display:contents" href="https://cdn.pixabay.com/photo/2016/11/29/01/34/man-1866572_1280.jpg" class="lightbox-trigger">
          <img src="https://cdn.pixabay.com/photo/2016/11/29/01/34/man-1866572_1280.jpg" alt="man with jacket" class="img-fluid">
        </a>
      </div>


    </div>
    <!-- END FLEX ROW -->
  </div>
  <!-- END CONTAINER -->
</section>



<!-- ////////////////////////////// -->
<div id="lightbox" class="lightbox-hidden">
  <p class="closeBtn">&times;</p>
  <div id="content">
    <img class="lightbox-img" id="lightbox-image" src="https://cdn.pixabay.com/photo/2016/11/14/04/08/selfie-1822563_1280.jpg" />
  </div>

  <a id="prev" class="prev arrowBTN" aria-label="previous page">&#10094;</a>
  <a id="next" class="next arrowBTN" aria-label="next page">&#10095;</a>
</div>

thank you for the comment. I just tried replacing i with imageIndex and still no luck. Right now, no matter what image I click on, it still loads the default image that I put in the src link in the lightbox div. What I'm wanting to happen is when (for example) I click on the fifth image, that image is what pops up in the light box. Then from there, I can navigate to images before that with the next and previous buttons on the lightbox. — KurtReyn, Oct 22 '21 at 18:14
@KurtReyn Don't forget this: `let imageIndex = 0;`. It was `let i = 0` at the top of your javascript. — Rob Moll, Oct 22 '21 at 18:16
This is a link to my codepen https://codepen.io/kurt-reynolds/pen/GRvodYj?editors=1010 — KurtReyn, Oct 22 '21 at 18:17
Your question was: "_I've got an image gallery set up and what I'm trying to make happen is when a user clicks on an image in the gallery it opens a Lightbox modal window which the user can then scroll through the gallery with next and previous buttons in the modal window. The issue I'm having is that I can't seem to get jQuery to load the clicked image._" So that is what I focused on. If this was not helpful then don't upvote or accept. Maybe edit your question to include everything you need help with and someone else will come along and help. — Rob Moll, Oct 22 '21 at 18:27
Apologies, I didn't mean to offend. My intent on the reply was to try and add clarity on my initial post. I've only started learning to code since the end of June. Thank you for your time and I hope you have a good rest of the day. — KurtReyn, Oct 22 '21 at 18:34

score 0 · Answer 2 · answered Oct 25 '21 at 09:33

so I assume the images you're displaying in your gallery are smaller thumbnails and the image you want to display on click event, are remote images that are loaded from a database?

If that's the case, I had a similar requirement recently and I did the following. I displayed the thumbnail URI when the page loads, then I used a separate ajax request to fetch the associated high resolution image on click, from the server. This improved page load performance overall.

Take note that this example makes use of base64 encoded images stored in a database. The below code only shows the process of hooking into the lightbox JavaScript to implement your own flow, it does not show you how to store and display base64 images.

Add the following HTML for each gallery item. Note the data attribute that I assign. In my case, I use the thumbnail ID to pull the related full image from the database. Also, notethe 'data-gallery' attribute. This is required for in modal navigation from item to item

<a class="image-cell-anchor server-img" data-remote="data:image/jpeg;base64, " data-toggle="lightbox" data-gallery="store-product-gallery" data-title="MyImageTitle" data-footer="" data-type="image" data-imageId="23"> <img class="img-fluid img-thumbnail" src="data:image/jpeg;base64, "> </a>

You need to hook into the lightbox element code and intercept the process. You'll need JQuery to use my code, otherwise you can just recode it to pure JS. On document ready, do the following.

     $(document).on("click", '[data-toggle="lightbox"]', function (event) {
     event.preventDefault();

     var lightBoxImg = $(this);

     var imgEl = lightBoxImg[0];
     var imageID = $(imgEl).data('imageid');

     fetchHighResImage(imageID, function (result) {
         $(imgEl).attr("data-remote", result.ThumbnailUri);
         $(lightBoxImg).ekkoLightbox({
             onShow: function () {
                 var LightBoxObj = this;
                 console.log(LightBoxObj)
                 LightBoxObj.navigateRight = function () {
                     LightBoxObj._toggleLoading(true);
                     if (!LightBoxObj._$galleryItems) return;
                     if (LightBoxObj._$galleryItems.length === 1) return;
                     if (LightBoxObj._galleryIndex === LightBoxObj._$galleryItems.length - 1) {
                         if (LightBoxObj._config.wrapping) LightBoxObj._galleryIndex = 0; else return;
                     } else //circular
                         LightBoxObj._galleryIndex++;

                     var nextRemoteImageID = $(LightBoxObj._$galleryItems[LightBoxObj._galleryIndex]).data('imageid');

                     fetchHighResImage(nextRemoteImageID, function (result) {
                         $(LightBoxObj._$galleryItems[LightBoxObj._galleryIndex]).attr("data-remote", result.ThumbnailUri);
                         LightBoxObj._config.onNavigate.call(LightBoxObj, 'right', LightBoxObj._galleryIndex);
                         LightBoxObj.navigateTo(LightBoxObj._galleryIndex);
                         LightBoxObj._toggleLoading(false);
                     });
                 };
                 LightBoxObj.navigateLeft = function () {
                     LightBoxObj._toggleLoading(true);
                     if (!LightBoxObj._$galleryItems) return;
                     if (LightBoxObj._$galleryItems.length === 1) return;
                     if (LightBoxObj._galleryIndex === 0) {
                         if (LightBoxObj._config.wrapping) LightBoxObj._galleryIndex = LightBoxObj._$galleryItems.length - 1; else return;
                     } else //circular
                         LightBoxObj._galleryIndex--;

                     var prevRemoteImageID = $(LightBoxObj._$galleryItems[LightBoxObj._galleryIndex]).data('imageid');

                     fetchHighResImage(prevRemoteImageID, function (result) {
                         $(LightBoxObj._$galleryItems[LightBoxObj._galleryIndex]).attr("data-remote", result.ThumbnailUri);

                         LightBoxObj._config.onNavigate.call(LightBoxObj, 'left', LightBoxObj._galleryIndex);
                         LightBoxObj.navigateTo(LightBoxObj._galleryIndex);
                         LightBoxObj._toggleLoading(false);
                     });
                 };
             }
         });
     });
 });

Here is my AJAX request function to fetch the high resolution image.

function fetchHighResImage(imageID, successCallBack) {
    $.ajax({
        type: "Post",
        cache: false,
        url: "/Area/Controller/FetchHighResImageAction",
        dataType: 'json',
        data: { "imageID": imageID },
        success: function (data, status, xml) {
            jsonResult = JSON.parse(data);
            successCallBack(jsonResult);
        },
        error: function (xml, status, error) {
            console.log(xml)
            Command: toastr["warning"]("There has been a critical error loading the image. Contact developer.", "Failure.");
        },
        complete: function (xml, status) {
        }
    });
}

The above script might be a bit convoluted, but its simple. On initial page load, thumbnails will display for all gallery items. When you click the thumbnail, the script will fetch the full resolution image from the server and append the base64 URI to the element. On navigation between images within the lightbox modal, the script will continually request the high res image on click.

Hope this helps you a bit.

Thank you so much for the detailed explanation! Your time and efforts are most appreciated. — KurtReyn, Oct 26 '21 at 02:13

How do I get jQuery to load the clicked image?

2 Answers2