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:

<h1>Gallery 1 Example (default)</h1>
<div class="gallery animate-fadeInLeft">
    <div class="item"><a class="gallery-item" href="images/gallery/orangecounty-big.jpg" data-gallery="gallery-1"><img src="images/gallery/orangecounty-thumb.jpg" alt="Sample Image"></a></div>
    <div class="item"><a class="gallery-item" href="images/gallery/pasorobles-big.jpg" data-gallery="gallery-1"><img src="images/gallery/pasorobles-thumb.jpg" alt="Sample Image"></a></div>
    <div class="item"><a class="gallery-item" href="images/gallery/santabarbara-big.jpg" data-gallery="gallery-1"><img src="images/gallery/santabarbara-thumb.jpg" alt="Sample Image"></a></div>
    <div class="item"><a class="gallery-item" href="images/gallery/sierra-big.jpg" data-gallery="gallery-1"><img src="images/gallery/sierra-thumb.jpg" alt="Sample Image"></a></div>
    <div class="item"><a class="gallery-item" href="images/gallery/orangecounty-big.jpg" data-gallery="gallery-1"><img src="images/gallery/orangecounty-thumb.jpg" alt="Sample Image"></a></div>
    <div class="item"><a class="gallery-item" href="images/gallery/pasorobles-big.jpg" data-gallery="gallery-1"><img src="images/gallery/pasorobles-thumb.jpg" alt="Sample Image"></a></div>
</div>

<h1>Gallery 2 Example (three-up)</h1>
<div class="gallery three-up">
    <div class="item"><a class="gallery-item" href="images/gallery/orangecounty-big.jpg" data-gallery="gallery-2"><img src="images/gallery/orangecounty-thumb.jpg" alt="Sample Image"></a></div>
    <div class="item"><a class="gallery-item" href="images/gallery/pasorobles-big.jpg" data-gallery="gallery-2"><img src="images/gallery/pasorobles-thumb.jpg" alt="Sample Image"></a></div>
    <div class="item"><a class="gallery-item" href="images/gallery/santabarbara-big.jpg" data-gallery="gallery-2"><img src="images/gallery/santabarbara-thumb.jpg" alt="Sample Image"></a></div>
    <div class="item"><a class="gallery-item" href="images/gallery/sierra-big.jpg" data-gallery="gallery-2"><img src="images/gallery/sierra-thumb.jpg" alt="Sample Image"></a></div>
    <div class="item"><a class="gallery-item" href="images/gallery/orangecounty-big.jpg" data-gallery="gallery-2"><img src="images/gallery/orangecounty-thumb.jpg" alt="Sample Image"></a></div>
    <div class="item"><a class="gallery-item" href="images/gallery/pasorobles-big.jpg" data-gallery="gallery-2"><img src="images/gallery/pasorobles-thumb.jpg" alt="Sample Image"></a></div>
</div>

<h1>Gallery 3 Example (four up)</h1>
<div class="gallery four-up">
    <div class="item"><a class="gallery-item" href="images/gallery/orangecounty-big.jpg" data-gallery="gallery-3"><img src="images/gallery/orangecounty-thumb.jpg" alt="Sample Image"></a></div>
    <div class="item"><a class="gallery-item" href="images/gallery/pasorobles-big.jpg" data-gallery="gallery-3"><img src="images/gallery/pasorobles-thumb.jpg" alt="Sample Image"></a></div>
    <div class="item"><a class="gallery-item" href="images/gallery/santabarbara-big.jpg" data-gallery="gallery-3"><img src="images/gallery/santabarbara-thumb.jpg" alt="Sample Image"></a></div>
    <div class="item"><a class="gallery-item" href="images/gallery/sierra-big.jpg" data-gallery="gallery-3"><img src="images/gallery/sierra-thumb.jpg" alt="Sample Image"></a></div>
</div>

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:

Slider Gallery Example

Source Code: