Skip to main content

Image & Video Galleries

Whether you only have a handful, or a lot of images or videos you would like to show, we offer a number of interactive options to meet your needs.

If you have up to five images or videos, or have several important messages to display on your home page, we reccommend using a carousel, a rotating banner that scrolls from one image to another in a constant loop.

If you have a lot of images or videos, we suggest building a gallery that allows users to view thumbnails and choose the video or image they want to see. Once the image, or video, opens full screen users can then scroll through the other content in the gallery.

Bootstrap Carousel for Images

The default carousel. Used on home pages such as the main USU home page and this Home Page Layout example. When clicking on an image, it takes you to the linked page.

Bootstrap Carousel example.

Blue Imp Carousel for Images

Can be used on sub pages at either full width of the page, or in smaller columns. Clicking on an image shows the title, controls for going backwards and forwards through the images, and a pause button to stop the rotation.

Image Carousel example.

Video Carousel

Similar to the Blue Imp Carousel for Images. Clicking on an image (typically a screenshot from the video) causes the carousel to pause and the video to start playing. if the video has not be played before, the video will load first before playing. Clicking on the playing video will pause it and revert to the screenshot so you can move backwards and forwards through the other videos.

Accepts mp4 and ogg video formats.

Video Carousel example.

Gallery for Images

Clicking on a thumbnail opens the image full screen. You can scroll backwards or forwards through the images with the next and previous controls, clicking on the thumbnails at the bottom of the screen, or by clicking the play button to start the automatic scrolling. The image title appears at the top of the screen.

Blue Imp Gallery example.

Lightbox Gallery for Images

Similar to the Blue Imp Gallery. Instead of an auto play feature, this gallery has options to zoom in or out on the picture, go full screen, download, and show or hide the thumbnails. The thumbmails are larger than in the Blue Imp Gallery. The title and caption appear beneath the image. You can also scroll forwards and backwards through the images.

Lightbox Image Gallery example.

Lightbox Gallery for Videos

Similar usability to the Lightbox Image Gallery, except with videos rather than images.

Works with videos uploaded to Youtube or Vimeo.

Lightbox Video Gallery example.