0%
Uix Kit

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

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

<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>
<div role="dialog" tabindex="-1" aria-hidden="true" class="uix-lightbox__content-container" id="my-lightbox-html-1">
   <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 -->

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

Lightbox(With AJAX)

Use the following HTML code with AJAX.

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