# Lightbox

All modular elements can be readily used and customized in every layout across pages.

#### Lightbox Image

Lightboxes are integrated in Posh. It allows you to display an thumbnail and when clicked, the original image will popped up.
The lightbox image works by wrapping anything ie.`<img>` tag inside an `<a>` element with the data attribute `data-lightbox="true"`

Lightbox

##### HTML

    <a href="origin/images/gallery/original-01.jpg" data-lightbox="data-lightbox" data-title="Image caption">
    	<img src="origin/images/thumbnails/thumb-01.jpg"/>
    </a>

##### CSS

    <link href="assets/lib/lightbox2/dist/css/lightbox.css" rel="stylesheet">

##### Javascript

    <script src="assets/lib/lightbox2/dist/js/lightbox.js"></script>

#### Lightbox gallery

You can easily create a gallery of lightbox images by changing the `data-lightbox=""` attribute to the same name. For example `data-lightbox="gallery-01"`

##### HTML

    <a href="origin/images/gallery/original-01.jpg" data-lightbox="gallery-01" data-title="Image caption">
    	<img src="origin/images/thumbnails/thumb-01.jpg"/>
    </a>
    	</div>
    <a href="origin/images/gallery/original-02.jpg" data-lightbox="gallery-01" data-title="Image caption">
    	<img src="origin/images/thumbnails/thumb-02.jpg"/>
    </a>
    	</div>
    <a href="origin/images/gallery/original-03.jpg" data-lightbox="gallery-01" data-title="Image caption">
    	<img src="origin/images/thumbnails/thumb-03.jpg"/>
    </a>
    	</div>
    <a href="origin/images/gallery/original-04.jpg" data-lightbox="gallery-01" data-title="Image caption">
    	<img src="origin/images/thumbnails/thumb-04.jpg"/>
    </a>
    	</div>
    <a href="origin/images/gallery/original-05.jpg" data-lightbox="gallery-01" data-title="Image caption">
    	<img src="origin/images/thumbnails/thumb-05.jpg"/>
    </a>
    	</div>
    <a href="origin/images/gallery/original-06.jpg" data-lightbox="gallery-01" data-title="Image caption">
    	<img src="origin/images/thumbnails/thumb-06.jpg"/>
    </a>

##### CSS

    <link href="assets/lib/lightbox2/dist/css/lightbox.css" rel="stylesheet">

##### Javascript

    <script src="assets/lib/lightbox2/dist/js/lightbox.js"></script>

##### Jump into