Как заставить jQuery загрузить выбранное изображение?

#jquery #lightbox #image-gallery #image-slider

Вопрос:

У меня настроена галерея изображений, и я пытаюсь добиться того, чтобы, когда пользователь нажимает на изображение в галерее, открывалось модальное окно лайтбокса, в котором пользователь может прокручивать галерею с помощью кнопок «Следующий» и «предыдущий» в модальном окне. Проблема, с которой я сталкиваюсь, заключается в том, что я не могу заставить jQuery загрузить выбранное изображение.

Все еще новичок в кодировании, поэтому заранее благодарю вас за любую информацию, которую вы можете предоставить 🙂

 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">amp;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">amp;#10094;</a>
  <a id="next" class="next arrowBTN" aria-label="next page">amp;#10095;</a>
</div>

Ответ №1:

Это то, что вы ищете?

Вы меняли i переменную на imageIndex переменную.

 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">amp;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">amp;#10094;</a>
  <a id="next" class="next arrowBTN" aria-label="next page">amp;#10095;</a>
</div>

1. спасибо вам за комментарий. Я просто попытался заменить i на ImageIndex, но все равно безуспешно. Прямо сейчас, независимо от того, на какое изображение я нажимаю, оно все равно загружает изображение по умолчанию, которое я вставил в ссылку src в разделе lightbox. Чего я хочу, так это чтобы это произошло, когда (например) Я нажимаю на пятое изображение, и это изображение появляется в световом окне. Затем оттуда я могу перейти к предыдущим изображениям с помощью кнопок «Следующий» и «предыдущий» на лайтбоксе.

2. @KurtReyn Не забывай об этом: let imageIndex = 0; . Это было let i = 0 в верхней части вашего javascript.

3. Это ссылка на мой кодовый код codepen.io/kurt-reynolds/pen/GRvodYj?editors=1010

4. Ваш вопрос был таким: » У меня настроена галерея изображений, и я пытаюсь добиться того, чтобы, когда пользователь нажимает на изображение в галерее, открывалось модальное окно лайтбокса, в котором пользователь может прокручивать галерею с помощью кнопок «Следующий» и «предыдущий» в модальном окне. Проблема, с которой я сталкиваюсь, заключается в том, что я не могу заставить jQuery загрузить выбранное изображение. «Так вот на чем я сосредоточился. Если это не помогло, то не голосуйте и не принимайте. Возможно, отредактируйте свой вопрос, чтобы включить в него все, в чем вам нужна помощь, и кто-нибудь другой придет и поможет.

5. Извините, я не хотел вас обидеть. Мое намерение в ответе состояло в том, чтобы попытаться внести ясность в мой первоначальный пост. Я только начал учиться программировать с конца июня. Спасибо вам за потраченное время, и я надеюсь, что вы хорошо проведете остаток дня.

Ответ №2:

поэтому я предполагаю, что изображения, которые вы показываете в своей галерее, являются уменьшенными миниатюрами, а изображение, которое вы хотите отобразить при событии щелчка, — это удаленные изображения, загруженные из базы данных?

Если это так, то недавно у меня было аналогичное требование, и я сделал следующее. Я отобразил URI миниатюры при загрузке страницы, а затем использовал отдельный ajax-запрос для получения соответствующего изображения с высоким разрешением по щелчку мыши с сервера. Это улучшило общую производительность загрузки страниц.

Обратите внимание, что в этом примере используются изображения в кодировке base64, хранящиеся в базе данных. Приведенный ниже код показывает только процесс подключения к JavaScript лайтбокса для реализации вашего собственного потока, в нем не показано, как хранить и отображать изображения base64.

Добавьте следующий HTML-код для каждого элемента галереи. Обратите внимание на атрибут данных, который я назначаю. В моем случае я использую идентификатор миниатюры для извлечения соответствующего полного изображения из базы данных. Кроме того, обратите внимание на атрибут «галерея данных». Это необходимо для внутримодальной навигации от товара к товару
<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>

Вам нужно подключиться к коду элемента лайтбокса и перехватить процесс. Вам понадобится jQuery, чтобы использовать мой код, в противном случае вы можете просто перекодировать его в чистый JS. Когда документ будет готов, выполните следующие действия.

      $(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);
                     });
                 };
             }
         });
     });
 });

Вот моя функция запроса AJAX для получения изображения с высоким разрешением.

 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) {
        }
    });
}

Приведенный выше сценарий может быть немного запутанным, но он прост. При начальной загрузке страницы миниатюры будут отображаться для всех элементов галереи. Когда вы нажмете на миниатюру, скрипт получит изображение с полным разрешением с сервера и добавит URI base64 к элементу. При навигации между изображениями в режиме лайтбокса скрипт будет постоянно запрашивать изображение с высоким разрешением при нажатии.

Надеюсь, это вам немного поможет.