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<template id="my-lightbox-html-1">
        <div class="uix-lightbox__content-container" role="dialog" tabindex="-1" aria-hidden="true">
           <div class="uix-lightbox__content" role="document">
                <div role="note">
                    <!-- ///////   content begin /////// -->
                    ...
                    <!-- ///////   content end /////// -->
                </div><!-- /[role="note"] -->
           </div><!-- /.uix-lightbox__content -->
        </div>
        <!-- /.uix-lightbox__content-container -->
    </template>

Click Me To Show HTML Code
Click Me To Show HTML Code (Not Fixed)

### 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<template id="my-lightbox-html-4">
        <div class="uix-lightbox__content-container" role="dialog" tabindex="-1" aria-hidden="true">
           <div class="uix-lightbox__content" role="document">
               <div role="note"></div><!-- /[role="note"] -->
           </div><!-- /.uix-lightbox__content -->
        </div>
        <!-- /.uix-lightbox__content-container -->
    </template>

Click Me To Add "button.html" Elements