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="xs_image@xs.jpg 480w, md_image@md.jpg 720w,"
          sizes="(max-width: 576px) 480px, (max-width: 768px) 720px,"
          src="md_image@md.jpg"
          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/fpo-3-2@md.jpg" class="kb-lightbox">
    <img
      srcset="../../../../assets/img//fpo/fpo-3-2@md.jpg 960w, ../../../../assets/img//fpo/fpo-3-2@xs.jpg 480w"
      sizes="(min-width: 768px) 960px, calc(100vw - 1.5rem)"
      src="../../../../assets/img//fpo/fpo-3-2@md.jpg"
      alt="Image description to show in lightbox"
      class="img-ar3-2">
  </a>

Grouped Lightbox Images

Click on image to open lightbox.

View in new window
View in new window for full preview
      
        <a href="/assets/img/fpo/fpo-3-2@xl.jpg" class="kb-lightbox" data-group="image-group-1">
    <img
      srcset="../../../../assets/img//fpo/fpo-3-2@xs.jpg 480w"
      sizes="calc(100vw - 1.5rem)"
      src="../../../../assets/img//fpo/fpo-3-2@xs.jpg"
      alt="Image 1 description to show in lightbox"
      class="img-ar3-2">
  </a>
  <a href="/assets/img/fpo/fpo-3-2@xl.jpg" class="kb-lightbox" data-group="image-group-1">
    <img
      srcset="../../../../assets/img//fpo/fpo-3-2@xs.jpg 480w"
      sizes="calc(100vw - 1.5rem)"
      src="../../../../assets/img//fpo/fpo-3-2@xs.jpg"
      alt="Image 2 description to show in lightbox"
      class="img-ar3-2">
  </a>
  <a href="/assets/img/fpo/fpo-3-2@xl.jpg" class="kb-lightbox" data-group="image-group-1">
    <img
      srcset="../../../../assets/img//fpo/fpo-3-2@xs.jpg 480w"
      sizes="calc(100vw - 1.5rem)"
      src="../../../../assets/img//fpo/fpo-3-2@xs.jpg"
      alt="Image 3 description to show in lightbox"
      class="img-ar3-2">
  </a>
  <a href="/assets/img/fpo/fpo-3-2@xl.jpg" class="kb-lightbox" data-group="image-group-1">
    <img
      srcset="../../../../assets/img//fpo/fpo-3-2@xs.jpg 480w"
      sizes="calc(100vw - 1.5rem)"
      src="../../../../assets/img//fpo/fpo-3-2@xs.jpg"
      alt="Image 4 description to show in lightbox"
      class="img-ar3-2">
  </a>