LiteBox – A versatile and responsive lightbox

  • LiteBox
  • LiteBox-01
  • LiteBox-02
  • LiteBox-03
  • LiteBox-04
  • LiteBox-05

LiteBox is yet another lightbox plugin but still a little bit standing out from the others. It is fully responsive and it looks equally good on both mobile and desktop sizes. LiteBox is versatile, auto detecting content and can be used not only with images but also with videos such as YouTube, Vimeo, Daily Motion and Kickstarter. What’s more, you can use it with inline html and iframes.

Setting it up is very easy.
1. Start with linking the ‘litebox.css’, ‘images-loaded.js’ and ‘litebox.js’ files into your HTML document.
2. Simply place the link to the content in a hyperlinks href attribute, give it a class name which you will then use to call LiteBox.

Don’t struggle alone with projects

Join the creative community of UX, graphic and web designers and developers to get help with any design or dev project.

 <a href="001.jpg" target="_self" class="litebox"><img src="001-thumb.jpg" alt="Image 001" /></a>

If you want to include embedded content, you only need to the URL to the page, not the embed code they provide as the script will do the job and create the correct link so the video is displayed.

<a href="[token-id]" target="_self" class="litebox">YouTube</a>
<a href="[token-id]" target="_self" class="litebox">YouTube (Alt)</a>
<a href="[token-id]" target="_self" class="litebox">Vimeo</a>
<a href="[token-id]" target="_self" class="litebox">Daily Motion</a>
<a href="[token-id]/[token-name]/" target="_self" class="litebox">KickStarter</a>

When it comes to placing a website in an iframe, you just need to link to the page you want as you usually do with any other hyperlink.

<a href="" target="_self" class="litebox">Iframe</a>

To display some inline content, create the element somewhere on you page and make sure that you set the display to non, then create your element within and give it a unique id. Then place this id (with the hastag #) in the href value

<a href="#inline-html-1" target="_self" class="litebox">Inline HTML </a>
<div style="display: none;">
<div id="inline-html-1">
<h1 class="bm-large tm-large">Inline HTML Example</h1>
<p class="bm-large">In here you can pull any elements from the page to display in the Litebox</p>

As previously stated, LiteBox makes it easy to create a gallery/group of images/content. You can do this by adding the attribute data-litebox-group. It works with any type of content and you can have mixed content as well.

<a href="001.jpg" target="_self" class="litebox" data-litebox-group="group-1"><img src="001-thumb.jpg" alt="Image 001" /></a>
<a href="002.jpg" target="_self" class="litebox" data-litebox-group="group-1"><img src="002-thumb.jpg" alt="Image 002" /></a>
<a href="003.jpg" target="_self" class="litebox" data-litebox-group="group-1"><img src="003-thumb.jpg" alt="Image 003" /></a>
<a href="004.jpg" target="_self" class="litebox" data-litebox-group="group-1"><img src="004-thumb.jpg" alt="Image 004" /></a>
Options Default Description
revealSpeed 400 The fade in time of the lightbox
background ‘rgba(0, 0, 0, .8)’ Sets the background color of the dimmer that overlays the viewport.
overlayClose true When set to true, clicking the overlay will close the lightbox.
escKey true When set to true, pressing the Esc key will close the lightbox.
navKey true When set to true, pressing the Left or Right arrow keys will navigation through any grouped content in the lightbox
callbackInit function() {} Calls a JavaScript function when the lightbox is initiated.
callbackBeforeOpen function() {} Calls a JavaScript function before the lightbox is opened.
callbackAfterOpen function() {} Calls a JavaScript function after the lightbox is opened.
callbackBeforeClose function() {} Calls a JavaScript function before the lightbox is closed.
callbackAfterClose function() {} Calls a JavaScript function after the lightbox is closed.
callbackError function() {} Calls a JavaScript function when the lightbox encounters an error.
callbackPrev function() {} Calls a JavaScript function when the prev button of the lightbox is triggered.
callbackNext function() {} Calls a JavaScript function when the next button of the lightbox is triggered.
errorMessage ‘Error loading content.’ Sets the error message that is displayed upon the plugin encountering an error.
Related post:  Becoming a UX Designer is Actually a Great Idea

Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.