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>

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>

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>