Expandable Image Gallery
Image gallery that expands in a modal media gallery on click.
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.
The Expandable Image Gallery component allows you to convert your gallery of images in a full-width modal gallery.
Image 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
- 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:
<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>
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.
Modal Slideshow #
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
- Keyboard navigation;
- Lazy loading of images;
- Image zoom-in/out: this is enabled adding a
data-zoom='on' to the
- Different slide animations: fade effect (add the
.slideshow--transition-fade class to the
.exp-lightbox__body element) or slide effect (add the .
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: