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

Select image ratio:

Select image position X:

Select image position Y:

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>

<!-- 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>

Gallery mode

In the gallery mode, the modal will contain next and previous buttons to cycle through the images. There is also an indicator displaying which image is currently in view.

Demo

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.

Multiple galleries

Multiple galleries will work on the same page. The next and previous buttons in the gallery modal will only cycle through the images belonging to the current gallery.

Example long details to demonstrate scrolling.

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

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.
To size the thumbnail, you may wrap it in a Bootstrap grid column or choose your own method to size it. -->
<div class="row imgviewer-gallery">
	<!-- 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 iamge 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>
	<!-- Add additional image thumbnails as needed. -->
	...
</div>

Information This site is moving

Note

Image viewer

Single image mode

Demo

Code

Gallery mode

Demo

Multiple galleries

Code