Only first called href opens iframe in Lightbox other hrefs open new page

Question

i am using jquery simple lightbox. I need to open 10 links in total in lightboxes, all showing different iframes. Only one lightbox at a time should be displayed.

This works fine with the first href, all hrefs after the first are opening a new Page. So i guess something is wrong with the way of my JS?

This is the way i set up the links and js in my html. So ".iframe1.html" works with the JS lightbox but "iframe2.html" opens a new page.

<div class="parallax__group info-container">
          <!-- ein Eintrag inkl. Button -->
        <img src="./img/OM791-thumb.png" alt="" />
        <div id="iframe" class="text-container">
          <h2>Headline 1</h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p><br>
          <a href="test/assets/iframe1.html" title="iframe1" rel="lightbox" class="btn">Open 3D Model</a>
            <script>
  $('#iframe').simpleLightbox();
  </script>
        </div>
        </div>
          <div class="parallax__group info-container">
          <!-- ein Eintrag inkl. Button -->
        <img src="./img/OM791-thumb.png" alt="" />
        <div id="iframe" class="text-container">
          <h2>Headline 2</h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p><br>
          <a href="test/assets/iframe2.html" title="iframe2" rel="lightbox" class="btn">Open 3D Model</a>  <script>
  $('#iframe').simpleLightbox();
  </script>
        </div>

Tried to move the <script> up in hierarchy, but having the same problem.

Any Suggestions. Thanks for your help!

Answer 1

The problem is that your selector is an id selector and since it is reasonable to assume that an id (identifier !) is unique, the search stops at the first find and does not proceed for the others. Fix:

<div class="parallax__group info-container">
          <!-- ein Eintrag inkl. Button -->
        <img src="./img/OM791-thumb.png" alt="" />
        <div class="iframe" class="text-container">
          <h2>Headline 1</h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p><br>
          <a href="test/assets/iframe1.html" title="iframe1" rel="lightbox" class="btn">Open 3D Model</a>
            
        </div>
        </div>
          <div class="parallax__group info-container">
          <!-- ein Eintrag inkl. Button -->
        <img src="./img/OM791-thumb.png" alt="" />
        <div class="iframe" class="text-container">
          <h2>Headline 2</h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p><br>
          <a href="test/assets/iframe2.html" title="iframe2" rel="lightbox" class="btn">Open 3D Model</a>
        </div>
  <script>
  $('.iframe').simpleLightbox();
  </script>

Note that I changed your ids of iframe to classes of similar name, removed your duplicated script and created a new script that finds your elements based on their class being iframe and called simpleLightbox() for them.