Image gallery with placeholder to prevent CLS

To prevent Cumulative Layout Shift (CLS), you can add an img src as a temporary placeholder until the gallery images load. Refer to the Sirv Media Viewer placeholder documentation.

Code to embed gallery

<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script>

<style>
  /* Sirv Media Viewer placeholder */
  .pdp-gallery-container {
    display: flex;
    height: 100%;
    max-height: 100%;
    flex-direction: column-reverse;
  }
  /* Set the size of thumbnails */
  .pdp-gallery-thumbnails {
    /* width: 114px; */ 
  }
  .pdp-gallery-thumbnails .smv-thumbnails.smv-v.smv-external .smv-selectors {
    min-width: unset !important;
  }
  .pdp-gallery-thumbnails .smv-selector>img {
    width: auto !important;
    height: auto !important;
  }
  .pdp-gallery-main {
    flex: 1 1;
     position: relative;
  }
  .pdp-gallery-main .Sirv.mainimage {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  /* Non-first item should overlap placeholder */
  .pdp-gallery-main .Sirv .smv-slides-box .smv-slides .smv-slide.smv-shown:not(:first-child) {
    background-color: #fff;
  }
  /* Placeholder */
  .pdp-gallery-main .pdp-gallery-placeholder {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
  }
</style>

<div class="SirvGallery-Wrapper">
 <div class="pdp-gallery-container">
  <div class="pdp-gallery-thumbnails"></div>
   <div class="pdp-gallery-main">
    <img class="pdp-gallery-placeholder" src="https://demo.sirv.com/demo/sirv-media-viewer/millington-adams/2450_1.jpg?thumb&h=800&q=30" alt="">
    <div data-options= THIS CODE HAS BEEN REMOVED OR IT BREAKS LAYOUT >
     <div data-src="https://demo.sirv.com/demo/sirv-media-viewer/millington-adams/2450_1.jpg" data-type="zoom"></div>
     <div data-src="https://demo.sirv.com/demo/sirv-media-viewer/millington-adams/2450_2.jpg" data-type="zoom"></div>
     <div data-src="https://demo.sirv.com/demo/sirv-media-viewer/millington-adams/2450_3.jpg" data-type="zoom"></div>
     <div data-src="https://demo.sirv.com/demo/sirv-media-viewer/millington-adams/2450_4.jpg" data-type="zoom"></div>
     <div data-src="https://demo.sirv.com/demo/sirv-media-viewer/millington-adams/2450_5.jpg" data-type="zoom"></div>
     <div data-src="https://demo.sirv.com/demo/sirv-media-viewer/millington-adams/2450_6.jpg" data-type="zoom"></div>
    </div>
   </div>
 </div>
</div>

Image gallery with placeholder

Code to embed gallery

Footer