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.

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>

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.

Example long details to demonstrate scrolling.

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

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

Information This site is moving

Note

Image viewer

Single image mode

Code

Gallery mode

Multiple galleries

Code