JavaScript API

Documentation for the JavaScript API and the overall JavaScript implementation, all options, methods and events apply to the WordPress plugin as well

Getting Started

Revolution Lightbox is a flexible and responsive lightbox, that allows to create slideshow of multimedia content in a popup window. Built with techniques, and using the latest JavaScript and CSS thechniques it offers advanced features to showcase your media.

Revolution Lightbox can display images (.jpg, .jpeg, .webp, .png, .bmp, .gif, .tif, .tiff, .jfi, .jfif, .exif, .svg), audio (.mp3, .acc), Shoutcast, Icecast, video (.mp4, .webm, .ogv), Google Drive, Dropbox or other cloud platforms, Youtube, Vimeo, HLS/HTTP Live Streaming m3u8, DASH MPEG, Google maps, PDF, HTML content, Iframe and more.

It has two ways in which it can be used... the static content type will automatically create the lightbox galleries and add the necessary events to the page elements related to a query selector and the dynamic content type allows creating one or more galleries using hidden HTML markup or JSON by clicking an element in the page at your choosing, video tutorial here.


Include required files

In the download files you will find the java folder that contains the lightbox JavaScript code and content folder that contains the css file and other important files like the video player skin and libraries, the content folder has to be uploaded on the server where revolution lightbox is used, video tutorial

Include the lightbox CSS file and JavaScript in the header:

<head>
<!-- ... -->
<script type="text/javascript" src="java/FWDRL.js"></script>
<link rel="stylesheet" type="text/css" href="content/global.css">
<!-- ... -->
</head>

Initialize

The initialization code has to be added ideally in the page header but you can add it anywere in the page after the inclusion of the lightbox JavaScript and CSS files. In the example below for simplicity, all options are present and the options that are not required and are optional are commented, feel free to remove the commented options that you don't need or uncomment the one(s) that you want to modify.

In the download files, there are two HTML files, static-content.html and dynamic-content.html that can be used as a reference, here is a video tutorial.

<script type="text/javascript">
	FWDRLUtils.onReady(function(){
		new FWDRL({	
			// General settings.
			instanceName:"rl0",
			mainFolderPath:"content",
			//mediaSelector:'.fwdrel',
			//rightClickContextMenu:"developer",
			//useDeepLinking:true,
			//useVectorIcons:false,
			//buttonsAlignment:"in",
			//mediaLazyLoading:true,
			//useDrag:true,
			//useAsModal:false,
			//showSlideShowButton:true,
			//showSlideShowAnimation:true,
			//slideShowAutoPlay:false,
			//slideShowAutoStop:false,
			//slideShowDelay:6,
			//slideShowBkColor:"#2e2e2e",
			//slideShowFillColor:"#FFFFFF",
			//useKeyboard:true,
			//useDoubleClick:true,
			//showCloseButton:true,
			//show360DegreeVideoVrButton:false,
			//rotationY360DegreeVideo:-90,
			//showAudioTracksButton:true,
			//showFullscreenButton:true,
			//showZoomButton:true,
			//showCounter:true,
			//showNextAndPrevBtns:true,
			//hideButtonsOnDrag:true,
			//maxZoom:1,
			//buttonsHideDelay:5,
			//defaultItemWidth:1527,
			//defaultItemHeight:859,
			//itemOffsetHeight:37,
			//itemOffsetHeightButtonsTop:47,
			//spaceBetweenBtns:8,
			//buttonsOffsetIn:10,
			//buttonsOffsetOut:10,
			//itemBorderSize:0,
			//itemBackgroundColor:"#212121",
			//itemBorderColor:"#FFFFFF",
			//preloaderBkColor:"#2e2e2e",
			//preloaderFillColor:"#FFFFFF",
			//backgroundColor:"rgba(0,0,0,.99)",
			// Share window.
			//shareButtons:['facebook', 'twitter', 'linkedin', 'tumblr', 'pinterest', 'reddit', 'buffer', 'digg','blogger'],
			//shareText:"Share on",
			//sharedURL:"deeplink",
			//shareMainBackgroundColor:"rgba(0,0,0,.4)",
			//shareBackgroundColor:"#FFFFFF",
			// Thumbnails.
			//showThumbnails:true,
			//showThumbnailsIcon:true,
			//thumbnailsHeight:80,
			//thumbnailsOverlayColor:"rgba(0,0,0,.4)",
			//thumbnailsBorderSize:2,
			//thumbnailsBorderColor:"#FFFFFF",
			//spaceBetweenThumbnailsAndItem:10,
			//thumbnailsOffsetBottom:10,
			//spaceBetweenThumbnails:5,
			// Caption.
			//caption:true,
			//captionPosition:"bottomout",
			//showCaptionOnSmallScreens:false,
			//animateCaption:false,
			//captionAnimationType:"motion",
			// Video & audio player.
			//useVideo:true,
			//fillEntireScreenWithPoster:true,
			//volume:1,
			//videoAutoPlay:true,
			//nextVideoAutoPlay:false,
			//videoAutoPlayText:"Click to unmute",
			//showLogo:true,
			//logoPath:"content/evp/skin/logo.png",
			//logoLink:'https://webdesign-flasssh.ro',
			//showControllerWhenVideoIsStopped:false,
			//showDefaultControllerForVimeo:true,
			//showScrubberWhenControllerIsHidden:true,
			//showRewindButton:true,
			//showVolumeButton:true,
			//showTime:true,
			//timeColor:"#B9B9B9",
			//showChromecastButton:true,
			//showPlaybackRateButton:true,
			//showQualityButton:true,
			//showAudioTracksButton:true,
			//show360DegreeVideoVrButton:false,
			//rotationY360DegreeVideo:-90,
			//showFullScreenButton:true,
			//showScrubberToolTipLabel:true,
			//youtubeQualityButtonNormalColor:"#B9B9B9",
			//youtubeQualityButtonSelectedColor:"#FFFFFF",
			//scrubbersToolTipLabelBackgroundColor:"#FFFFFF",
			//scrubbersToolTipLabelFontColor:"#5a5a5a",
			//audioVisualizerLinesColor:"#570AB8",
			//audioVisualizerCircleColor:"#b9b9b9",
			//thumbnailsPreviewWidth:196,
			//thumbnailsPreviewBackgroundColor:"#2e2e2e",
			//thumbnailsPreviewBorderColor:"#414141",
			//thumbnailsPreviewLabelBackgroundColor:"#414141",
			//thumbnailsPreviewLabelFontColor:"#CCCCCC",
			//skipToVideoText:"You can skip to video in: ",
			//skipToVideoButtonText:"Skip Ad"
		});
	});
</script>

Static content markup

In the download files there is a html file static-content.html that can be used as a reference, here is a video tutorial.

The static content markup will automatically create the lightbox galleries and add the necessary events to the page elements related to a query selector (a CSS class), it works with any kind of markup with the help of a mediaSelector option as query selector. By defult the mediaSelector is .fwdrel.

If an <a> tag is used to wrap your images/media, the media url will be automatically fetched from the href attribute.

If an <img> tag is used, the media url will be automatically fetched from the src attribute.

For all other tags the data-src is used to fetch the media url, please note if the data-src attribute is used it will override the <a> - href or <img> - src attributes.

Revolution Lightbox can open one or more galleries. The gallery name is specified by using a data-rel attribute, if a data-rel attribute is not specified, it will open single item with an unique gallery ID name.

The gallery(s) items information like the title, thumbnails, etc, is fetched using HTML5 data attributes, and the content type (image, video, Iframe, etc) is detected automatically.

Attributes

  • src  -  media item URL/path for <img> tags only if the data-src attribute is empty.
  • href  -  media item URL/path for <a> tags if the data-src attribute is empty.
  • data-src  -  media item URL for all tags, the data-src attribute will overwrite the <img> tag src attribute and <a> tag href attribute.
  • data-is-360 - add this attribute if you want the video to be 360 degree video, please note this attribute is not for Youtube or Vimeo.
  • title  -  media item title if the data-title attribute is empty.
  • data-title  -  media item title, this attribute will overwrite the title attribute.
  • alt  -  media item description if the data-alt attribute is empty.
  • data-alt  -  media item description, this attribute will overwrite the alt attribute.
  • data-rel  -  gallery name, allows to group media items in one or more galleries, if not used all media items will open as a single lightbox item.
  • data-width  -  media item max width for Iframes, HTML content and video.
  • data-height  -  media item max height for Iframes, HTML content and video.
  • data-thumb  -  media thumbnail URL (.jpg or .png), all items must have this attribute to use thumbnails.
  • data-poster  -  media item video/audio poster URL (.jpg or .png), this applies to all Youtube and Vimeo as well.
  • data-password  -  media item video/audio passowrd, use this tool to create an MD5 encrypted password.
  • data-subtitle  -  media item video/audio subtitle (.txt, .vtt. .srt) supported, example file.
  • data-thumbnails-preview  -  media item video/audio thumbnails preview, for automatic live generated thumbnails set this option to auto, .vtt file is also supported example file.
  • data-vast  -  media item video/audio VAST, VMAP or Google IMA SDK URL.

A tag markup example

<!-- Single item/image (.jpg, .jpeg, .webp, .png, .bmp, .gif, .tif, .tiff, .jfi, .jfif, .exif, .svg) -->
<a class="fwdrel" href="image1.jpg" data-title="Item title 1" data-alt="Item description 1.">
	<img width="251" height="167" src="thumbnail1.jpg">
</a>

<!-- Image (.jpg, .jpeg, .webp, .png, .bmp, .gif, .tif, .tiff, .jfi, .jfif, .exif, .svg) -->
<a class="fwdrel" href="image1.jpg" data-title="Item title 2" data-alt="Item description 2." data-rel="my-gallery">
	<img width="251" height="167" src="thumbnail2.jpg">
</a>

<!-- Video & audio (.mp4, mp3, .m3u8, .mpd, Google Drive, Shoutcast, Icecast) -->
<a class="fwdrel" href="video.mp4" data-title="Item title 3" data-alt="Item description 3." data-poster="poster.jpg" data-rel="my-gallery">
	<img width="251" height="167" src="thumbnail3.jpg">
</a>

<!-- Video 360 degree (.mp4, mp3, .m3u8, .mpd, Google Drive) -->
<a class="fwdrel" data-is-360="" href="video.mp4" data-title="Item title 3" data-alt="Item description 3." data-poster="poster.jpg" data-rel="my-gallery">
	<img width="251" height="167" src="thumbnail3.jpg">
</a>

<!-- Youtube (Youtube video URL) with subtitle -->
<a class="fwdrel" href="https://www.youtube.com/watch?v=qLJ7744azWo" data-title="Item title 4" data-alt="Item description 4." data-poster="poster.jpg" data-subtitle="subtitle.srt" data-rel="my-gallery">
	<img width="251" height="167" src="thumbnail4.jpg">
</a>

<!-- Vimeo (Vimeo video URL) with password -->
<a class="fwdrel" href="https://vimeo.com/307791576" data-title="Item title 5" data-alt="Item description 5." data-poster="poster.jpg" data-password="88e2d8cd1e92fd5544c8621508cd706b" data-rel="my-gallery">
	<img width="251" height="167" src="thumbnail5.jpg">
</a>

<!-- Iframe -->
<a class="fwdrel" href="https://www.google.com/maps/embed/" data-title="Item title 6" data-alt="Item description 6." data-rel="my-gallery">
	<img width="251" height="167" src="thumbnail6.jpg">
</a>

<!-- HTML content -->
<a class="fwdrel" href="#test" data-title="Item title 7" data-alt="Item description 7." data-width="450" data-height="596" data-rel="my-gallery">
	<img width="251" height="167" src="thumbnail7.jpg">
</a>

<!-- HTML div for the HTML content -->
<div id="test">
	<div>HTML content</div>
<div>

Custom markup example

<!-- Single item/image (.jpg, .jpeg, .webp, .png, .bmp, .gif, .tif, .tiff, .jfi, .jfif, .exif, .svg) -->
<div class="fwdrel" data-src="image1.jpg" data-title="Item title 1" data-alt="Item description 1."></div>

<!-- Image (.jpg, .jpeg, .webp, .png, .bmp, .gif, .tif, .tiff, .jfi, .jfif, .exif, .svg) -->
<div class="fwdrel" data-src="image1.jpg" data-title="Item title 2" data-alt="Item description 2." data-rel="my-gallery"></div>

<!-- Video & audio (.mp4, mp3, .m3u8, .mpd, Google Drive, Shoutcast, Icecast) -->
<div class="fwdrel" data-src="video.mp4" data-title="Item title 3" data-alt="Item description 3." data-poster="poster.jpg" data-rel="my-gallery"></div>

<!-- Video 360 degree (.mp4, mp3, .m3u8, .mpd, Google Drive) -->
<div class="fwdrel" data-is-360="" data-src="video.mp4" data-title="Item title 3" data-alt="Item description 3." data-poster="poster.jpg" data-rel="my-gallery"></div>

<!-- Youtube (Youtube video URL) with subtitle -->
<div class="fwdrel" data-src="https://www.youtube.com/watch?v=qLJ7744azWo" data-title="Item title 4" data-alt="Item description 4." data-poster="poster.jpg" data-subtitle="subtitle.srt" data-rel="my-gallery"></div>

<!-- Vimeo (Vimeo video URL) with password -->
<div class="fwdrel" data-src="https://vimeo.com/307791576" data-title="Item title 5" data-alt="Item description 5." data-poster="poster.jpg" data-password="88e2d8cd1e92fd5544c8621508cd706b" data-rel="my-gallery"></div>

<!-- Iframe -->
<div class="fwdrel" data-src="https://www.google.com/maps/embed/" data-title="Item title 6" data-alt="Item description 6." data-rel="my-gallery"></div>

<!-- HTML content -->
<div class="fwdrel" data-src="#test" data-title="Item title 7" data-alt="Item description 7." data-width="450" data-height="596" data-rel="my-gallery"></div>

<!-- HTML div for the HTML content -->
<div id="test">
	<div>HTML content</div>
<div>

Dynamic content markup

In the download files there is a html file dynamic-content.html that can be used as a reference, here is a video tutorial.

The dynamic content markup allows to create galleries from hidden HTML markup or JSON, this feature can display unlimited galleries by clicking an HTML element (img, div, a, etc) in the page at your choosing.

The gallery name is specified by using an ID attribte for the HTML markup or a var name for the JSON attribute.

The gallery(s) is opened by calling the Revolution Lightox show method when an HTML element is clicked, for example when an image is clicked.

Show gallery example

// Open gallery via event click.
myElement.addEventListener("click", function(){
	rl0.show('my-gallery', 0);
});

// Open gallery via event click and modify options.
myElement.addEventListener("click", function(){
	rl0.show('my-gallery', 0, 'props_obj');
});

// Object used to update the lightbox options when opened.
var props_obj = {
	showThumbnails: false,
	showSlideShowButton: false,
	showCounter: false,
	useDrag: false,
	showNextAndPrevBtns: false,
	//etc...
}

HTML markup attributes

  • data-src  -  media item URL.
  • data-is-360  -  add this if you want the video to be 360 degree (.mp4, mp3, .m3u8, .mpd, Google Drive).
  • data-width  -  media item max width for Iframes, HTML content and video.
  • data-height  -  media item max height for Iframes, HTML content and video.
  • data-thumb  -  media thumbnail URL (.jpg or .png), all items must have this attribute to use thumbnails.
  • data-poster  -  media item video/audio poster URL (.jpg or .png), this applies to all Youtube and Vimeo as well.
  • data-password  -  media item video/audio passowrd, use this tool to create an MD5 encrypted password.
  • data-subtitle  -  media item video/audio subtitle (.txt, .vtt. .srt) supported, example file.
  • data-thumbnails-preview  -  media item video/audio thumbnails preview, for automatic live generated thumbnails set this option to auto, .vtt file is also supported example file.
  • data-vast  -  media item video/audio VAST, VMAP or Google IMA SDK URL.

Dynamic HTML markup example

<ul id="my-gallery" style="display:none;">

	<!-- Image (.jpg, .jpeg, .webp, .png, .bmp, .gif, .tif, .tiff, .jfi, .jfif, .exif, .svg) -->
	<li data-src="image1.jpg" data-thumb="thumbnail1.jpg">
		<p class="fwdrl-title">Item title 1</p>
		<p class="fwdrl-desc">"Item description 1.</p>
	</li>

	<!-- Video & audio (.mp4, mp3, .m3u8, .mpd, Google Drive, Shoutcast, Icecast) -->
	<li data-src="video.mp4" data-thumb="thumbnail2.jpg" data-poster="poster.jpg">
		<p class="fwdrl-title">Item title 3</p>
		<p class="fwdrl-desc">"Item description 3.</p>
	</li>

	<!-- Video 360 degree (.mp4, mp3, .m3u8, .mpd, Google Drive) -->
	<li data-src="video.mp4" data-is-360="" data-thumb="thumbnail2.jpg" data-poster="poster.jpg">
		<p class="fwdrl-title">Item title 3</p>
		<p class="fwdrl-desc">"Item description 3.</p>
	</li>

	<!-- Youtube (Youtube video URL) with subtitle -->
	<li data-src="https://www.youtube.com/watch?v=qLJ7744azWo" data-thumb="thumbnail3.jpg" data-poster="poster.jpg" data-subtitle="subtitle.srt">
		<p class="fwdrl-title">Item title 4</p>
		<p class="fwdrl-desc">"Item description 4.</p>
	</li>

	<!-- Vimeo (Vimeo video URL) with password -->
	<li data-src="https://vimeo.com/307791576" data-thumb="thumbnail4.jpg" data-poster="poster.jpg" data-password="88e2d8cd1e92fd5544c8621508cd706b">
		<p class="fwdrl-title">Item title 5</p>
		<p class="fwdrl-desc">"Item description 5.</p>
	</li>

	<!-- Iframe -->
	<li data-src="https://www.google.com/maps/embed/" data-thumb="thumbnail15.jpg">
		<p class="fwdrl-title">Item title 6</p>
		<p class="fwdrl-desc">"Item description 6.</p>
	</li>

	<!-- HTML content -->
	<li data-src="#test" data-width="450" data-height="596">
		<p class="fwdrl-title">Item title 7</p>
		<p class="fwdrl-desc">"Item description 7.</p>
	</li>
</div>

<!-- HTML div for the HTML content -->
<div id="test">
	<div>HTML content</div>
<div>

JSON properties

  • src  -  media item URL.
  • is360  -  set this to true if you want the video to be 360 degree (.mp4, mp3, .m3u8, .mpd, Google Drive)..
  • width  -  media item max width for Iframes, HTML content and video.
  • height  -  media item max height for Iframes, HTML content and video.
  • thumbSrc  -  media thumbnail URL (.jpg or .png), all items must have this attribute to use thumbnails.
  • posterSrc  -  media item video/audio poster URL (.jpg or .png), this applies to all Youtube and Vimeo as well.
  • password  -  media item video/audio passowrd, use this tool to create an MD5 encrypted password.
  • subtitleSrc  -  media item video/audio subtitle (.txt, .vtt. .srt) supported, example file.
  • thumbnailsPreviewSrc  -  media item video/audio thumbnails preview, for automatic live generated thumbnails set this option to auto, .vtt file is also supported example file.
  • vastSrc  -  media item video/audio VAST, VMAP or Google IMA SDK URL.

JSON example

var my-gallery = {
	playlistItems:[

	// Image (.jpg, .jpeg, .webp, .png, .bmp, .gif, .tif, .tiff, .jfi, .jfif, .exif, .svg).
	{
		src:"image1.jpg",
		thumbSrc:"thumbnails1.jpg",
		caption:"<p class='fwdrl-title'>Item title 1</p><p class='fwdrl-desc'>Item description 1.</p>"
	},

	// Video & audio (.mp4, mp3, .m3u8, .mpd, Google Drive, Shoutcast, Icecast).
	{
		src:"video.mp4",
		thumbSrc:"thumbnails2.jpg",
		posterSrc:"poster.jpg",
		caption:"<p class='fwdrl-title'>Item title 2</p><p class='fwdrl-desc'>Item description 2.</p>"
	},

	// Video 360 degree (.mp4, mp3, .m3u8, .mpd, Google Drive).
	{
		src:"video.mp4",
		is360:true,
		thumbSrc:"thumbnails2.jpg",
		posterSrc:"poster.jpg",
		caption:"<p class='fwdrl-title'>Item title 2</p><p class='fwdrl-desc'>Item description 2.</p>"
	},

	// Youtube (Youtube video URL) with subtitle.
	{
		src:"https://www.youtube.com/watch?v=qLJ7744azWo",
		thumbSrc:"thumbnails3.jpg",
		posterSrc:"poster.jpg",
		subtitleSrc:"subtitle.srt",
		caption:"<p class='fwdrl-title'>Item title 3</p><p class='fwdrl-desc'>Item description 3.</p>"
	},

	// Vimeo (Vimeo video URL) with password.
	{
		src:"https://vimeo.com/307791576",
		thumbSrc:"thumbnails4.jpg",
		posterSrc:"poster.jpg",
		password:"88e2d8cd1e92fd5544c8621508cd706b",
		caption:"<p class='fwdrl-title'>Item title 4</p><p class='fwdrl-desc'>Item description 4.</p>"
	},

	// Iframe.
	{
		src:"https://www.google.com/maps/embed/",
		thumbSrc:"thumbnails5.jpg",
		caption:"<p class='fwdrl-title'>Item title 5</p><p class='fwdrl-desc'>Item description 5.</p>"
	},

	// HTML content.
	{
		src:"#test",
		thumbSrc:"thumbnails6.jpg",
		caption:"<p class='fwdrl-title'>Item title 6</p><p class='fwdrl-desc'>Item description 6.</p>"
	}]
}

Options

Revolution Lightbox has many options that allows to customize it's features. They are added directly in the lightbox constructor as it can be seen in the initialize section. The instanceName is required and is used to call the API, also the mainFolderPath is required and it has to point with a relative (ex:content) or absolute (ex:https://your-page/lightbox/content) path to the lihgtbox "content" folder, this folder contains the lightbox skin, CSS, video library and more...

Some of the important options can be modified at runtime after the lightbox is initilized using the API and an event, this is explained here.

The options that can't be modified have listed this *.

Example

FWDRLUtils.onReady(function(){
	new FWDRL({	
		// General settings.
		instanceName:"rl0",
		mainFolderPath:"content",
		etc ...
	});
});

instanceName*

Type: (String)

This option is required, the lightbox instance name, this is used to call the API. In the examples files the instance name is set to rl0.

mainFolderPath*

Type: (String)

This option is required, the relative path (ex:content) or absolute URL (ex:https://your-page/lightbox/content) for the lihgtbox "content" folder, this folder contains the lightbox skin, CSS, video library and more...

mediaSelector *

Type: (String) | Default: '.fwdrel'

The css class(s) used as the query media selector for the static content type. This supports multiple classes as well, for example .my-lightbox, my-grid, etc...

rightClickContextMenu

Type: (String) | Default: 'developer / default / disabled'

Behaviour for the right click context menu.

  • developer - shows a message made by FWD, if you want to support us pease leave this option set to developer.
  • disabled - nothing happens whne the mouse is right clicked.
  • default - default browser behaviour.

useDeepLinking

Type: (Boolean) | Default: true

Unique and shareable link and history entry for the current media item.

useVectorIcons*

Type: (Boolean) | Default: false

Enable or disable the vector skin. Visually the vector skin looks the same as the .png skin, this is a video tutorial about how to work and customize the grhapics/.png and vector skin.

buttonsAlignment

Type: (String) | Default: 'in'

The buttons position. Allowed valuse in, out, top

  • in - the buttons are positioned close on the left and right side of the lightbox media item.
  • out - the buttons are positioned on the browser's left and right sides.
  • top - the buttons are positioned at the browser top side.

mediaLazyLoading

Type: (Boolean) | Default: true

Load the images and video posters in the background this way the user does not have to wait to load an image or a poster while navigating the lightbox gallery.

useDrag

Type: (Boolean) | Default: true

Drag the lightbox media item to navigate to the next or previous slide.

useAsModal

Type: (Boolean) | Default: true

Close the lightbox only if the close button is used.

showSlideShowButton

Type: (Boolean) | Default: true

Show the slideshow play/pause button.

showSlideShowAnimation

Type: (Boolean) | Default: true

Show the slideshow circular animation.

slideShowAutoPlay

Type: (Boolean) | Default: false

The lightbox will start the slideshow as soon as the first media item is showed.

slideShowAutoStop

Type: (Boolean) | Default: false

The lightbox will stop the slideshow when the last media item is displayed.

slideShowDelay

Type: (Float) | Default: 6

Slideshow delay in seconds, floats are accepted as well for example 6.5 seconds.

slideShowBkColor

Type: (String) | Default: '#2e2e2e'

Slideshow circular animation background HEX color.

slideShowFillColor

Type: (String) | Default: '#FFFFFF'

Slideshow circular animation fill HEX color.

useKeyboard

Type: (Boolean) | Default: true

Add keyboard support. ESC: close lightbox, LEFT & RIGHT ARROWS: skip video 10 seconds forward or backward if video playing or change slides if the video is not playing, F: video fullscreen/normalscreen, UP & DOWN ARROWS: video volume up or volume down, M: video mute/unmute, SPACE: video play/pause.

useDoubleClick

Type: (Boolean) | Default: true

Use double click or double tap to maximize and minimize the lightbox item if it's an image.

showCloseButton

Type: (Boolean) | Default: true

Show the close button.

showFullscreenButton

Type: (Boolean) | Default: true

Show the lightbox fullscreen button.

showZoomButton

Type: (Boolean) | Default: true

Show the zoom button if the lightbox item it's an image.

showCounter

Type: (Boolean) | Default: true

Show the counter (item current number and total number of items).

showNextAndPrevBtns

Type: (Boolean) | Default: true

Show the next and previous item button.

hideButtonsOnDrag

Type: (Boolean) | Default: true

If buttonsAlignment is set to in and the mouse is down after a few seconds the buttons opacity is reduced.

maxZoom

Type: (Float) | Default: 1

The zoom factor for the lightbox item if is image and it is zoomed in. For example to zoom the image 150% set this option to 1.5.

buttonsHideDelay

Type: (Float) | Default: 5

Duration in seconds until the buttons will hide after several seconds of user inactivity.

defaultItemWidth

Type: (Number) | Default: 1527

The default item width in px if it is Iframe, video or HTML content. Please note this option can be overwritten individually for each item in the gallery markup.

defaultItemHeight

Type: (Number) | Default: 859

The default item height in px if it is Iframe, video or HTML content. Please note this option can be overwritten individually for each item in the gallery markup.

itemOffsetHeight

Type: (Number) | Default: 37

Offset/gap in px for the lightbox items when buttonsAlignment is in or out.

itemOffsetHeightButtonsTop

Type: (Number) | Default: 47

Offset/gap in px for the lightbox items when buttonsAlignment is top.

spaceBetweenBtns

Type: (Number) | Default: 8

Space/gap in px between buttons.

buttonsOffsetIn

Type: (Number) | Default: 10

Space/gap between the buttons and the lightbox item.

buttonsOffsetOut

Type: (Number) | Default: 10

Space/gap between the buttons and the and window left or right side.

itemBorderSize

Type: (Number) | Default: 10

Item border size in px.

itemBackgroundColor

Type: (String) | Default: '#212121'

Item background HEX color.

itemBorderColor

Type: (String) | Default: '#FFFFFF'

Item border HEX color.

preloaderBkColor

Type: (String) | Default: '#2e2e2e'

Preloader circular animation background HEX color.

preloaderFillColor

Type: (String) | Default: '#FFFFFF'

Preloader circular animation fill HEX color.

backgroundColor

Type: (String) | Default: 'rgba(0,0,0,.99)'

Main background RGBA color.

shareButtons

Type: (Array) | Default: ['facebook', 'twitter', 'linkedin', 'tumblr', 'pinterest', 'reddit', 'buffer', 'digg','blogger']

Share button and share buttons window. Set the order as you want and remove the ones that you don't need. If you don't want to use the share button leave this option empty shareButtons:[] or remove it completely.

shareText

Type: (String) | Default: 'Share on'

The share window text.

sharedURL

Type: (String) | Default: 'deeplink'

The URL used to share the media. Allowed values deeplink, page, media.

shareMainBackgroundColor

Type: (String) | Default: 'rgba(0,0,0,.4)'

Main share window background RGBA color.

shareBackgroundColor

Type: (String) | Default: '#FFFFFF'

Small share window background hex color.

showThumbnails

Type: (Boolean) | Default: 'true'

Show the lightbox thumbnails, please note that all items have to have a thumbnail otherwise this option will be automatically set to false.

showThumbnailsIcon

Type: (Boolean) | Default: 'true'

Show the lightbox thumbnails play icon for the video types.

thumbnailsHeight

Type: (Number) | Default: 80

The lightbox thumbnails height in px, the width is set automatically to keep a correct image ratio.

thumbnailsOverlayColor

Type: (String) | Default: 'rgba(0,0,0,.4)'

Thumbnails transparent overlay RGBA color.

thumbnailsBorderSize

Type: (Number) | Default: 2

Thumbnails border size in px.

thumbnailsBorderColor

Type: (String) | Default: '#FFFFFF'

Thumbnails border HEX color.

spaceBetweenThumbnailsAndItem

Type: (Number) | Default: 10

The space/gap in px between the thumbnails and the item.

thumbnailsOffsetBottom

Type: (Number) | Default: 10

The space/gap in px between thumbnails and the lightbox bottom part.

spaceBetweenThumbnails

Type: (Number) | Default: 5

The space/gap in px between thumbnails.

caption

Type: (Boolean) | Default: true

Show/hide the caption.

captionPosition

Type: (String) | Default: 'bottomout'

The caption position, allowed values bottomout, bottomin, top.

showCaptionOnSmallScreens

Type: (Boolean) | Default: false

Show caption on small screens if the lightbox height is smaller than 220px.

animateCaption

Type: (Boolean) | Default: false

Animate the caption every time the lightbox item is changed.

useVideo*

Type: (Boolean) | Default: true

Animate the caption every time the lightbox item is changed.

fillEntireScreenWithPoster*

Type: (Boolean) | Default: true

Fill the video screen poster to cover the entire video screen viewport.

volume

Type: (Float) | Default: 1

Video and audio start volume.

videoAutoPlay

Type: (Boolean) | Default: false

Video/audio autoplay only when the lightbox is opened.

nextVideoAutoPlay

Type: (Boolean) | Default: false

Video/audio autoplay for the next or previous item, when the lightbox item is changed.

videoAutoPlayText*

Type: (String) | Default: 'Click to unmute'

Video autoplay unmute button text. In some cases, the video can't autoplay with sound, for this case an unmute button will appear with the text set in this option.

Type: (Boolean) | Default: true

Show custom logo.

logoPath*

Type: (String) | Default: 'content/evp/skin/logo.png'

The logo URL/path. By default the logo.png file is in the video skin folder, you can just replace it with your own logo or use a custom relative or absolute URL/path.

Type: (String) | Default: ''

The logo URL to open when the logo is clicked, if you don't want this functionality leave this option blank logoLink:"" or remove it.

showControllerWhenVideoIsStopped*

Type: (Boolean) | Default: false

Show the video/audio controller (play, pause, scrubber, etc) when the video is stopped and not playing.

showDefaultControllerForVimeo*

Type: (Boolean) | Default: true

Use the default EVP controller (play, pause, scrubber, etc) for Vimeo videos.

showRewindButton*

Type: (Boolean) | Default: true

Show the rewind button.

showVolumeButton*

Type: (Boolean) | Default: true

Show the volume button.

showTime*

Type: (Boolean) | Default: true

Show the video/audio current and total time.

timeColor*

Type: (String) | Default: '#999999'

The video/audio current and total time HEX color.

showChromecastButton*

Type: (Boolean) | Default: true

Show the Chromecast button.

showPlaybackRateButton*

Type: (Boolean) | Default: true

Show the playback rate/speed button.

showQualityButton*

Type: (Boolean) | Default: true

Show the Youtube quality button.

showAudioTracksButton*

Type: (Boolean) | Default: true

Show the video player multiple audio tracks / language button, this will work for HLS files if it has multiple languages otherwise it will not appear even if set to true, this feature also works for the normal .mp4 videos but it is limited by browser support, the browser need support for audioTracks

show360DegreeVideoVrButton

Type: (Boolean) | Default: false

Show the video player VR 360 video button, please note that the video type has to be 360DegreeVideo, also it will only works on browsers that support WebXR.

rotationY360DegreeVideo*

Type: (Number) | Default: -90

The horizontal start angle in degree, adjust this to start the 360 video at the position that you want, by default -90 degree is what you want for a normal 460 video.

showFullScreenButton*

Type: (Boolean) | Default: true

Show the fullscreen button.

showScrubberToolTipLabel*

Type: (Boolean) | Default: true

Show the video and volume scrubbers tooltips.

youtubeQualityButtonNormalColor*

Type: (String) | Default: '#B9B9B9'

The Youtube quality button text normal color.

youtubeQualityButtonSelectedColor*

Type: (String) | Default: '#FFFFFF'

The Youtube quality button text selected color.

scrubbersToolTipLabelBackgroundColor*

Type: (String) | Default: '#FFFFFF'

Video and volume scrubbers tooltips background color.

scrubbersToolTipLabelFontColor*

Type: (String) | Default: '#5a5a5a'

Video and volume scrubbers tooltips font color.

audioVisualizerLinesColor*

Type: (String) | Default: '#570AB8'

Audio visualizer lines color.

audioVisualizerCircleColor*

Type: (String) | Default: '#b9b9b9'

Audio visualizer circle color.

thumbnailsPreviewWidth*

Type: (Number) | Default: 196

The thumbnails preview window width in px, the height is set automatically to keep a correct ratio.

thumbnailsPreviewBackgroundColor*

Type: (String) | Default: '#2e2e2e'

The thumbnails preview background color.

thumbnailsPreviewBorderColor*

Type: (String) | Default: '#414141'

The thumbnails preview border color.

thumbnailsPreviewLabelBackgroundColor*

Type: (String) | Default: '#414141'

The thumbnails preview label background color.

thumbnailsPreviewLabelFontColor*

Type: (String) | Default: '#CCCCCC'

The thumbnails preview label font color.

skipToVideoText*

Type: (String) | Default: 'You can skip to video in: '

Advertisement skip text.

skipToVideoButtonText*

Type: (String) | Default: 'Skip Ad'

Advertisement skip to video button text.


Methods

Methods are functions that can be called via the API to execute certain actions.

JavaScript methods look like rl0.methodName( /* arguments */ ), please note that rl0 is the lightbox instance name.

show

.show(gallery, index, props)

Open/show the lightbox based on the gallery argument and id.

  • gallery (String - required) - the gallery ID/name or JSON var name.
  • index (Number - required) - index of the media item to show on opening (the counting starts from 0).
  • props (String - optional) - an object with options that can change the certain option before the lightbox is opened.
// Open gallery via event click.
myElement.addEventListener("click", function(){
	rl0.show('my-gallery', 0);
});

// Open gallery via event click and modify options.
myElement.addEventListener("click", function(){
	rl0.show('my-gallery', 0, 'props_obj');
});

var props_obj = {
	showThumbnails: false,
	showSlideShowButton: false,
	showCounter: false,
	useDrag: false,
	showNextAndPrevBtns: false
}

<ul id="my-gallery" style="display:none;">

	<!-- Image (.jpg, .jpeg, .webp, .png, .bmp, .gif, .tif, .tiff, .jfi, .jfif, .exif, .svg) -->
	<li data-src="image1.jpg" data-thumb="thumbnail1.jpg">
		<p class="fwdrl-title">Item title 1</p>
		<p class="fwdrl-desc">"Item description 1.</p>
	</li>

	<!-- Video & audio (.mp4, mp3, .m3u8, .mpd, Google Drive, Shoutcast, Icecast) -->
	<li data-src="video.mp4" data-thumb="thumbnail2.jpg" data-poster="poster.jpg">
		<p class="fwdrl-title">Item title 3</p>
		<p class="fwdrl-desc">"Item description 3.</p>
	</li>

	<!-- ... -->
</ul>

hide

.hide()

Hide/close the lightbox.

gotoNextItem

.gotoNextItem()

Navigate to the next item.

gotoPrevItem

.gotoPrevItem()

Navigate to the previous item.

goFullScreen

.goFullScreen()

Calls the fullscreen native API to set the lightbox in fullscreen.

goNormalScreen

.goNormalScreen()

Set the lightbox in normalscreen.

updateGalleries

.updateGalleries()

Refresh and fetch all media galleries in the document. This method is useful if you have some elements that are added to the page/DOM after the lightbox is initialized. This method can be called any time you need it.


Events

Revolution Lightbox has many events, they are added via the addListener method add accessed via the instance name.

The events must be registered inside the FWDRLUtils.onReady method.

FWDRLUtils.onReady(function(){

	new FWDRL({	
		// General settings.
		instanceName:"rl0",
		mainFolderPath:"content",
		etc ...
	});

	rl0.addListener(FWDRL.SHOW_START, function(e){
		console.log('Show lightbox start');
	});

	rl0.addListener(FWDRL.SHOW_COMPLETE, function(e){
		console.log('Show lightbox complete');
	});
});

FWDRL.SHOW_START

FWDRL.SHOW_START

Event dispatched when the lightbox is starting to show, this is a good place where the options can be mofified based on the gallery guId parameter, video tutorial

Parameters

  • guId (String) - gallery name/ID.
  • mId (Number) - gallery media item id (counting starts from 0).
rl0.addListener(FWDRL.SHOW_START, function(e){
	console.log(e.guId + ' ' + e.mId);

	// Example of changing options.
	if(e.guId == 'my-gallery'){
		rl0.autoPlay = true;
		rl0.useDrag = false;
		// etc.
	}
});

FWDRL.SHOW_COMPLETE

FWDRL.SHOW_COMPLETE

Event dispatched when the lightbox is completely showed.

Parameters

  • guId (String) - gallery name/ID.
  • mId (Number) - gallery media item id (counting starts from 0).
rl0.addListener(FWDRL.SHOW_COMPLETE, function(e){
	console.log(e.guId + ' ' + e.mId);
});

FWDRL.HIDE_START

FWDRL.HIDE_START

Event dispatched when the lightbox is starting to hide/close.

Parameters

  • guId (String) - gallery name/ID.
  • mId (Number) - gallery media item id (counting starts from 0).
rl0.addListener(FWDRL.HIDE_START, function(e){
	console.log(e.guId + ' ' + e.mId);
});

FWDRL.HIDE_COMPLETE

FWDRL.HIDE_COMPLETE

Event dispatched when the lightbox is completely hidden/closed.

Parameters

  • guId (String) - gallery name/ID.
  • mId (Number) - gallery media item id (counting starts from 0).
rl0.addListener(FWDRL.HIDE_COMPLETE, function(e){
	console.log(e.guId + ' ' + e.mId);
});

FWDRL.START_TO_UPDATE_ITEM

FWDRL.START_TO_UPDATE_ITEM

Event dispatched when the lightbox item has changed and it is first showed before any settings or visual are initalized.

Parameters

  • guId (String) - gallery name/ID.
  • mId (Number) - gallery media item id (counting starts from 0).
rl0.addListener(FWDRL.START_TO_UPDATE_ITEM, function(e){
	console.log(e.guId + ' ' + e.mId);
});

FWDRL.UPDATE_ITEM

FWDRL.UPDATE_ITEM

Event dispatched when the lightbox is changed.

Parameters

  • guId (String) - gallery name/ID.
  • mId (Number) - gallery media item id (counting starts from 0).
rl0.addListener(FWDRL.UPDATE_ITEM, function(e){
	console.log(e.guId + ' ' + e.mId);
});

FWDRL.ERROR

FWDRL.ERROR

Event dispatched when the lightbox has an error, for example an media URL/path is not found.

Parameters

  • error (String) - error message.
rl0.addListener(FWDRL.ERROR, function(e){
	console.log(e.error);
});

FWDRL.UPDATE_GALLERIES

FWDRL.UPDATE_GALLERIES

Event dispatched when the lightbox has an error, for example an media URL/path is not found.

Parameters

  • galleries (Object) - the galleries media collection.
rl0.addListener(FWDRL.UPDATE_GALLERIES, function(e){
	console.log(e.galleries);
});

FWDRL.EVP_STOP

FWDRL.EVP_STOP

Event dispatched when the video or audio has finished playing.

Parameters

  • guId (String) - gallery name/ID.
  • mId (Number) - gallery media item id (counting starts from 0).
rl0.addListener(FWDRL.EVP_STOP, function(e){
	console.log(e.guId + ' ' + e.mId);
});

Notes

I've been working on this lightbox since 2014 and I will continue to improve it and add new features, during this time, I got very good at supporting Revolution Lightbox, understanding my clients, adding new features and fix bugs that are inevitable in this crazy WEB world.

For me this is more than a job, it is my passion, I love to create innovative tools that my clients can benefit from. @Tibi - FWD.

For support and customizations please write to me directly at this email.