WordPress Documentation

WordPress plugin documentation, all options, methods and events from the Javacript API section applies 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 vanilla JavaScript, and using the latest JavaScript and CSS techniques 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.

Revolution Lightbox is compatible with any WordPress theme and it has no dependencies.

Installation

After purchasing the plugin from CodeCanyon, inside the main zip file you will find installable plugin fwdrl.zip, video tutorial

Installation steps

  • 1. In your WordPress Admin Dashboard, go to Plugins > Add New.
  • 2. Upload the fwdrl.zip plugin file that you downloaded from CodeCanyon.
  • 3. Click on install now.
  • 4. If successful, click Activate Plugin to activate it, or Return to Plugin Installer.

Update

Uninstall and delete the current installed version, doing this will not remove any of the settings or galleries, install the new version by following the steps from the installation section above, and if you are using a cache plugin clear the browser cache with it to make sure the old files are not used.

Settings

The plugin settings are found in the plugin general settings tab, here the plugin options can be set.

Static content usage

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

To use the static content type just add the shortcode using the shortcode generator in your page, post or, custom post, this also works with any page builder like Elementor, WPBakery, etc. Ex: [fwdrl gallery="static"].

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 media selector option as query selector. By defult the media selector 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.
  • 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-is-360  -  add this tag 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, the password will be MD5 encoded automatically.
  • 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>

If your lightbox content is added after the lightbox is initalized, for example using a grid that is initalized on page scroll, to refresh and fetch again the media galleries in the document use the JavaScript API method updateGalleries.

// Call updateGalleries when your lightbox content is ready.
rl0.updateGalleries();

Dynamic content usage

The dynamic content markup allows to create galleries using the plugin galleries manager, this feature can display unlimited galleries by clicking an HTML element (img, div, a, etc) in the page at your choosing, video tutorial.

Create one or more galleries using the gallery manager.

Use the shortcode generator to get the shortcode with the gallery that you want to use, one or more shortcodes can be added with different galleries.

Add the shortcode in your page, post or, custom post, this also works with any page builder like Elementor, WPBakery, etc.

Ex: [fwdrl gallery="my-gallery"].

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

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


<!--  Open gallery using inline HTML (img, div, button, a, etc...) -->
<button onclick="rl0.show('my-gallery', 0);">Open my gallery</button>

If you want to use JSON please check the dynamic content markup in the JavaScript API section.

Update live options

Some of the important options can be udpated at run time just before the lightbox is opened using the API and the FWDRL.SHOW_START event. All options can be found in the JavaScript API section here, video tutorial.

<script>
	// Update gallery options.
	var registerAPIInterval;
	registerAPI();

	function registerAPI(){
		clearInterval(registerAPIInterval);
		if(!window['rl0']){
			registerAPIInterval = setInterval(registerAPI, 100);
		}else{
			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.
				}
			});
		}
	}
</script>

For the dynamic content it is possible to update the options by adding a third parameter as an options object, that contains options that are listed in the options settings in the JavaScript API.

// 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...
}

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.

© Copyright FWDesign. All Rights Reserved.