Как такое сотворить на JS?

Question

[DeniSidorenko]

Добрый день, подскажите пожалуйста как такое сделать на JS

<div class="items">

  <div class="item">
    <div class="image"><img src="img1.jpg" alt=""></div>
    <div class="image"><img src="img2.jpg" alt=""></div>
    <div class="image"><img src="img3.jpg" alt=""></div>
    <div class="image"><img src="img4.jpg" alt=""></div>
    <div class="image"><img src="img5.jpg" alt=""></div>
    <button>Открыть карточку</button>
  </div>

  <div class="item">
    <div class="image"><img src="img6.jpg" alt=""></div>
    <div class="image"><img src="img7.jpg" alt=""></div>
    <div class="image"><img src="img8.jpg" alt=""></div>
    <button>Открыть карточку</button>

  </div>


</div>

<div class="popup">

  <div class="slide-items">
    <div class="slide-item">
      <img src="imgexample" alt="">
    </div>
  </div>

</div>

Есть такая структура

Вообщем есть попап который открывается при клике на кнопку. В попапе есть слайдер. Каждый item имеет изображения( КОЛИЧЕСТВО РАЗНОЕ). При клике на буттон мне надо что бы открывалась попап с количеством слайдов и теми же изображение что и item где находится кнопка. К примеру мы видем первый item имеет 5 изображений. Я открываю попап и там слайдер с этими 5 изображениями. Смотрю, закрываю. Потом нажимаю на кнопку из второго item'a , там 3 изображения и у меня открывается попап с этими 3 слайдами.
Вопрос
Как сделать что бы DOOm менялся и создавался в зависимости от слайдов.
+ трамбл еще в том что owl создает свою структуру и менять ее очень сложно, по ходу всего.
Подскажите какими способами это можно делать, я даже логически не знаю как такое можно менять особенно сложно с OWL

Надеюсь все правильно объяснил

Comments

[Сергей Попов]

Не хочешь воспользоваться Photoswipe? Зачем выдумывать велосипед?

[Andrew]

в попАпе есть что-то кроме изображений?
а-то, по описанию, выглядит как какой-то фэнсибокс.

[Иван]

Если честно я нихрена не понял! Может пример?

[Николай]

Если честно я нихрена не понял! Может пример? (2)

[Максим Тимофеев]

открывалась попап

правильно открывалась попа или открывался попап. Где именно Вы ошиблись?

DOOm

трамбл еще в том что owl создает свою структуру и менять ее очень сложно, по ходу всего

Почему сложно? Для этого у owl есть api:
https://owlcarousel2.github.io/OwlCarousel2/docs/a...

надо что бы открывалась попап с количеством слайдов

С каким количеством?

Перечитайте свой вопрос и исправьте, знаки препинания поставьте. Прочитал и нихрена не понял. Owl - ключевая особенность, но Вы только в конце ее указали. Приведите в порядок.

Пока что я не понимаю, почему бы не создавать и уничтожать owl при каждом открытии попап?

Answer 1

[asdz]

трамбл решается легко:
1. навешиваем на кнопки обработчик события
2. в обработчике, надо взять все картинки из DOOm-a того блока в котором стоит кнопка на которую кликнули и
передать их в DOOm блока разметки для карусели в попапе.
3. После этого отобразить попап и запустить карусель.

$(".items > .item button").click(buttonClickHandler)

function buttonClickHandler(e) {
  var $block = $(e.target).closest('.item');
  var $images = $block.find("img");
  var items_wrapper = $(".popup > .slide-items").get();
  $(items_wrapper).trigger('destroy.owl.carousel');
  $(items_wrapper).empty();

  $images.each(function (index, image) {
     $('<div>').attr("class", "slide-item").append($("img").attr("src", image.src)).appendTo(items_wrapper);
  });
  $(items_wrapper).owlCarousel();
}

Comments

[DeniSidorenko]

Спасибо за идею. Я понимал до 2 шага. Т.е через цикл добавить дивы и потом перезапустить цикл овла, просто отлично, спасибо