instanceName* - required

Type: (String)

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

mainFolderPath* - required

Type: (String)

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

parentId * - required

Type: (String) | Default: ''

The gallery parent/holder element ID.

galleryId * - required

Type: (String) | Default: ''

The gallery element ID.

displayType *

Type: (String) | Default: 'responsive'

Gallery display type.

• responsive - displays the gallery in responsive type based on the maxWidth and maxHeight.
• fluidwidth - displays the gallery in fluidwidth type based on the maxWidth and maxHeight.
• fullscreen - displays the gallery in fullscreen, so that the width and height of the gallery are set to the browser viewport width and height.

randomizeGalleries *

Type: (Boolean) | Default: false

Randomize the galleries items order.

showAllGalleries *

Type: (Boolean) | Default: false

Creates a category/gallery that contains all categories/galleries items.

allGalleriesLabel *

Type: (String) | Default: 'All galleries'

The all galleries label.

startAtGallery *

Type: (Number) | Default: 0

The gallery that will be displayed first time the page is loaded, conting starts from 0.

startAtItem *

Type: (Number) | Default: 0

The gallery item that will be displayed first time the page is loaded, conting starts from 0.

zIndex *

Type: (Number) | Default: 1

The gallery z-index if the displayType is set to fluidwidth.

maxWidth *

Type: (Number) | Default: 1200

The gallery maximum width in px.

maxHeight *

Type: (Number) | Default: 750

The gallery maximum height in px.

minHeight *

Type: (Number) | Default: 501

The gallery minimum height in px.

autoScale *

Type: (Boolean) | Default: true

The gallery height will be keept at a correct ratio based on the maxWidth and maxHeight options.

rightClickContextMenu *

Type: (String) | Default: 'developer'

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 gallery 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 gallery gallery.

useDrag

Type: (Boolean) | Default: true

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

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 gallery will start the slideshow as soon as the first media item is showed.

slideShowAutoStop

Type: (Boolean) | Default: false

The gallery 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 gallery, 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 gallery item if it's an image.

showMenuButton

Type: (Boolean) | Default: true

Show the menu button.

menuBackgroundColor

Type: (Boolean) | Default: "#FFFFFF"

The menu background HEX color.

showFullscreenButton

Type: (Boolean) | Default: true

Show the gallery fullscreen button.

showZoomButton

Type: (Boolean) | Default: true

Show the zoom button if the gallery 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 gallery 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 gallery items when buttonsAlignment is in or out.

itemOffsetHeightButtonsTop

Type: (Number) | Default: 47

Offset/gap in px for the gallery 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 gallery 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 and menu window background RGBA color.

shareBackgroundColor

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

Small share window background hex color.

showThumbnails

Type: (Boolean) | Default: 'true'

Show the gallery 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 gallery thumbnails play icon for the video types.

thumbnailsHeight

Type: (Number) | Default: 80

Show the gallery 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 gallery 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 gallery height is smaller than 220px.

animateCaption

Type: (Boolean) | Default: false

Animate the caption every time the gallery item is changed.

useVideo*

Type: (Boolean) | Default: true

Animate the caption every time the gallery 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 gallery is opened.

nextVideoAutoPlay

Type: (Boolean) | Default: false

Video/audio autoplay for the next or previous item, when the gallery 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.

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 background 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, 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.

gotoNextItem

.gotoNextItem()

Navigate to the next item.

gotoPrevItem

.gotoPrevItem()

Navigate to the previous item.

goFullScreen

.goFullScreen()

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

goNormalScreen

.goNormalScreen()

Set the gallery in normalscreen.

FWDRMG.SHOW_START

FWDRMG.SHOW_START

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

Parameters

• guId (String) - gallery ID (counting starts from 0).
• mId (Number) - gallery media item id (counting starts from 0).

rmg0.addListener(FWDRMG.SHOW_START, function(e){
	console.log(e.guId + ' ' + e.mId);

	// Example of changing options.
	if(e.guId == 0){
		rmg0.slideShowAutoPlay = true;
		rmg0.useDrag = false;
		// etc.
	}
});

FWDRMG.SHOW_COMPLETE

FWDRMG.SHOW_COMPLETE

Event dispatched when the gallery is completely showed.

Parameters

• guId (String) - gallery ID (counting starts from 0).
• mId (Number) - gallery media item id (counting starts from 0).

rmg0.addListener(FWDRMG.SHOW_COMPLETE, function(e){
	console.log(e.guId + ' ' + e.mId);
});

FWDRMG.HIDE_START

FWDRMG.HIDE_START

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

Parameters

• guId (String) - gallery ID (counting starts from 0).
• mId (Number) - gallery media item id (counting starts from 0).

rmg0.addListener(FWDRMG.HIDE_START, function(e){
	console.log(e.guId + ' ' + e.mId);
});

FWDRMG.HIDE_COMPLETE

FWDRMG.HIDE_COMPLETE

Event dispatched when the gallery is completely hidden/closed.

Parameters

• guId (String) - gallery ID (counting starts from 0).
• mId (Number) - gallery media item id (counting starts from 0).

rmg0.addListener(FWDRMG.HIDE_COMPLETE, function(e){
	console.log(e.guId + ' ' + e.mId);
});

FWDRMG.UPDATE_ITEM

FWDRMG.UPDATE_ITEM

Event dispatched when the gallery is changed.

Parameters

• guId (String) - gallery ID (counting starts from 0).
• mId (Number) - gallery media item id (counting starts from 0).

rmg0.addListener(FWDRMG.UPDATE_ITEM, function(e){
	console.log(e.guId + ' ' + e.mId);
});

FWDRMG.ERROR

FWDRMG.ERROR

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

Parameters

• error (String) - error message.

rmg0.addListener(FWDRMG.ERROR, function(e){
	console.log(e.error);
});

FWDRMG.UPDATE_GALLERIES

FWDRMG.UPDATE_GALLERIES

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

Parameters

• galleries (Object) - the galleries media collection.

rmg0.addListener(FWDRMG.UPDATE_GALLERIES, function(e){
	console.log(e.galleries);
});

FWDRMG.EVP_STOP

FWDRMG.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).

rmg0.addListener(FWDRMG.EVP_STOP, function(e){
	console.log(e.guId + ' ' + e.mId);
});

Notes

I've been working on this gallery since 2014 and I will continue to improve it and add new features, during this time, I got very good at supporting Revolution Multimedia Gallery, 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.