Image Gallery: Grid

By default, the image gallery grid displays photos in a lightbox. The lightbox contains the photo plus any selected text elements (e.g., title, caption, action text).

The lightbox and the grid may display different sets of text elements.

If a gallery image is set to link somewhere else (like another URL or page on the site), that link will appear in the lightbox, not on the grid.

<div class="image-gallery image-gallery--grid image-gallery--grid--next-prev lightbox lightbox--group" id="[ID]">

    <ul class="grid grid--block grid--block-horz-center grid--block-xs-4">
        <li id="[ID]" class="image-gallery-item lightbox lightbox--inline js-lightbox--inline" data-mfp-src="#[Lightbox ID]">
        
            <div class="image-gallery-item__content">
        
                <div class="image-gallery-item-image image">
                    <img src="path/to/foo.jpg" alt="[Alternate Text]">
                </div>
        
            </div>

            <div id="[Lightbox ID]" class="inline-popup inline-popup--md mfp-hide" style="max-width: XXXpx;">

                <div class="inline-popup__content">
                    
                    <div class="image" style="max-width: XXXpx;">
                        <img src="path/to/foo.jpg" alt="[Alternate Text]">
                    </div>
            
                </div>

            </div>
            
        </li>
        <li id="[ID]" class="image-gallery-item lightbox lightbox--inline js-lightbox--inline" data-mfp-src="#[Lightbox ID]">
        
            <div class="image-gallery-item__content">
        
                <div class="image-gallery-item-image image">
                    <img src="path/to/foo.jpg" alt="[Alternate Text]">
                </div>

                <div class="image-gallery-item-details">
            
                    <div class="image-gallery-item-title">
                        [Title Text]
                    </div>
                
                </div>
        
            </div>

            <div id="[Lightbox ID]" class="inline-popup inline-popup--md mfp-hide" style="max-width: XXXpx;">
        
                <div class="inline-popup__header">
                    <h5><a href="[URL]">[Title Text]</a></h5>
                </div>

                <div class="inline-popup__content">
                    
                     <div class="image" style="max-width: XXXpx;">
                        <img src="path/to/foo.jpg" alt="[Alternate Text]">
                    </div>
           
                </div>

            </div>
            
        </li>
        <li id="[ID]" class="image-gallery-item lightbox lightbox--inline js-lightbox--inline" data-mfp-src="#[Lightbox ID]">
        
            <div class="image-gallery-item__content">
        
                <div class="image-gallery-item-image image">
                    <img src="path/to/foo.jpg" alt="[Alternate Text]">
                </div>

                <div class="image-gallery-item-details">
            
                    <div class="image-gallery-item-title">
                        [Title Text]
                    </div>
            
                    <div class="image-gallery-item-caption">
                        [Caption Text]
                    </div>
                
                </div>
        
            </div>

            <div id="[Lightbox ID]" class="inline-popup inline-popup--md mfp-hide" style="max-width: XXXpx;">
        
                <div class="inline-popup__header">
                    <h5><a href="[URL]">[Title Text]</a></h5>
                </div>

                <div class="inline-popup__content">
                    
                    <div class="image" style="max-width: XXXpx;">
                        <img src="path/to/foo.jpg" alt="[Alternate Text]">
                    </div>
                    
                    <div class="image-gallery-item-caption">
                        [Caption Text]
                    </div>
            
                </div>

            </div>
            
        </li>
        <li id="[ID]" class="image-gallery-item lightbox lightbox--inline js-lightbox--inline" data-mfp-src="#[Lightbox ID]">
        
            <div class="image-gallery-item__content">
        
                <div class="image-gallery-item-image image">
                    <img src="path/to/foo.jpg" alt="[Alternate Text]">
                </div>

                <div class="image-gallery-item-details">
            
                    <div class="image-gallery-item-title">
                        [Title Text]
                    </div>
            
                    <div class="image-gallery-item-caption">
                        [Caption Text]
                    </div>
            
                    <div class="image-gallery-item-action">
                        [Action Text]
                    </div>
                
                </div>
        
            </div>

            <div id="[Lightbox ID]" class="inline-popup inline-popup--md mfp-hide" style="max-width: XXXpx;">
        
                <div class="inline-popup__header">
                    <h5><a href="[URL]">[Title Text]</a></h5>
                </div>

                <div class="inline-popup__content">
                    
                    <div class="image" style="max-width: XXXpx;">
                        <img src="path/to/foo.jpg" alt="[Alternate Text]">
                    </div>
                    
                    <div class="image-gallery-item-caption">
                       [Caption Text]
                    </div>
            
                    <div class="image-gallery-item-action">
                        <a href="[URL]">[Action Text]</a>
                    </div>
            
                </div>

            </div>
            
        </li>
    </ul>
    
    [Pagination Links]

</div>

No Lightboxes

Image 2
Image 3

This is the caption for "Image 3."

More caption stuff.
Image 4

This is the caption for "Image 4."

Action Text

<div class="image-gallery image-gallery--grid" id="image-gallery2">

    <ul class="grid grid--block grid--block-horz-center grid--block-xs-4">
        <li id="[ID]" class="image-gallery-item">
        
            <div class="image-gallery-item__content">
        
                <div class="image-gallery-item-image image">
                    <a href="[URL]"><img alt="[Title]" src="path/to/thumb.jpg"> </a>
                </div>
        
            </div>
            
        </li>
        <li id="[ID]" class="image-gallery-item">
        
            <div class="image-gallery-item__content">

                <div class="image-gallery-item-image image">
                    <a href="[URL]"><img alt="[Title]" src="path/to/thumb.jpg"></a>
                </div>

                <div class="image-gallery-item-details">

                    <div class="image-gallery-item-title">
                        <a href="[URL]"><[Title]</a>
                    </div>
    
                </div>

            </div>
            
        </li>
        <li id="[ID]" class="image-gallery-item">
        
            <div class="image-gallery-item__content">
        
                <div class="image-gallery-item-image image">
                    <a href="[URL]"><img alt="[Title]" src="path/to/thumb.jpg"></a>
                </div>

                <div class="image-gallery-item-details">
            
                    <div class="image-gallery-item-title">
                        <a href="[URL]"><[Title]</a>
                    </div>
            
                    <div class="image-gallery-item-caption">
                        [Caption]
                    </div>
                
                </div>
        
            </div>
            
        </li>
        <li id="[ID]" class="image-gallery-item">
        
            <div class="image-gallery-item__content">
    
                <div class="image-gallery-item-image image">
                    <a href="[URL]"><img alt="[Title]" src="path/to/thumb.jpg"></a>
                </div>

                <div class="image-gallery-item-details">
        
                    <div class="image-gallery-item-title">
                        <a href="[URL]"><[Title]</a>
                    </div>
        
                    <div class="image-gallery-item-caption">
                        [Caption]
                    </div>
        
                    <div class="image-gallery-item-action">
                        <a href="[URL]"><[Action Text]</a>
                    </div>
            
                </div>
    
            </div>
            
        </li>
    </ul>

</div>