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

Projects

Progress value is 30%

Expandable Image Gallery

Image gallery that expands in a modal media gallery on click.

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 Expandable Image Gallery component allows you to convert your gallery of images in a full-width modal gallery.

To create the demo, we used a simple image gallery based on the CodyHouse framework grid system. You are free to replace the gallery with a different one of your choice (check the Gallery Category for more components).

For it to work properly, make sure to add the following attributes to the container of your gallery:

  • Add the .js-exp-gallery class;
  • Add a data-controls attribute equal to the id of the .exp-lightbox modal (the modal containing the slideshow of images).

In addition to the above, make sure to:

  • Add the .js-exp-gallery__item class to each item of the gallery;
  • Add a data-src attribute to the <img> element inside the .js-exp-gallery equal to the src of the image you want to show in the modal;
  • If you want to add a caption to the image in the modal, add a .js-exp-gallery__caption to the caption element inside the gallery item.

Here's an example of how a gallery item should look like:

 <li class="js-exp-gallery__item">
  <figure>
    <img src="../../../app/assets/img/lightbox-img-2.jpg" data-src="../../../app/assets/img/lightbox-img-hr-2.jpg" alt="Image Description">
    <figcaption class="sr-only js-exp-gallery__caption">Image caption</figcaption>
  </figure>
</li>

Note that we added the .sr-only class to the .js-exp-gallery__caption element: this way the caption will only be visible in the modal gallery but it remains accessible to screen readers. 

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

  • Swipe on mobile (left/right to change image, top/bottom to close modal): this is enabled adding a data-swipe='on' to the .exp-lightbox__body element;
  • Keyboard navigation;
  • Lazy loading of images;
  • Image zoom-in/out: this is enabled adding a data-zoom='on' to the .exp-lightbox__body element;
  • Different slide animations: fade effect (add the .slideshow--transition-fade class to the .exp-lightbox__body element) or slide effect (add the .slideshow--transition-slide class).

Lazy loading #

If you want to lazy load the images in the modal gallery, you can add to the .js-exp-gallery element a data-placeholder attribute equal to a placeholder image path (visible while the image is being loaded).

Morphing Images #

The ratio of the gallery images (i.e., the images inside the .js-exp-gallery__item elements) doesn't need to be equal to the one of the modal images (i.e., the images inside the .exp-lightbox component). We've developed a mechanism, based on SVG clipPath and JS-powered transformations, that morphs the original images into the final ones.

If you check the morphing-images variation, you'll notice each figure element uses the .media-wrapper utility class to set a custom ratio for the images.

You can set custom height + width values for the gallery item images, and morph them into modal images with a different size.

Demo Assets #

⭐️ Icons by Nucleoapp.

🌅 Demo photos:

Changelog

  • ✅ Component created
    🗓 November 04, 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