Product with Full Image (Top), 4 Images (Left Side)

Description

• product detail page layout with fullbleed image (top), product gallery 2 columns with 2 images/row
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. Make sure you use this layout on Product Detail Page

#1.2. Next, use this code to Store Page Header Injection

<!-- 09.26c05v2 Product with Full Image (Top), 4 Images (Left Side) -->
<script>
window.ProductSplitGalleryConfig = {
  desktopMinWidth: 768,
  columnGap: "20px",
  topImageHeight: "400px"
};
</script>
<script>
(function () {
  "use strict";
  var cfg = window.ProductSplitGalleryConfig || {};
  var minW = cfg.desktopMinWidth || 768;
  var gap = cfg.columnGap || "20px";
  var topH = cfg.topImageHeight;

  injectCSS();

  function injectCSS() {
    if (document.getElementById("psg-style")) { return; }
    var topImgRules = topH
      ? "display:block;width:100%;height:" + topH + ";object-fit:cover;object-position:50% 50%;"
      : "display:block;width:100%;height:auto;";
    var css =
      "@media (min-width:" + minW + "px){" +
        "body:not(.sqs-edit-mode-active) .product-detail:not(.psg-ready){visibility:hidden;position:relative;}" +
        "body:not(.sqs-edit-mode-active) .product-detail:not(.psg-ready)::after{content:'';visibility:visible;position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border:3px solid rgba(0,0,0,0.15);border-top-color:rgba(0,0,0,0.6);border-radius:50%;animation:psg-spin 0.8s linear infinite;z-index:10;}" +
        "@keyframes psg-spin{to{transform:rotate(360deg);}}" +
        "body:not(.sqs-edit-mode-active) .product-detail .psg-top-image{width:100%;margin-bottom:" + gap + ";}" +
        "body:not(.sqs-edit-mode-active) .product-detail .psg-top-image img{" + topImgRules + "}" +
        "body:not(.sqs-edit-mode-active) .product-detail .psg-grid{display:grid;grid-template-columns:1fr 1fr;gap:" + gap + ";}" +
        "body:not(.sqs-edit-mode-active) .product-detail .psg-grid-item img{display:block;width:100%;height:auto;}" +
        "body:not(.sqs-edit-mode-active) .product-detail.psg-built .product-gallery-scroll,body:not(.sqs-edit-mode-active) .product-detail.psg-built .product-gallery-slides{display:none !important;}" +
      "}";
    var s = document.createElement("style");
    s.id = "psg-style";
    s.textContent = css;
    (document.head || document.documentElement).appendChild(s);
  }

  function isDesktop() {
    return window.matchMedia("(min-width:" + minW + "px)").matches;
  }

  function isEditMode() {
    return !!(document.body && document.body.classList.contains("sqs-edit-mode-active"));
  }

  function withFormat(u, f) {
    return u + (u.indexOf("?") === -1 ? "?format=" + f : "&format=" + f);
  }

  function build() {
    var detail = document.querySelector(".product-detail");
    if (!detail) { return false; }
    if (detail.getAttribute("data-psg-done") === "1") { return true; }
    var gallery = detail.querySelector('[data-product-gallery="container"]');
    var layoutWrap = detail.querySelector("[data-product-detail-layout]");
    var thumbs = gallery ? gallery.querySelectorAll(".product-gallery-thumbnails-item-image") : [];
    if (!gallery || !layoutWrap || !thumbs.length) { return false; }

    detail.setAttribute("data-psg-done", "1");

    try {
      var urls = [];
      for (var i = 0; i < thumbs.length; i++) {
        var u = thumbs[i].getAttribute("data-image") || thumbs[i].getAttribute("data-src");
        if (u) { urls.push({ url: u, alt: thumbs[i].getAttribute("alt") || "" }); }
      }
      if (urls.length) {
        var topWrap = document.createElement("div");
        topWrap.className = "psg-top-image";
        var topImg = document.createElement("img");
        topImg.src = withFormat(urls[0].url, "2500w");
        topImg.alt = urls[0].alt;
        topWrap.appendChild(topImg);
        detail.insertBefore(topWrap, layoutWrap);

        var grid = document.createElement("div");
        grid.className = "psg-grid";
        for (var j = 1; j < urls.length; j++) {
          var cell = document.createElement("div");
          cell.className = "psg-grid-item";
          var im = document.createElement("img");
          im.src = withFormat(urls[j].url, "1500w");
          im.alt = urls[j].alt;
          cell.appendChild(im);
          grid.appendChild(cell);
        }
        gallery.appendChild(grid);

        detail.classList.add("psg-built");
      }
    } catch (e) {}

    detail.classList.add("psg-ready");
    return true;
  }

  function forceReveal() {
    var d = document.querySelector(".product-detail");
    if (d) { d.classList.add("psg-ready"); }
  }

  function schedule() {
    if (!isDesktop() || isEditMode()) { return; }
    if (!document.querySelector(".product-detail")) { return; }
    var start = Date.now();
    (function poll() {
      if (build()) { return; }
      if (Date.now() - start > 3000) { forceReveal(); return; }
      requestAnimationFrame(poll);
    })();
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", schedule);
  } else {
    schedule();
  }
  window.addEventListener("load", schedule);
  window.addEventListener("mercury:load", schedule);
})();
</script>