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.9)

Note

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

Image viewer

The image viewer 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. Optional descriptive text about the image can be toggled on or off.

The widths for the thumbnails in the examples below are sized with the Boostrap grid classes. The grid classes may be modified to suit your scenario.

Single image mode

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

Demo

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>

<!-- To size the thumbnail, you may wrap it in a Bootstrap grid column or choose your own method to size it. -->
<div class="row">
	<!-- Change the Bootstrap column classes as necessary. -->
	<div class="col-6 col-sm-4 col-md-3 col-lg-2">
		<!-- Image thumbnail -->
		<div class="imgviewer-thumb">
			<button>
				<!-- Populate the data-image attribute with the link to the full-size image to be displayed in the image viewer modal. -->
				<span class="background-image {{ ratio-1x1 | ratio-16x9 | ratio-4x3 | ratio-3x4 }} {{ bg-pos-x-left | bg-pos-x-center | bg-pos-x-right }} {{ bg-pos-y-top | bg-pos-y-center | bg-pos-y-bottom }}" style="background-image: url( '{{ Thumbnail URL (e.g. image.jpg) }}' );" data-image="{{ Full image URL (e.g. image.jpg) }}"></span>
				<span class="caption">{{ Thumbnail caption }}</span>
			</button>
			<!-- Optional additional detail about the image. The details are
			hidden in the thumbnail view and are displayed in the image viewer modal. -->
			<div class="caption-details">
				{{ Additional image details (may contain HTML including links) }}
			</div>
		</div>
	</div>
</div>