Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 1.6)

Note

This page is archived under version 1.6 and is available for reference purposes only. The latest version of Pattern Library is 2.

Image viewer

The image gallery pattern provides a full screen viewing experience for a single image or for a gallery of images. When the thumbnail image is clicked, the image will appear in a full screen modal. In the modal, the user may pan the image, zoom in, and zoom out. Descriptive text about the image can also be displayed in a toggle-able section.

There are two modes available: single image mode and gallery mode.

The widths for the thumbnails in the examples below are sized with the Boostrap grid classes.

Single image mode

In the single image mode, the modal will not contain next and previous buttons.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit in nisi non suscipit. Nulla vestibulum maximus facilisis. Aliquam quis lectus eget diam suscipit posuere. Sed at mattis purus.

Example long details to demonstrate scrolling.

This can be rich text, such as bold text and links

Nunc tempor sollicitudin turpis et ultricies. Sed rhoncus vitae purus at euismod. Praesent dictum, justo at blandit ultricies, ex quam auctor erat, vel luctus dolor felis at est. Nullam iaculis lacus tellus. Sed efficitur mollis purus pretium congue. Etiam ultricies rutrum neque sed rhoncus. Vestibulum cursus vestibulum mauris, eget facilisis justo tincidunt vitae. Morbi at massa vulputate, sagittis quam at, consequat neque. Etiam vulputate a urna a egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit in nisi non suscipit. Nulla vestibulum maximus facilisis. Aliquam quis lectus eget diam suscipit posuere. Sed at mattis purus.

Code


<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/zingtouch.min.js"></script>
<script src="js/coc.imageviewer.js"></script>

<!-- You may wrap the thumbnail(s) in Bootstrap grid columns for sizing. This is not mandatory. -->
<div class="row">
    <div class="col-6 col-sm-4 col-md-3 col-lg-2">
        <!-- Image thumbnail -->
        <div class="imgviewer-thumb">
            <!-- JavaScript will open the modal when the button is clicked -->
            <button>
                <!-- Populate the data-image and data-caption tags to allow the JavaScript to display the image in the modal -->
                <span class="background-image ratio-1x1" style="background-image: url( 'image.jpg' );" data-image="image.jpg"></span>
                <span class="caption">Enter caption here</span>
            </button>
            <!-- Additional detail about the image. It will be hidden in the thumbnail and can be viewed in the modal. -->
            <div class="caption-details">(Optional) Additional detail about the image here.</div>
        </div>
    </div>
</div>

Code


<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/zingtouch.min.js"></script>
<script src="js/coc.imageviewer.js"></script>

<!-- The `imgviewer-gallery` class must be applied to a wrapper element surrounding all thumbnails in the gallery. -->
<!-- You may wrap the thumbnail(s) in Bootstrap grid columns for sizing. This is not mandatory, but is recommended for the gallery mode. -->
<div class="imgviewer-gallery row">
    <div class="col-6 col-sm-4 col-md-3 col-lg-2">
        <!-- Image thumbnail -->
        <div class="imgviewer-thumb">
            <!-- JavaScript will open the modal when the button is clicked -->
            <button>
                <!-- Populate the data-image and data-caption tags to allow the JavaScript to display the image in the modal -->
                <span class="background-image ratio-1x1" style="background-image: url( 'image.jpg' );" data-image="image.jpg"></span>
                <span class="caption">Enter caption here</span>
            </button>
            <!-- Additional detail about the image. It will be hidden in the thumbnail and can be viewed in the modal. -->
            <div class="caption-details">(Optional) Additional detail about the image here.</div>
        </div>
    </div>
    <!-- Add additional thumbnails as required. -->
    ...
</div>