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.

showLogo*

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.

logoLink*

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.

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.

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.