Lightbox Demo

Some use cases demo for the Lightbox widget

top ↑Standalone Images Displaying

In similarity to the Lightbox 2 project, displaying of standalone images in the lightbox does not requires any javascript coding. All you need is to specify the rel="lightbox" attribute at the link. When page is loaded Lightbox will automatically find the links and perform all necessary initializations, grab the titles, etc.

<a href="1.jpg" rel="lightbox"><img src="1-thmb.jpg"></a>
<a href="2.jpg" rel="lightbox" title="Some title"><img src="2-thmb.jpg"></a>

top ↑Images Road Trip Displaying

If you want to display some collection of images as an album, without making the user to click each link, then you are specifying a slightly different attribute rel="lightbox[roadtrip]". All the other principles are the same

<a href="1.jpg" rel="lightbox[roadtrip]"><img src="1-thmb.jpg"></a>
<a href="2.jpg" rel="lightbox[roadtrip]"><img src="2-thmb.jpg"></a>

You can use the left and right arrow buttons on your keyboard or the mouse wheel scrolling to list through the images

top ↑Links to video-resources

Lightbox also supports links to the most common video streaming resources, with exactly the same format

<a href="youtube/bla/bla/bla" rel="lightbox">Funny video</a>

Youtube example | Google Video example | Vimeo example

top ↑HTML Content Displaying

To display any html content, strings, dom-nodes, node-lists, arrays of elements, etc. Just pass it to the show method

Lightbox.show($('lorem-block').html()).resize({width:'20em'});

Click me to show the text below in the lightbox

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

top ↑Content Loading Via Ajax

To load some content via an xhr request just pass its url address to the load method. You can also pass any standard Xhr class options as the second argument.

Lightbox.load('/ui/lightbox/lorem');

Try it right here

top ↑Links Automatic Processing

If you send a dom-node of a link into the show method, lightbox will automatically grab the link url address, load it via an ajax request and then show it in the lightbox with the same title the link has.

Lightbox.load($('some-link'));

Try it right here