Funktionen

Es ist ganz einfach! Durch das Hinzufügen von Klassen und ids können Sie schnell und einfach einzelne Lightboxen oder Gallerien erstellen. Kopieren Sie doch einfach den Beispielcode, fügen diesen in Ihre Inhalte ein und passen ihn an Ihre Bedürfnisse an.

Beispiel 1: Einzelne Lightbox nur mit Bild

<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>

Beispiel 2: Einzelne Lightbox mit Beschreibung

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>

Beispiel 3: Lightbox Gallerie mit 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>

Bitte warten!

Bitte warten... es dauert eine Sekunde!