Показать сообщение отдельно
  #2 (permalink)  
Старый 10.04.2020, 13:23
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Сообщение от andrey8501 Посмотреть сообщение
есть некое решение, но оно не совсем подходит по причине того, что я пытаюсь прикрутить на большое окно fancybox, что бы по нажатию это изображение всплывало
а туда миниатюры подставляются через класс, а мне нужно задать каждой картинке ссылку
Можно так сделать
<slider>
<div class="slides">
  <img src="http://placehold.it/300/ccc" alt="" data-big="http://placehold.it/300/ccc_big">
  <img src="http://placehold.it/300/cfc" alt="" data-big="http://placehold.it/300/cfc_big">
  <img src="http://placehold.it/300/cdf" alt="" data-big="http://placehold.it/300/cdf_big">
</div>
<img src="http://placehold.it/300" class="bg">
</slider>


let images = document.querySelectorAll(".slides img").forEach(function (el){
  el.onclick = function (){
    document.querySelector(".bg").src = el.dataset.big
  }
})


А так даже лучше
document.querySelector(".slides").onclick = (ev) =>{
  if (ev.target.nodeName == 'IMG')
     document.querySelector(".bg").src = ev.target.dataset.big
  }

Последний раз редактировалось voraa, 10.04.2020 в 19:22.
Ответить с цитированием