Features

It's simple! By adding classes and ids you can generate quick and easy single lightboxes or galleries. You can copy and paste the code of the examples into your pages and adjust it to your needs.

Example 1: Single Lightbox only with image

<div class="lb-lightbox"> 
    <a href="#image-A1">
        <img class="img-responsive img-thumbnail" src="../dmt/images/filemanager/demo/styles/purify_default.png" alt="image01">
        Click on image to open
    </a>
</div>
<div class="lb-overlay" id="image-A1">
     <img src="../dmt/images/filemanager/demo/styles/purify_default.png" alt="default">
     <br><br><a class="btn btn-primary" href="#page">Close</a>
</div>

Example 2: Single Lightbox with description

default

Example 2

Simple Lightbox with description.
Close
<div class="lb-lightbox"> 
    <a href="#image-A2">
        <img class="img-responsive img-thumbnail" src="../dmt/images/filemanager/demo/styles/purify_default.png" alt="image01">
        Click on image to open
    </a>
</div>
<div class="lb-overlay" id="image-A2">
     <img src="../dmt/images/filemanager/demo/styles/purify_default.png" alt="default">
     <div class="lb-description">
         <h3>Example 2</h3>Simple Lightbox with description.
     </div>
     <a class="btn btn-primary" href="#page">Close</a>
</div>

Example 3: Lightbox Gallery with navigation

pink

Basic Pink

A dark pink style with no additional settings.
<X>
turquoise

Basic Turquoise

A turquoise style with no additional settings.
<X>
Green

Basic Green

A light green style with no additional settings.
<X>
<div class="row">
    <div class="col-md-4">
        <div class="lb-lightbox"> <a href="#image-A4"><img class="img-thumbnail" src="../dmt/images/filemanager/demo/styles/purify_pink.png" alt="image04"><br>Basic Pink</a>
        </div>
        <div class="lb-overlay" id="image-A4"> <img class="img-thumbnail" src="../dmt/images/filemanager/demo/styles/purify_pink.png" alt="pink">
            <div class="lb-description">
                <h3>Basic Pink</h3>A dark pink style with no additional settings.
            </div>
            <div class="btn-group btn-group-sm"> <a class="btn btn-primary" href="#image-A6"><</a><a class="btn btn-primary" href="#page">X</a><a class="btn btn-primary" href="#image-A5">></a>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="lb-lightbox"> <a href="#image-A5"><img class="img-thumbnail img-responsive" src="../dmt/images/filemanager/demo/styles/purify_turquoise.png" alt="image05"><br>Basic Turquoise</a>
        </div>
        <div class="lb-overlay" id="image-A5"> <img class="img-thumbnail" src="../dmt/images/filemanager/demo/styles/purify_turquoise.png" alt="turquoise">
            <div class="lb-description">
                <h3>Basic Turquoise</h3>A turquoise style with no additional settings.
            </div>
            <div class="btn-group btn-group-sm"> <a class="btn btn-primary" href="#image-A4"><</a><a class="btn btn-primary" href="#page">X</a><a class="btn btn-primary" href="#image-A6">></a>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="lb-lightbox"> <a href="#image-A6"><img class="img-thumbnail img-responsive" src="../dmt/images/filemanager/demo/styles/purify_green.png" alt="image06"><br>Basic Green</a>
        </div>
        <div class="lb-overlay" id="image-A6"> <img class="img-thumbnail" src="../dmt/images/filemanager/demo/styles/purify_green.png" alt="Green">
            <div class="lb-description">
                <h3>Basic Green</h3>A light green style with no additional settings.
            </div>
            <div class="btn-group btn-group-sm"> <a class="btn btn-primary" href="#image-A5"><</a><a class="btn btn-primary" href="#page">X</a><a class="btn btn-primary" href="#image-A4">></a>
            </div>
        </div>
    </div>
</div>

Please Wait!

Please wait... it will take a second!