CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →

Projects

Progress value is 30%

Lightbox

A modal gallery used to display media assets and content.

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

If you're using this component, you should also include the SCSS/JS of the following components:

This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.

How To

The Lightbox component is used to create modal galleries. It allows for different type of content: media elements (image/video/iframe) with or without a caption, and text content.

Lightbox control #

To connect the Lightbox to its trigger (e.g., button), make sure the id value of the first one is equal to the aria-controls value of the second one.

If you want to open a specific slide, add to the trigger a data-lightbox-item equal to the id of the slide you want to show first.

<button data-lightbox-item="slide-1" aria-controls="lightboxExample">Show Lightbox</button>

<div class="modal lightbox js-modal js-lightbox" id="lightboxExample" data-animation="on">
  <div class="lightbox__content">
    <header class="lightbox__header">
      <!-- ... -->
    </header>

    <div class="lightbox__body slideshow slideshow--transition-fade js-lightbox__body" data-swipe="on" data-navigation="off">
      <p class="sr-only">Modal Gallery Slideshow</p>

      <ul class="slideshow__content js-lightbox__slideshow">
        <li id="slide-1" class="slideshow__item js-slideshow__item">
          <!-- ... -->
        </li>

        <!-- ... -->
      </ul>
    </div>
  </div>
</div>

Gallery Slideshow

The Lightbox gallery is based on the Slideshow component. Some of its features are:

  • Swipe on mobile: this is enabled adding a data-swipe='on' to the .lightbox__body element;
  • Keyboard navigation;
  • Lazy loading of media elements;
  • Different slide animations: fade effect (add the .slideshow--transition-fade class to the .lightbox__body element) or slide effect (add the .slideshow--transition-slide class).

Lazy loading #

If you want to lazy load the media items (images/videos/iframes) in the gallery, you can:

  • Add the loading="lazy" attribute to the asset;
  • Add a data-src equal to the path of the asset you want to load;
  • For image elements, set the src attribute equal to a placeholder image path (visible while the image is being loaded).

Images #

For images, the <li> element will look like:

<li class="slideshow__item js-slideshow__item">
  <figure class="lightbox__media" data-media="img">
    <div class="lightbox__media-outer js-lightbox__media-outer">
      <div class="lightbox__media-inner js-lightbox__media-inner">
        <img loading="lazy" data-src="img-path.jpg" src="preview.svg" alt="Image Info">
      </div>
    </div>
            
    <figcaption class="lightbox__caption">Caption for image</figcaption>
  </figure>
</li>

Videos #

For videos, the <li> element will look like:

<li class="slideshow__item js-slideshow__item">
  <figure class="lightbox__media" data-media="video"> 
    <div class="lightbox__media-outer js-lightbox__media-outer">
      <div class="lightbox__media-inner media-wrapper js-lightbox__media-inner">
        <video loading="lazy" data-src="video-path.mp4" autoplay loop muted playsInline></video>
      </div>
    </div>
            
    <figcaption class="lightbox__caption">Caption for image</figcaption>
  </figure>
</li>

iframes #

For iframes, the <li> element will look like:

<li class="slideshow__item js-slideshow__item">
  <figure class="lightbox__media" data-media="video"> 
    <div class="lightbox__media-outer js-lightbox__media-outer">
      <div class="lightbox__media-inner media-wrapper js-lightbox__media-inner">
        <iframe loading="lazy" data-src="https://www.youtube.com/embed/mYocfuqu2A8"></iframe>
      </div>
    </div>
            
    <figcaption class="lightbox__caption">Caption for image</figcaption>
  </figure>
</li>

Text components #

The Lightbox gallery can include text items. The <li> element will look like:

<li class="slideshow__item js-slideshow__item">
  <div class="lightbox__text-outer text-component max-width-sm">
    <div class="lightbox__text">
      <!-- content here -->
    </div>
  </div>
</li>

Thumbnail Preview

If you want to add a thumbnail preview for each item in the gallery, set a data-thumb equal to the path of the preview. Each item of the gallery will require a data-thumb attribute.

The <li> element will look like:

<li class="slideshow__item js-slideshow__item">
  <figure class="lightbox__media" data-media="img">
    <div class="lightbox__media-outer js-lightbox__media-outer">
      <div class="lightbox__media-inner js-lightbox__media-inner">
        <img loading="lazy" data-src="img-path.jpg" src="preview.svg" data-thumb="thumb-img-path.jpg" alt="Image Info">
      </div>
    </div>
            
    <figcaption class="lightbox__caption">Caption for image</figcaption>
  </figure>
</li>

To display the image thumbnails, you'll need to include the footer.js-lightbox_footer (where the list of thumbnails will be created in JavaScript). Take a look at the demo HTML for more details. If you don't include this element, the thumbnails won't be viisble.

Demo Assets #

⭐️ Icons by Nucleoapp.

🌅 Demo photos:

Changelog

  • ✅ Added the data-lightbox-item attribute to select the slide to show first
    🗓 November 1, 2019
  • ✅ Component created
    🗓 October 29, 2019

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us