0%

### Lightbox

Lightbox is a script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.

Use the following HTML code to display image(s).

    HTML<a class="uix-lightbox__trigger" href="#" data-lb-src="your.jpg">Click Me To Show Image</a>

    <a class="uix-lightbox__trigger" href="#" data-lb-src="[{'thumb':small-1.jpg', 'large':large-1.jpg'}, {'thumb':small-2.jpg', 'large':large-2.jpg'}, {'thumb':small-3.jpg', 'large':large-3.jpg'}]">Click Me To Show Multiple Image</a>

    <a class="uix-lightbox__trigger" href="#" data-lb-src="your.jpg" data-lb-fixed="false">Click Me To Show Image (Not Fixed)</a>

Click Me To Show Image
Click Me To Show Multiple Image
Click Me To Show Image (Not Fixed)

### Lightbox(Display HTML Code)

Use the following HTML code to display html code.

    HTML<a class="uix-lightbox__trigger" href="#" data-lb-html="#my-lightbox-html-1">Click Me To Show HTML Code</a>

    <a class="uix-lightbox__trigger" href="#" data-lb-html="#my-lightbox-html-2" data-lb-fixed="false">Click Me To Show HTML Code (Not Fixed)</a>

    HTML<div class="uix-lightbox__content-container" id="my-lightbox-html-1">
       <div class="uix-lightbox__content">
    	    <div>
    			<!-- ///////   content begin /////// -->
    			...
    			<!-- ///////   content end /////// -->
    		</div><!-- /div -->
       </div><!-- /.uix-lightbox__content -->
    </div>
    <!-- /.uix-lightbox__content-container -->

Click Me To Show HTML Code

##### Title 1

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. This is link

Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Super/Duper/Long/NonBreaking/Path/Name/To/A/File/That/Is/Way/Deep/Down/In/Some/Mysterious/Remote/Desolate/Part/Of/The/Operating/System/To/A/File/That/Just/So/Happens/To/Be/Strangely/Named/Supercalifragilisticexpialidocious.txt

Click Me To Show HTML Code (Not Fixed)

##### Title 2

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. This is link

Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Super/Duper/Long/NonBreaking/Path/Name/To/A/File/That/Is/Way/Deep/Down/In/Some/Mysterious/Remote/Desolate/Part/Of/The/Operating/System/To/A/File/That/Just/So/Happens/To/Be/Strangely/Named/Supercalifragilisticexpialidocious.txt

### Lightbox(With AJAX)

Use the following HTML code with AJAX.

    HTML<a class="uix-lightbox__trigger" href="ajax-page.html" data-lb-html="#my-lightbox-html-4" data-lb-fixed="false" data-lb-ajax='{"target":"#my-ajax-demo-target-button", "method":"POST"}'>Click Me To Add <strong>"ajax-page.html"</strong> Elements</a>

    HTML<div class="uix-lightbox__content-container" id="my-lightbox-html-4">
       <div class="uix-lightbox__content">
    	   <div></div><!-- /div -->
       </div><!-- /.uix-lightbox__content -->
    </div>
    <!-- /.uix-lightbox__content-container -->

Click Me To Add "button.html" Elements