FreshUI - Premium Web App and Admin Template
FreshUI FreshUI

Gallery
Lots of options for creating the gallery you want!

Lightbox

Basic Usage

Adding the lightbox functionality to an image is pretty easy! You can create an image link pointing to your big image and add the attribute data-toggle="lightbox-image" to it:

<a href="img/placeholders/image_720x450_dark.png" data-toggle="lightbox-image">
    <img src="img/placeholders/image_160x120_dark.png" alt="image">
</a>

image

Advanced Usage

You can easily add extra options such as hover controls (you can use anything you like - labels, buttons etc) or image information to an image like shown below:

<div class="gallery-image">
    <img src="img/placeholders/image_160x120_dark.png" alt="image">
    <div class="gallery-image-options">
        <a href="img/placeholders/image_720x450_dark.png" data-toggle="lightbox-image" title="This is some info text about the image" class="gallery-link label label-info">View</a>
        <a href="javascript:void(0)" class="label label-success"><i class="fa fa-pencil"></i></a>
        <a href="javascript:void(0)" class="label label-danger"><i class="fa fa-times"></i></a>
    </div>
</div>
image
View

Lightbox Gallery

image
image
image
image
image
image
image
image
image

Lightbox Gallery with Options

image
View
image
View
image
View
image
View
image
View
image
View
image
View
image
View
image
View

Grid Gallery Use the grid to create any layout you need

image
image
image
image
image
image
image
image
image
image
image
image
image
image
image