Image viewer

The image viewer component allows users to view and interact with a single or multiple images on a page. It not only presents related images using a gallery experience, but supports zooming and additional details that help users understand the context of the image(s) as well as their relationship to the content of the page.

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files l zingtouch.min.js | coc.imageviewer.js

Functional grouping: Media

Demo

Configure: select the dropdowns below to display the variety of options that an image viewer supports. View the gallery option.

Full image caption

Code


				
			

		
		
			
Responsive preview

			

				

					
				

			

		

		

	

    	




    
    
    



    
    
        

           Usage best practices
        

        








    
    
    



    
        

            

                
                    





    
    
    


Image viewer can support both single and multiple images. When there are multiple images, gallery mode allows users to navigate to the previous and next images while the modal is open.


Consider using an image viewer when:


    

  • images are at the center of experience of the page i.e. gallery

  • images contain details that help supplement the content

  • zooming or additional content is needed to help users understand the image




    






                
                    





    
    
    


Usage examples:


    

  • showcasing photography or artwork as an album

  • static maps or infographics




    






                
            

        

    
    
    




    
    
    



    
        

            

                
                    





    
    
    





    
        
            
Do
                
                
            

        
        
    
    
    




    
    


Enable filtering or pagination to reduce the page clutter and assist users with finding what they are looking for quicker, unless all images contain critical information that needs to be seen as a whole.



    





Separate unrelated galleries on different pages or use headings and other spacing components on the same page.



    





Display additional caption content by default if there is important information.



    





Keep thumbnail captions succinct to avoid visual clutter (no more than 30 characters).



    





Ensure that a consistent image ratio is used for all thumbnails (specifically for image viewer with multiple images per row). Typical ratio for thumbnails is 1:1.



    



    









                
                    





    
    
    





    
    
        
            
Don't
                
                
            

        
        
    
    




    
    


Do not show too many thumbnail images at once (keep to one or two rows). This can be visually overwhelming for users to scan through.



    





Do not put inside a narrow column (especially an image viewer with multiple images). Thumbnails will be difficult to see and the caption text will be illegible.



    





Do not hide high priority images with pagination. Always put the most important images first.



    





Do not hide important information inside an image caption. Users may not click on the thumbnail or read the caption so important information needs to be part of the page content.