uix-kit

<!DOCTYPE html> <html lang="@@{website_lang}" dir="@@{website_dirLTR}"> <head> <meta charset="@@{website_charset}" /> <title>Lightbox - @@{website_title}</title> @@include('./src/components/_global/include-header.html') </head> <body class="page"> @@include('./src/components/_global/include-loader.html') @@include('./src/components/_global/include-toggle-trigger.html') <div class="uix-wrapper">  <header class="uix-header__container"> <div class="uix-header"> <div class="container"> @@include('./src/components/_global/include-brand.html') @@include('./src/components/_global/include-menu.html') </div>  <div class="uix-clearfix"></div> </div> </header> <div class="uix-header__placeholder js-uix-header__placeholder-autoheight"></div> <main id="uix-maincontent">  <section class="uix-spacing--s uix-spacing--no-bottom"> <div class="container"> <div class="row"> <div class="col-12"> <h3>Lightbox</h3> <p>Lightbox is a script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.</p> <p>Use the following HTML code to display image(s).</p> <pre class="uix-precode uix-t-l"><label>HTML</label><code><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></code> </pre> <hr> </div> </div>  </div>  </section>  <section class="uix-spacing--s"> <div class="container"> <div class="row"> <div class="col-12"> <a class="uix-lightbox__trigger" href="#" data-lb-src="assets/images/demo/spiral-galaxy-1920x1080.jpg"><i class="fa fa-search-plus" aria-hidden="true"></i> Click Me To Show Image</a> <br> <a class="uix-lightbox__trigger" href="#" data-lb-src="[{'thumb':'assets/images/demo/slide-1.jpg', 'large':'assets/images/demo/slide-1.jpg'}, {'thumb':'assets/images/demo/spiral-galaxy-1920x1080.jpg', 'large':'assets/images/demo/spiral-galaxy-1920x1080.jpg'}, {'thumb':'assets/images/demo/slide-3.jpg', 'large':'assets/images/demo/slide-3.jpg'}, {'thumb':'assets/images/demo/slide-1.jpg', 'large':'assets/images/demo/slide-1.jpg'}]"><i class="fa fa-search-plus" aria-hidden="true"></i> Click Me To Show Multiple Image</a> <br> <a class="uix-lightbox__trigger" href="#" data-lb-src="assets/images/placeholder/800x2000.jpg" data-lb-fixed="false"><i class="fa fa-search-plus" aria-hidden="true"></i> Click Me To Show Image (Not Fixed)</a> <br> </div> </div>  </div>  </section>  <section class="uix-spacing--s uix-spacing--no-bottom"> <div class="container"> <div class="row"> <div class="col-12"> <h3>Lightbox(Display HTML Code)</h3> <p>Use the following HTML code to display html code.</p> <pre class="uix-precode uix-t-l"><label>HTML</label><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></code> </pre> <pre class="uix-precode uix-t-l"><label>HTML</label><code><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">  ...  </div> </div> </div>  </template></code> </pre> <hr> </div> </div>  </div>  </section>  <section class="uix-spacing--s"> <div class="container"> <div class="row"> <div class="col-12"> <a class="uix-lightbox__trigger" href="#" data-lb-html="#my-lightbox-html-1"><i class="fa fa-search-plus" aria-hidden="true"></i> Click Me To Show HTML Code</a> <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">  <p> <h5>Title 1</h5> </p> <p>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. <a href="#">This is link</a></p> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. <a href="#">Curabitur blandit tempus porttitor</a>. 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</p>  </div> </div> </div> </template> <br>     <a class="uix-lightbox__trigger" href="#" data-lb-html="#my-lightbox-html-2" data-lb-fixed="false"><i class="fa fa-search-plus" aria-hidden="true"></i> Click Me To Show HTML Code (Not Fixed)</a> <template id="my-lightbox-html-2"> <div class="uix-lightbox__content-container" role="dialog" tabindex="-1" aria-hidden="true"> <div class="uix-lightbox__content" role="document"> <div role="note">  <p> <h5>Title 2</h5> </p> <p>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. <a href="#">This is link</a></p> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. <a href="#">Curabitur blandit tempus porttitor</a>. 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</p>  </div> </div> </div> </template> </div> </div>  </div>  </section>  <section class="uix-spacing--s uix-spacing--no-bottom"> <div class="container"> <div class="row"> <div class="col-12"> <h3>Lightbox(With AJAX)</h3> <p>Use the following HTML code with AJAX.</p> <pre class="uix-precode uix-t-l"><label>HTML</label><code><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></code> </pre> <pre class="uix-precode uix-t-l"><label>HTML</label><code><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> </div> </div>  </template></code> </pre> <hr> </div> </div>  </div>  </section>  <section class="uix-spacing--s"> <div class="container"> <div class="row"> <div class="col-12"> <a class="uix-lightbox__trigger" href="button.html" data-lb-html="#my-lightbox-html-4" data-lb-fixed="false" data-lb-ajax='{"target":"#my-ajax-demo-target-button", "method":"GET"}'><i class="fa fa-search-plus" aria-hidden="true"></i> Click Me To Add <strong>"button.html"</strong> Elements</a> <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> </div> </div> </template> </div> </div>  </div>  </section> </main> @@include('./src/components/_global/include-copyright.html') </div>  @@include('./src/components/_global/include-footer.html')