anov
@anov
Junior coder

Как в fslightbox.js открывать изображение на основе currentSrc из тега picture?

Уважаемые знатоки!
Решил воспользоваться слайдером Swiper, а для просмотра слайдов в полный экран fslightbox.js.

<div class="work-block__slider work-slider swiper-container">
  <div class="work-slider__wrapper swiper-wrapper">
    <div class="work-slider__slide swiper-slide">
      <a class="fslightbox" data-fslightbox="desktop" href="images/work-slider/full/1/1-1200.jpg">
        <div class="work-slider__image">
          <picture>
            <source
                    media="(max-width: 1200px)"
                    srcset="images/work-slider/full/1/1-1200.webp 1x,
                            images/work-slider/full/1/1-1200@2x.webp 2x,
                            images/work-slider/full/1/1-1200@3x.webp 3x"
                    type="image/webp">
            <source
                    media="(max-width: 1200px)"
                    srcset="images/work-slider/full/1/1-1200.jpg 1x,
                            images/work-slider/full/1/1-1200@2x.jpg 2x,
                            images/work-slider/full/1/1-1200@3x.jpg 3x">
            <source
                    srcset="images/work-slider/full/1/1-1800.webp 1x,
                            images/work-slider/full/1/1-1800@2x.webp 2x,
                            images/work-slider/full/1/1-1800@3x.webp 3x"
                    type="image/webp">
            <img
                 src="images/work-slider/full/1/1-1800.jpg" alt=""
                 srcset="images/work-slider/full/1/1-1800@2x.jpg 2x,
                         images/work-slider/full/1/1-1800@3x.jpg 3x">
          </picture>
        </div>
      </a>
    </div>
  </div>
</div>


В зависимости от ширины окна и плотности пикселей выводится та или иная картинка из тега picture.

let lightboxLink = document.querySelectorAll('.fslightbox');
for (i = 0; i < lightboxLink.length; i++) {
   let currentLink = lightboxLink[i];
   
   const container =  currentLink.querySelector('.work-slider__image');

   if (container) {
      const imageCurrentSrc = container.querySelector('img').currentSrc;
      currentLink.setAttribute('href', imageCurrentSrc);
   }
}


JS скриптом я получаю currentSrc из тега picture и присваиваю его href ссылке, при нажатии на которую fslightbox.js (по идее) считывает href этой ссылки и выводит в лайтбоксе картинку с таким же src.
Я устанавливаю href для ссылки по умолчанию, чтобы там было какое то значение, ибо без него лайтбокс вообще не открывается.
На этапе загрузки страницы JS скрипт меняет всем ссылкам href, но в лайтбоксе выводится изображение, которое было установлено изначально.
Как заставить fslightbox открывать currentSrc, а не тот, что был установлен по умолчанию?
  • Вопрос задан
  • 536 просмотров
Решения вопроса 1
anov
@anov Автор вопроса
Junior coder
Решение найдено. Всем спасибо)

let lightboxLink = document.querySelectorAll('.fslightbox');
for (i = 0; i < lightboxLink.length; i++) {
   let currentLink = lightboxLink[i];
   
   const container =  currentLink.querySelector('.work-slider__image');

   if (container) {
      const imageCurrentSrc = container.querySelector('img').currentSrc;
      currentLink.setAttribute('href', imageCurrentSrc);
      refreshFsLightbox();
   }
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы