Using just a few lines of jQuery, combined with the Semantic UI Modal component, you can create a pretty simple and effective Lightbox:

<link
  rel="stylesheet"
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css"
/>

<section id="photos" class="ui basic segment show">
  <h2 class="ui header">Semantic UI Lightbox Example</h2>
  <p>
    Click any of the cards below to activate the modal-based lightbox. It's
    based off the
    <a href="https://semantic-ui.com/modules/modal.html#basic">"basic modal"</a>
    in Semantic UI.
  </p>
  <section class="ui four stackable cards">
    <article class="PhotoCard ui card">
      <img src="http://via.placeholder.com/300x250" class="ui fluid image" />
      <div class="content">Cool pics</div>
    </article>
    <article class="PhotoCard ui card">
      <img src="http://via.placeholder.com/300x250" class="ui fluid image" />
      <div class="content">Cool pics</div>
    </article>
    <article class="PhotoCard ui card">
      <img src="http://via.placeholder.com/300x250" class="ui fluid image" />
      <div class="content">Cool pics</div>
    </article>
    <article class="PhotoCard ui card">
      <img src="http://via.placeholder.com/300x250" class="ui fluid image" />
      <div class="content">Cool pics</div>
    </article>
  </section>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js" />
<script>
  // Lightbox for photos using Semantic UI

  $(".PhotoCard").click(function () {
    var image = $(this).children("img").attr("src");
    $("body").append(
      '<div class="ui basic modal"><div class="content"><img src="' +
        image +
        '" width="100%" /></div></div>'
    );
    $(".ui.basic.modal").remove().modal("show");
  });
</script>

Hope that helps, Ryo

References

Table of Contents