Lightbox

Lightbox is the standard lightbox-popup feature for RightJS

Get the latest version right here

All the source code of the project is available under terms of the MIT license

http://github.com/rightjs/rightjs-ui/tree/master/src/lightbox/

For some standard usage examples see the demo page

Index

top ↑Features List

Right Lightbox has the following features

  • Can display any html content you need
  • Supports content loading via ajax
  • Supports links to video streams
  • Groups and collections support
  • Content auto initialization via the rel="lightbox" attribute
  • It has really tiny size of just 4k gzipped and doesn’t need any images
  • Everything is included in one single file

top ↑Usage Basics

The usage of Right Lightbox is really simple. Just grab the file above, include it on your page and you are good to go

<script src="/javascripts/right-lightbox.js" type="text/javascript"></script>

Right Lightbox does not require any images and all the styles are inlined inside the javascript file

top ↑API Reference

Right Lightbox has a really simple interface

MethodDescription
show(mixed content[, Object size])shows any given content
load(String url[, Object options])loads content via an ajax request
hide()hides the lightbox

You can use those methods to work with Lightbox as with a single class

Lightbox.show('some content');
Lightbox.load('/some/address');
Lightbox.hide();

Or you can have usual instances of the Lightbox class

var box = new Lightbox();
box.show('some content');
box.load('/some/url');
box.hide();

top ↑Links Automatic Processing

When you pass a link node into the show method, Lightbox will automatically grab its url address and title, then load the content referred by the link, show it and set the link’s title on the box.

// <a href="/some/url" title="Some Content" id="the-link">click me</a>

Lightbox.show($('the-link'));

Right Lightbox will automatically check the url address, if it is an image it will be shown as an image, if it’s a link to a video stream it will build an embedded video object. And at the bottom it will try to load the content via an Xhr request and show. You don’t need to do anything about it.

And you don’t need to do those things manually. In similarity to the Lightbox 2 project, you can set the attribute rel="lightbox" and Lightbox will automatically hook those links to be shown in the lightboxes.

Galleries with the rel="lightbox[roadtrip]" attributes work too

top ↑Video Streams

This Lightbox implementation supports links to video streams. Basically there is nothing special about the actual links and all of them will be processed the same way as any other links.

<a href="http:/www.youtube.com/watch?v=VAfnbIrQTSk"
rel="lightbox">Funny Youtube video</a>

Currently, Lightbox supports links to the following resources

  • YouTube
  • Google Video
  • Vimeo

top ↑Options List

There are several options when you are using Right Lightbox

NameDefaultDescription
endOpacity0.8the locker end opacity
fxDuration200the visual effects duration
hideOnEsctrueshould the lightbox be closed on the Esc button
hideOnOutClicktrueshould the lightbox be closed on click outside of the box
showCloseButtontrueshould the close button be available
groupnulla name of a group for galleries
cssRule“a[data-lightbox]”css-rule for automatically processable lightbox links
mediaWidth425video player width
mediaHeight350video player height

You can pass those options as a hash for the constructor, or change them globally at the Lightbox.Options object

var hard_box = new Lightbox({hideOnEsc: false, hideOnOutClick: false, showCloseButton: false});
hard_box.setTitle('Fill It Up');
hard_box.show('some required form');

top ↑Style Adjustments

If you need to alter the lightbox view to make it fit your design, please use the following elements structure description as a guidance.

<div class="rui-lightbox">
<div class="rui-lightbox-locker"></div>

<div class="rui-lightbox-dialog">
<div class="rui-lightbox-title"></div>

<div class="rui-lightbox-body">
<div class="rui-lightbox-body-inner">
<div class="rui-lightbox-body-locker">
<div class="rui-spinner"></div>
</div>
<div class="rui-lightbox-scroller">
<div class="rui-lightbox-content">
Your content in here
</div>
</div>
</div>
</div>

<div class="rui-lightbox-nav">
<div class="close">&times;</div>
<div class="prev">&larrow;</div>
<div class="next">&rarrow;</div>
</div>
</div>
</div>