Image Gallery
Collection of lightbox images displayed in a masonry-like grid
Link Gallery Props
This component assumes the gallery items (images) placed inside are square. Optionally you can mark gallery items tall, allowing it to take up 2 vertical units in the grid, or wide allowing the item to take up two horizontal units within the grid.
groupName: [string] - Optional: Gallery group name.
items: [array] - List of items for gallery
- itemImage: [string] - Gallery image source for large viewport sizes
itemImageSm: [string] - Forced square gallery image for small screens
itemImageLg: [string] - Lightbox image
itemImageAlt: [string] - Image description
itemRatio: [string] - Optional: change form factor of item. Values: wide, tall. Defaults to a square ratio if not defined
Gallery Example
<div class="rbn-img-gallery">
<a href="https://placehold.co/1280x720?text=Gallery+Image+1" class="rbn-lightbox gallery-item item-wide" data-group="sampleGallery">
<img class="gallery-img d-none d-md-block" src="../../../../assets/img/fpo/fpo-image-2-1.jpg" alt="Landscape image">
<img class="gallery-img d-md-none" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="Landscape image">
</a>
<a href="https://placehold.co/1280x720?text=Gallery+Image+2" class="rbn-lightbox gallery-item" data-group="sampleGallery">
<img class="gallery-img d-none d-md-block" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="Square image">
<img class="gallery-img d-md-none" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="Square image">
</a>
<a href="https://placehold.co/1280x720?text=Gallery+Image+3" class="rbn-lightbox gallery-item" data-group="sampleGallery">
<img class="gallery-img d-none d-md-block" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="Square image">
<img class="gallery-img d-md-none" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="Square image">
</a>
<a href="https://placehold.co/1280x720?text=Gallery+Image+4" class="rbn-lightbox gallery-item item-tall" data-group="sampleGallery">
<img class="gallery-img d-none d-md-block" src="../../../../assets/img/fpo/fpo-image-1-2.jpg" alt="Square image">
<img class="gallery-img d-md-none" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="Square image">
</a>
<a href="https://placehold.co/1280x720?text=Gallery+Image+5" class="rbn-lightbox gallery-item" data-group="sampleGallery">
<img class="gallery-img d-none d-md-block" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="Square image">
<img class="gallery-img d-md-none" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="Square image">
</a>
<a href="https://placehold.co/1280x720?text=Gallery+Image+6" class="rbn-lightbox gallery-item item-tall" data-group="sampleGallery">
<img class="gallery-img d-none d-md-block" src="../../../../assets/img/fpo/fpo-image-1-2.jpg" alt="Portrait image">
<img class="gallery-img d-md-none" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="Portrait image">
</a>
<a href="https://placehold.co/1280x720?text=Gallery+Image+7" class="rbn-lightbox gallery-item" data-group="sampleGallery">
<img class="gallery-img d-none d-md-block" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="Square image">
<img class="gallery-img d-md-none" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="Square image">
</a>
<a href="https://placehold.co/1280x720?text=Gallery+Image+8" class="rbn-lightbox gallery-item" data-group="sampleGallery">
<img class="gallery-img d-none d-md-block" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="Square image">
<img class="gallery-img d-md-none" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="Square image">
</a>
<a href="https://placehold.co/1280x720?text=Gallery+Image+9" class="rbn-lightbox gallery-item" data-group="sampleGallery">
<img class="gallery-img d-none d-md-block" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="Square image">
<img class="gallery-img d-md-none" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="Square image">
</a>
</div>