<div style="width:100%;max-width:1160px;margin:0 auto;background:#f1ebe3;font-size:0;line-height:0;overflow:hidden;">
  <iframe
    id="gallery-frame"
    src="https://gallery.gardenstudios.com.au/?embed=true"
    title="Garden Studios gallery"
    style="width:100%;display:block;border:0;margin:0;padding:0;vertical-align:bottom;height:800px;background:#f1ebe3;"
    scrolling="no"
    allow="clipboard-write"
  ></iframe>
</div>

<script>
  (function () {
    var frame = document.getElementById('gallery-frame');

    // Read ?size= from the parent page URL.
    // Allowed: ThinkPods | Studios | GrannyFlats | HomeExtensions | Interiors
    // Anything else (or missing) => All.
    var allowedSizes = ['ThinkPods', 'Studios', 'GrannyFlats', 'HomeExtensions', 'Interiors'];
    var size = new URLSearchParams(window.location.search).get('size');

    var src = 'https://gallery.gardenstudios.com.au/?embed=true';
    if (size && allowedSizes.indexOf(size) !== -1) {
      src += '&size=' + encodeURIComponent(size);
    }
    frame.src = src;

    function requestHeight() {
      try { frame.contentWindow.postMessage({ type: 'gallery:measure' }, '*'); } catch (err) {}
    }

    window.addEventListener('message', function (e) {
      var d = e.data || {};
      if (d.type === 'gallery:height' && typeof d.height === 'number') {
        frame.style.height = d.height + 'px';
      }
      if (d.type === 'gallery:open' && d.url) {
        window.openGalleryImage(d.url, d.title || '', d.description || '');
      }
    });

    // Re-measure when the parent window is resized (width and/or height).
    function remeasure() {
      requestHeight();
      setTimeout(requestHeight, 60);
      setTimeout(requestHeight, 250);
      setTimeout(requestHeight, 600);
    }

    window.addEventListener('resize', remeasure);
    window.addEventListener('orientationchange', remeasure);
    frame.addEventListener('load', remeasure);
    setInterval(requestHeight, 1000);
  })();
</script>

<style>
#custom-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: none; justify-content: center; align-items: center; z-index: 999999; opacity: 0; transition: opacity .25s ease; }
#custom-lightbox.show { display: flex; opacity: 1; }
#custom-lightbox-content { max-width: 92vw; max-height: 92vh; display: flex; flex-direction: column; align-items: center; }
#custom-lightbox img { max-width: 92vw; max-height: 82vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.45); border-radius: 4px; transform: scale(.96); transition: transform .25s ease; }
#custom-lightbox.show img { transform: scale(1); }
#custom-lightbox-caption { width: 100%; margin-top: 18px; color: #fff; text-align: center; font-family: Arial, sans-serif; line-height: 1.5; }
#custom-lightbox-title { font-weight: bold; font-size: 18px; margin-bottom: 4px; }
#custom-lightbox-description { font-weight: normal; font-size: 15px; }
#custom-lightbox-close { position: absolute; top: 20px; right: 25px; width: 42px; height: 42px; cursor: pointer; color: #fff; font-size: 40px; line-height: 40px; font-family: Arial, sans-serif; text-align: center; user-select: none; }
</style>

<div id="custom-lightbox">
  <div id="custom-lightbox-close">&times;</div>
  <div id="custom-lightbox-content">
    <img id="custom-lightbox-image" src="">
    <div id="custom-lightbox-caption">
      <div id="custom-lightbox-title"></div>
      <div id="custom-lightbox-description"></div>
    </div>
  </div>
</div>

<script>
  (function () {
    var lightbox = document.getElementById('custom-lightbox');
    var lightboxImage = document.getElementById('custom-lightbox-image');
    var lightboxTitle = document.getElementById('custom-lightbox-title');
    var lightboxDescription = document.getElementById('custom-lightbox-description');

    function closeCustomLightbox() {
      lightbox.classList.remove('show');
      setTimeout(function () {
        lightbox.style.display = 'none';
        lightboxImage.src = '';
      }, 250);
    }

    document.getElementById('custom-lightbox-close').addEventListener('click', closeCustomLightbox);
    lightbox.addEventListener('click', function (e) { if (e.target === lightbox) closeCustomLightbox(); });
    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeCustomLightbox(); });

    // Called with the clicked image's high-res URL, title and description.
    window.openGalleryImage = function (link, title, description) {
      lightboxImage.src = link;
      lightboxTitle.textContent = title || '';
      lightboxDescription.textContent = description || '';
      lightbox.style.display = 'flex';
      requestAnimationFrame(function () { lightbox.classList.add('show'); });

      // Prefer a new tab instead of the lightbox? Replace the lines above with:
      // window.open(link, '_blank', 'noopener');
    };
  })();
</script>

Instructions

1. Paste the whole block (iframe + script + lightbox) into an HTML/embed element on the page where you want the gallery to appear.
2. The iframe has its URL and a visible fallback height directly in its HTML, so the gallery still appears if your page builder delays or removes custom scripts.
3. Preselect a category with the page URL variable ?size=: ?size=ThinkPods, ?size=Studios, ?size=GrannyFlats, ?size=HomeExtensions or ?size=Interiors. If it is missing or invalid, All is shown. Visitors can still switch categories with the text links.
4. The height adjusts automatically — on load, when the category is changed, and when the browser window is resized in width and/or height. Keep scrolling="no" so there is never an inner scrollbar.
5. Clicking an image sends its high-res (2500px) URL, title and description out of the iframe, and the included lightbox opens it with the caption underneath. To open a new tab instead, use the commented window.open(...) line inside openGalleryImage.
6. Only include the lightbox block once per page. If you embed both galleries on the same page, keep the second copy of the <style>, lightbox markup and lightbox script out — and give each iframe a unique id.

This code block and these instructions are only visible in preview — they never appear in the embedded iframe.