גלריה עם הגדלה

showModal של תגית dialog נותן בחינם רקע חוסם, מיקוד שנשאר בתוך החלון, Esc שסוגר והחזרת המיקוד לתמונה שנפתחה. אלה בדיוק ארבעת הדברים שמימוש ידני על div עם position:fixed שוכח. גלריה עם הגדלה הוא רכיב מתוך רכיבים של כליקס. מה שמורידים הוא רכיב שלם, גם כ-HTML עצמאי וגם כרכיב React. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד.

רכיב · תמונות · גלריה · נגישות

<!-- גלריה עם הגדלה — החליפו את התמונות -->
<style>
  .klix-gal { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem;
    margin: 0; padding: 0; list-style: none; max-width: 22rem }
  .klix-gal button { display: block; width: 100%; padding: 0; border: 0; background: none;
    cursor: zoom-in; border-radius: .6rem; overflow: hidden }
  .klix-gal img, .klix-gal .klix-gal-box { display: block; width: 100%; aspect-ratio: 1;
    object-fit: cover }
  .klix-lb { max-width: 90vw; padding: .75rem; border: 0; border-radius: 1rem;
    background: #0f172a; color: #e2e8f0 }
  .klix-lb::backdrop { background: rgba(0,0,0,.8) }
  .klix-lb img, .klix-lb .klix-gal-box { max-height: 60vh; border-radius: .75rem }
  .klix-lb-bar { display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; margin-top: .5rem }
  .klix-lb-bar button { font: inherit; font-size: 1.25rem; padding: .25rem .75rem; border: 0;
    border-radius: .5rem; background: #1e293b; color: inherit; cursor: pointer }
  .klix-lb-bar span { font-size: .85rem; color: #94a3b8 }
</style>

<ul class="klix-gal">
  <li><button type="button"><img src="1.jpg" alt="עבודה ראשונה" loading="lazy"></button></li>
  <li><button type="button"><img src="2.jpg" alt="עבודה שנייה" loading="lazy"></button></li>
  <li><button type="button"><img src="3.jpg" alt="עבודה שלישית" loading="lazy"></button></li>
</ul>

<dialog class="klix-lb">
  <div class="klix-lb-stage"></div>
  <div class="klix-lb-bar">
    <button type="button" data-prev aria-label="הקודמת">›</button>
    <span class="klix-lb-count"></span>
    <button type="button" data-next aria-label="הבאה">‹</button>
  </div>
  <button type="button" data-close style="width:100%;margin-top:.5rem">סגירה</button>
</dialog>

<script>
(function () {
  var grid = document.querySelector('.klix-gal');
  var dlg = document.querySelector('.klix-lb');
  if (!grid || !dlg || !dlg.showModal) return;

  var items = grid.querySelectorAll('button');
  var stage = dlg.querySelector('.klix-lb-stage');
  var label = dlg.querySelector('.klix-lb-count');
  var at = 0;

  function show(n) {
    at = (n + items.length) % items.length;
    stage.innerHTML = items[at].innerHTML;
    label.textContent = (at + 1) + ' מתוך ' + items.length;
  }

  items.forEach(function (btn, n) {
    // showModal נותן רקע חוסם, מיקוד לכוד, Esc והחזרת מיקוד — בלי קוד
    btn.addEventListener('click', function () { show(n); dlg.showModal(); });
  });

  dlg.querySelector('[data-prev]').addEventListener('click', function () { show(at + 1); });
  dlg.querySelector('[data-next]').addEventListener('click', function () { show(at - 1); });
  dlg.querySelector('[data-close]').addEventListener('click', function () { dlg.close(); });
})();
</script>