rlightbox – a jQuery UI mediabox

May 25, 2014 in Lightbox 4289 views

Download

Overview
Documents

User Rating: 0/5 ( 0 votes)

Your Rating:

rlightbox is a jQuery UI mediabox that can display many types of content such as images, YouTube and Vimeo videos. It has many unique features like Panorama and Live Re-size. Like other jQuery UI widgets, it is ThemeRoller ready.

Features

Sets

Set is a group of images, Youtube, Vimeo, or Flash swf videos, or a mix of them all. There may be many sets on a page and elements belonging to a set does not have to be put one after another in a container.

YouTube support

rlightbox supports playing YouTube videos. To add a YouTube video, use standard YouTube URL scheme likehttp://www.youtube.com/watch?v=PLtGMqvazzo. Short YouTube URLs are not supported. Additional parameters are not taken into account.

Vimeo support

rlightbox supports playing Vimeo videos. To add a video use either URL like this: http://vimeo.com/13763341 or this: http://vimeo.com/groups/polska/videos/3116167. Additional parameters are not taken into account.

Flash swf video support

rlightbox also supports playing standard swf videos.

Panorama

Panorama is a way to display part of a full-sized image on the screen. Since often an image is larger than the screen, it has to be scaled down. Panorama allows you to to see it in its native resolutions by panning, i.e. drag & drop.

Panorama mode is available when the icon with four arrows pops up at the top left corner of the widget. To turn it on, you can either click on the icon or use keyboard ([Z] key is default).

Live Re-size

rlightbox is able to adapt to browser size, and it is great for so-called responsive design. To see it in action, open the following image and re-size the browser window a few times.

ThemeRoller ready!

rlightbox is compatible with ThemeRoller!

Keyboard Navigation

Nearly no need to use your mouse! You can even customize keyboard keys to better suit you!

Nice error handling

When an error occurs, the user-friendly Error Screen appears to help you decide what to do! You can change/translate the message and the labels on the buttons.

Compatibility

Internet Explorer 7+
Firefox 3.0.19+
Chrome
Opera 10.00+
Safari 4.0.5+

Source: ryrych.github.io

1. INCLUDE JS AND CSS FILES

<script type="text/javascript" src="path/widget/lib/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="path/widget/lib/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="path/widget/lib/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="path/widget/lib/jquery.ui.rlightbox.min.js"></script>

<link type="text/css" rel="stylesheet" href="path/widget/css/ui-lightness/jquery-ui-1.8.16.custom.css" />
<link type="text/css" rel="stylesheet" href="path/widget/css/lightbox.min.css" />

2. HTML

<a href="flowers/tulip.jpg" title="a tulip" class="lb_flowers">a tulip</a>
<a href="flowers/rose.jpg" title="a rose" class="lb_flowers">a rose</a>
<a href="flowers/daisy.jpg"title="a daisy" class="lb_flowers">a daisy</a>

3. JAVASCRIPT

jQuery(function($) {
	$( ".lb_flowers" ).rlightbox({counterDelimiter: " of "});
});

4. OPTIONS

Option	Type	Default value	Description
againButtonLabel	string	"Try again"	Label on the left button in the error screen.
animationSpeed	string ["fast" \| "slow" \| "normal"] \| integer	"fast"	How fast rlightbox is to appear, re-size, etc. Values are normal values used in jQuery. Integer should be given in milliseconds.
counterDelimiter	string	" / "	Separates current content number in a set from the total number
errorMessage	string	"Oh dear! Something went wrong! If the problem still appears let the page’s admin know. Would you like to try again or reject the content?"	The message which appears when there is an error while loading content or when a URL is broken. Sometimes an error may appear unexpectedly and it depends on a browser.
keys	object {next: array, previous: array, close: array, panorama: array}	{next: [78, 39], previous: [80, 37], close: [67, 27], panorama: [90, null]}	Codes pointing to real keyboard keys. To determine which code is a key, use this page.
loop	boolean	false	Make navigation in a set continuous.
overwriteTitle	boolean	false	Overwrites original title taken from Vimeo or Youtube video when title attribute is provided.
rejectButtonLabel	string	"Reject this content"	Label on the right button in the error screen.
setPrefix	string	"lb"	What prefix followed by ‘_’ and a name use to group (make a set) content. To group 2 images, add a new class, e.g. ‘lb_flowers’ to both of them.
showMap	boolean	true	Indicate whether to show or not mini map in Panorama mode.
videoHeight	integer	385	Height of a video. It may denote maximumvalue.
videoWidth	integer	640	Width of a video. It may denote maximumvalue.

JS Tutorial

rlightbox – a jQuery UI mediabox

Features

Compatibility

Related Articles