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.
Gallery 1 Example (default)
Gallery 2 Example (three-up)
Gallery 3 Example (four up)
Source Code:
Gallery 1 Example (default)
Gallery 2 Example (three-up)
Gallery 3 Example (four up)
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
Source Code: