Image Lightbox

Lightweight image lightbox

Component Properties

Gallery Properties

Gallery Name `[GALLERY_NAME]`

Groups gallery images together if there are multiple galleries on a page.

<a ... data-group="[GALLERY_NAME]">: Unique name

Lightbox Image `[LARGE_IMAGE_PATH]`

<a ... href="[LARGE_IMAGE_PATH]">: Path to lightbox large image to show when thumbnail is clicked.

Gallery Text `[GALLERY_TEXT]`

Groups gallery images together if there are multiple galleries on a page.

<img ... alt="[GALLERY_TEXT]">: Text to show when large gallery image is shown.

Image Gallery template

    
      <a href="[LARGE_IMAGE_PATH]" class="kb-lightbox [IMAGE_ASPECT]" data-group="[GALLERY_NAME]">
        <img
          srcset="[email protected] 480w, [email protected] 720w,"
          sizes="(max-width: 576px) 480px, (max-width: 768px) 720px,"
          src="[email protected]"
          alt="[GALLERY_TEXT]"
          class="gallery-img">
      </a>

Single Image Lightbox

Click on image to open lightbox.

View in new window

View in new window for full preview

      
        <a href="/assets/img/fpo/[email protected]" class="kb-lightbox">
    <img
      srcset="../../../../assets/img//fpo/[email protected] 960w, ../../../../assets/img//fpo/[email protected] 480w"
      sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
      src="../../../../assets/img//fpo/[email protected]"
      alt="Image description to show in lightbox"
      class="img-ar3-2">
  </a>

Grouped Lightbox Images