Image Gallery

Dynamic image gallery

Component Properties

Section Properties

Text / Background Color Theme [COLOR_THEME]

Using the Sass color-contrast() function, the text color is automatically determined based on the defined $color-contrast-dark and $color-contrast-light text color variables for the contrasting color for a particular background-color. Available classes are:

View in new window for full preview

Section Modifier [MODIFIER]

Optionally add an overall modifier class to the component.

Section Vertical Spacing [SPACING]

Optional: Adds top and bottom padding to section.

none
No spacing applied to element
.sec-spacing
Adds top and bottom spacing to section
.sec-spacing-sm
Adds a small amount top and bottom spacing to section
.sec-spacing-lg
Adds a large amount top and bottom spacing to section

Container Modifier [CONTAINER]

Use .container-fluid for a full width container, spanning the entire width of the viewport

.container
Standard width section contrainer. Container width snaps to width at breakpoints.
.container-xxl
Standard width section contrainer. Container has fluid until it reaches it's maximum width
.container-fluid
Full width section contrainer. Container runs from edge to egde of the viewport

Gallery Properties

Image Aspect Ratio [IMAGE_ASPECT]

Sets the aspect ratio for the image within the gallery grid.

none
Image takes up one grid space
.item-tall
Image will span two vertical grid spaces
.item-wide
Image will span two horizontal grid spaces

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
    
        <section class="gal-sec [COLOR_THEME] [SPACING] [MODIFIER]">
          <div class="[CONTAINER]">
            <div class="row">
              <!-- Optional section heading -->
              <div class="col-12 sec-heading">
                <[HEADING_LVL]>
                  [HEADONG_TEXT]
                </[HEADING_LVL]>
              </div>
              <!-- Image Gallery -->
              <div class="col-12">
                <div class="img-gallery [MODIFIER]">
                  <!-- Each Image in gallery -->
                  <a href="[LARGE_IMAGE_PATH]" class="kb-lightbox gallery-item [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>
                </div>
              </div>
            </div>
          </div>
        </section>

Gallery with Heading

Click on image to open lightbox.

View in new window
View in new window for full preview
      
        <section class="gal-sec text-bg-light sec-spacing">
    <div class="container-xxl">
      <div class="row">
        <div class="col-12 sec-heading">
          <h2>
            Section Heading
          </h2>
        </div>
        <div class="col">
          <div class="img-gallery" style=" --kb-galrow-md: 4; --kb-galrow-xl: 3;">
            <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;110" class="kb-lightbox gallery-item item-tall" data-group="exampleGallery">
              <img
                srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                        ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
                alt="Image 1"
                class="gallery-img"
              >
            </a>
            <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;111" class="kb-lightbox gallery-item item-wide" data-group="exampleGallery">
              <img
                srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                        ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
                alt="Image 2"
                class="gallery-img"
              >
            </a>
            <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;112" class="kb-lightbox gallery-item" data-group="exampleGallery">
              <img
                srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                        ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
                alt="Image 3"
                class="gallery-img"
              >
            </a>
            <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;113" class="kb-lightbox gallery-item item-tall" data-group="exampleGallery">
              <img
                srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                        ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
                alt="Image 4"
                class="gallery-img"
              >
            </a>
            <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;114" class="kb-lightbox gallery-item" data-group="exampleGallery">
              <img
                srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                        ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
                alt="Image 5"
                class="gallery-img"
              >
            </a>
            <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;115" class="kb-lightbox gallery-item" data-group="exampleGallery">
              <img
                srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                        ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
                alt="Image 6"
                class="gallery-img"
              >
            </a>
            <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;116" class="kb-lightbox gallery-item" data-group="exampleGallery">
              <img
                srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                        ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
                alt="Image 7"
                class="gallery-img"
              >
            </a>
            <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;117" class="kb-lightbox gallery-item item-wide" data-group="exampleGallery">
              <img
                srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                        ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
                alt="Image 8"
                class="gallery-img"
              >
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>

Fluid Gallery

Click on image to open lightbox.

View in new window
View in new window for full preview
      
        <section class="gal-sec text-bg-dark sec-spacing-sm">
    <div class="container-fluid">
      <div class="row">
        <div class="col">
          <div class="img-gallery" style=" --kb-galrow-md: 4; --kb-galrow-xl: 3;">
            <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;210" class="kb-lightbox gallery-item item-tall" data-group="fluidExample">
              <img
                srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                        ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
                alt="Image 1"
                class="gallery-img"
              >
            </a>
            <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;211" class="kb-lightbox gallery-item item-wide" data-group="fluidExample">
              <img
                srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                        ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
                alt="Image 2"
                class="gallery-img"
              >
            </a>
            <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;212" class="kb-lightbox gallery-item" data-group="fluidExample">
              <img
                srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                        ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
                alt="Image 3"
                class="gallery-img"
              >
            </a>
            <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;213" class="kb-lightbox gallery-item item-tall" data-group="fluidExample">
              <img
                srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                        ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
                alt="Image 4"
                class="gallery-img"
              >
            </a>
            <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;214" class="kb-lightbox gallery-item" data-group="fluidExample">
              <img
                srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                        ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
                alt="Image 5"
                class="gallery-img"
              >
            </a>
            <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;215" class="kb-lightbox gallery-item" data-group="fluidExample">
              <img
                srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                        ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
                alt="Image 6"
                class="gallery-img"
              >
            </a>
            <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;216" class="kb-lightbox gallery-item" data-group="fluidExample">
              <img
                srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                        ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
                alt="Image 7"
                class="gallery-img"
              >
            </a>
            <a href="/assets/img/fpo/fpo-3-2@xl.jpg?v&#x3D;217" class="kb-lightbox gallery-item item-wide" data-group="fluidExample">
              <img
                srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
                        ../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
                sizes="(max-width: 576px) 480px,
                       (max-width: 768px) 720px,"
                src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
                alt="Image 8"
                class="gallery-img"
              >
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>