Как использовать iFrame в нескольких галереях с iziModal?

Question

iziModal официальный
Как и в официальном образце, сделайте iFrame, если я нажму кнопку
... Нет, я хочу, чтобы iFrame отображался при нажатии section.
Я хотел бы, чтобы детали отображались в модальном окне, когда я отправляю коллекцию работ.

Как это

⬇︎⬇︎⬇︎

---

Ниже мой неподвижный код

jQuery, izimodal.css, izimodal.js включены правильно.
(Содержимое iFrame - это HTML-файл, который у меня есть.)

HTML

<div class="list">
<div class="items">
 <section class="item item1" data-izimodal-iframeurl="data-1.html" data-izimodal-open=#iframe>
   <img src="img/1.png" alt="1" />
   <h2>title1</h2>
   <p>description1 description1</p>
 </section>
 <section class="item item2" data-izimodal-iframeurl="data-2.html" data-izimodal-open=#iframe>
   <img src="img/2.png" alt="2" />
   <h2>title2</h2>
   <p>description2 description2</p>
 </section>
 <section class="item item3" data-izimodal-iframeurl="data-3.html" data-izimodal-open=#iframe>
   <img src="img/3.png" alt="3" />
   <h2>title3</h2>
   <p>description3 description3</p>
 </section>
 <section class="item item4" data-izimodal-iframeurl="data-4.html" data-izimodal-open=#iframe>
   <img src="img/4.png" alt="4" />
   <h2>title4</h2>
   <p>description4 description4</p>
 </section>
 <section class="item item5" data-izimodal-iframeurl="data-5.html" data-izimodal-open=#iframe>
   <img src="img/5.png" alt="5" />
   <h2>title5</h2>
   <p>description5 description5</p>
 </section>
 </div>
</div>

JQuery

// In case of item1
$(document).on('click', '.item1', function (event) {
  event.preventDefault();
  $('#iframe').iziModal('open');
});
  $("#iframe").iziModal({
  iframe: true,
  width: '98%',
  ifremeHeight: '98%',
  zindex: '10',
  iframeURL: "data-1.html",
  group: 'works',
  overlayColor: 'rgba(0,0,0,0.1)',
});

Как активировать iziModal и создать несколько iFrames?

Answer 1

Это всего лишь предложение, во-первых, вам нужно передать новый URL из HTML, как показано ниже:

<div class="list">
    <div class="items">
        <section class="item item1" data-izimodal-iframeurl="data-1.html" data-izimodal-open="#iframe" data-href="/iframe_url1">
            <img src="img/1.png" alt="1" />
            <h2>title1</h2>
            <p>description1 description1</p>
        </section>
        <section class="item item2" data-izimodal-iframeurl="data-2.html" data-izimodal-open="#iframe" data-href="/iframe_url2">
            <img src="img/2.png" alt="2" />
            <h2>title2</h2>
            <p>description2 description2</p>
        </section>
        <section class="item item3" data-izimodal-iframeurl="data-3.html" data-izimodal-open="#iframe" data-href="/iframe_url3">
            <img src="img/3.png" alt="3" />
            <h2>title3</h2>
            <p>description3 description3</p>
        </section>
        <section class="item item4" data-izimodal-iframeurl="data-4.html" data-izimodal-open="#iframe" data-href="/iframe_url4">
            <img src="img/4.png" alt="4" />
            <h2>title4</h2>
            <p>description4 description4</p>
        </section>
        <section class="item item5" data-izimodal-iframeurl="data-5.html" data-izimodal-open="#iframe" data-href="/iframe_url5">
            <img src="img/5.png" alt="5" />
            <h2>title5</h2>
            <p>description5 description5</p>
        </section>
    </div>
</div>

Затем измените часть Javascript, чтобы изменить URL-адрес iframe:

// CHANGE THE URL
    $('#iframe').iziModal('open',{
        iframeURL: $this.data('href')
    });