Image Gallery

The default gallery will attempt to place as many photos as it can in a row before wrapping to a new line. For a little added control over layout, add a class of .three-up or .four-up to the .gallery div limit the number of item in a single row.

Images can be grouped into galleries by adding the data-gallery attribute with a value of the name of the gallery to the image link. For example, any gallery item link to an image with <a data-gallery="gallery1" ... > will group all elements with the value gallery1 together. A user can then use arrows on either side of the image popup to navigate through items in the same gallery.

NOTE: For optimum viewing experience, it is recommended that gallery thumbnails be landscape cropped to 210x140 or square cropped to 140x140.

Galleries in Sidebar

Two gallery styles are available for use in the sidebar. The small gallery uses a class of .gallery-small and the sliding gallery uses a class of .carousel-gallery.

Small Example


Slider Gallery Example