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 Multimedia Gallery is a flexible and responsive multimedia gallery, that allows to create galleries of multimedia content. Built with the latest Javascript and CSS techniques it offers advanced features to showcase your media.

Revolution Multimedia Gallery 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.


Include required files

In the download files you will find the java folder that contains the gallery 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 the gallery is used.

Include the gallery CSS file and JavaScript in the header:

<head>
<!-- ... -->
<script type="text/javascript" src="java/FWDRMG.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 gallery 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.

<script type="text/javascript">
	FWDRMGUtils.onReady(function(){
		new FWDRMG({	
			// General settings.
			instanceName:"rmg0",
			mainFolderPath:"content",
			parentId:"myDiv",
			galleryId:"my_gallery",
			//displayType:"fluidwidth",
			//randomizeGalleries:true,
			//showAllGalleries:true,
			//allGalleriesLabel:"All galleries",
			//startAtGallery:1,
			//startAtItem:0,
			//zIndex:1,
			//maxWidth:1200,
			//maxHeight:750,
			//minHeight:501,
			//autoScale:true,
			//rightClickContextMenu:"developer",
			//useDeepLinking:true,
			//useVectorIcons:false,
			//buttonsAlignment:"in",
			//mediaLazyLoading:true,
			//useDrag:true,
			//showSlideShowButton:true,
			//showSlideShowAnimation:true,
			//slideShowAutoPlay:false,
			//slideShowAutoStop:false,
			//slideShowDelay:6,
			//slideShowBkColor:"#2e2e2e",
			//slideShowFillColor:"#FFFFFF",
			//useKeyboard:true,
			//useDoubleClick:true,
			//showMenuButton:true,
			//menuBackgroundColor:"#FFFFFF",
			//showFullscreenButton:true,
			//showZoomButton:true,
			//showCounter:true,
			//showNextAndPrevBtns:true,
			//hideButtonsOnDrag:true,
			//maxZoom:1,
			//buttonsHideDelay:5,
			//defaultItemWidth:1527,
			//defaultItemHeight:859,
			//itemOffsetHeight:37,
			//itemOffsetHeightButtonsTop:37,
			//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:0,
			//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:false,
			//nextVideoAutoPlay:false,
			//videoAutoPlayText:"Click to unmute",
			//showLogo:true,
			//logoPath:"content/evp/skin/logo.png",
			//logoLink:'https://webdesign-flash.ro',
			//showControllerWhenVideoIsStopped:false,
			//showDefaultControllerForVimeo:true,
			//showScrubberWhenControllerIsHidden:true,
			//showRewindButton:true,
			//showVolumeButton:true,
			//showTime:true,
			//timeColor:"#B9B9B9",
			//showChromecastButton:true,
			//showPlaybackRateButton:true,
			//showQualityButton:true,
			//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>

The content folder has to be uploaded on the server where you want to use the gallery, after this is done set the mainFolderPath to point to the path/URL of this folder, this can be relative ex:mainFolderPath:"content" or absolute ex:mainFolderPath:"https://your-site.com/files/content".

The last step is to create a div with an unique ID that will act as the parent/holder for the gallery and set the parentId option to point to the div id ex:parentId:"myDiv", this div can be added anywhere in your page.

<!-- Gallery parent/holder -->
<div id="myDiv"><div>

In the download files, there is a HTML file, start.html that can be used as a reference, here is a reference.


Setup galleries

In the download files there is a HTML file start.html that can be used as a reference.

A gallery is created by adding in the page inside the body tag a div with an unique id and is hidden by setting the display style to none, this div contains on or more ul tags with a specific attribute data-category-name that represents the gallery category.

Inside the ul tags li tags are added with specific attributes that represent the gallery items.

After the gallery is created and added in the page set the galleryId option to the gallery div id ex:galleryId:"my_gallery",.

FWDRMGUtils.onReady(function(){

	new FWDRMG({	
		// General settings.
		instanceName:"rmg0",
		mainFolderPath:"content",
		parentId:"myDiv",
		galleryId:"my_gallery",
		etc ...
	});
});

The markup for the gallery is showed bellow.

Plase note that you can add as many galleries as you want.

Attributes

  • data-src  -  media item URL for all tags, the media type is set automatically.
  • 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.

Markup example

<!-- Galleries -->
<div id="my_gallery" style="display:none;">

	<!-- Mixed Gallery -->
	<ul data-category-name="Mixed gallery">

		<!-- Image (.jpg, .jpeg, .webp, .png, .bmp, .gif, .tif, .tiff, .jfi, .jfif, .exif, .svg) -->
		<li data-src="media/images/2.jpg" data-thumb="media/thumbnails/2.jpg">
			<p class="fwdrmg-title">What I Would Not Do</p>
			<p class="fwdrmg-desc">See and be seen at these stunning natural wonders, <a href="https://webdesign-flash.ro" target="_blank">know how</a> to listen.</p>
		</li>

		<!-- Image (.jpg, .jpeg, .webp, .png, .bmp, .gif, .tif, .tiff, .jfi, .jfif, .exif, .svg) -->
		<li data-src="media/images/3.jpg" data-thumb="media/thumbnails/3.jpg">
			<p class="fwdrmg-title">It's Meal Time</p>
			<p class="fwdrmg-desc">Dogs do speak, but only to those who <a href="https://webdesign-flash.ro" target="_blank">know how</a> to listen.</p>
		</li>

	</ul>

	<!-- Audio/Video gallery -->
	<ul data-category-name="Audio & video gallery">

		<!-- Audio .mp3 -->
		<li data-src="media/audio/audio1.mp3" data-thumb="media/thumbnails/mp3.jpg" data-poster="media/images/mp3.jpg">
			<p class="fwdrmg-title">MP3 Self Hosted Or External Hosted</p>
			<p class="fwdrmg-desc">Revolution Ligtbox has included <a href="https://webdesign-flash.ro/p/evp" target="_blank">Easy Video Player</a> with amazing features.</p>
		</li>

		<!-- Video .mp4 -->
		<li data-src="media/videos/girls.mp4" data-thumb="media/thumbnails/mp4.jpg" data-poster="media/images/mp4.jpg">
			<p class="fwdrmg-title">MP4 Self Hosted Or External Hosted</p>
			<p class="fwdrmg-desc">Revolution Ligtbox has included <a href="https://webdesign-flash.ro/p/evp" target="_blank">Easy Video Player</a> with amazing features.</p>
		</li>

		<!-- Video .mp4 -->
		<li data-src="media/videos/girls.mp4" data-thumb="media/thumbnails/cast.jpg" data-poster="media/images/cast.jpg">
			<p class="fwdrmg-title">Google Chromecast</p>
			<p class="fwdrmg-desc">Google Chromecast support, click the <a href="https://webdesign-flash.ro/p/evp" target="_blank">Chormecast</a> button and connect to your casted device.</p>
		</li>

		<!-- Video password protected -->
		<li data-src="media/videos/girls.mp4" data-thumb="media/thumbnails/pass.jpg" data-poster="media/images/pass.jpg" data-password="dd1d878544e988bb644756ca5e0ba56b">
			<p class="fwdrmg-title">Private videos</p>
			<p class="fwdrmg-desc">Private/password protected videos, all <a href="https://webdesign-flash.ro/p/evp" target="_blank">formats are supported</a>, test password is <strong>Meli</strong>.</p>
		</li>

		<!-- Video subtitle -->
		<li data-src="media/videos/earth.mp4" data-thumb="media/thumbnails/subtitle.jpg" data-poster="media/images/subtitle.jpg" data-subtitle="media/subtitles/english_subtitle.txt">
			<p class="fwdrmg-title">Subtitles Support</p>
			<p class="fwdrmg-desc">Revolution Ligtbox has included <a href="https://webdesign-flash.ro/p/evp" target="_blank">Easy Video Player</a> with amazing features.</p>
		</li>

		<!-- Video with thumbnails preview -->
		<li data-src="media/videos/travel.mp4" data-thumb="media/thumbnails/thumb-preview.jpg" data-poster="media/images/thumb-preview.jpg" data-thumbnails-preview="auto">
			<p class="fwdrmg-title">Thumbnails Preview</p>
			<p class="fwdrmg-desc">Thumbnails live preview or generated from a .vtt file, <a href="https://webdesign-flash.ro/p/evp" target="_blank">Easy Video Player</a>.</p>
		</li>

		<!-- HLS/HTTP Live Streaming -->
		<li data-src="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8" data-thumb="media/thumbnails/hls.jpg" data-poster="media/images/hls.jpg">
			<p class="fwdrmg-title">HLS/HTTP Live Streaming & DASH MEPG</p>
			<p class="fwdrmg-desc">Support for the HLS/HTTP Live Streaming and DASH MPEG formats, <a href="https://webdesign-flash.ro/p/evp" target="_blank">Easy Video Player</a>.</p>
		</li>

		<!-- Google drive -->
		<li data-src="https://www.googleapis.com/drive/v3/files/1CaDKmLq_Ta_IEPUq7XK7oy7uTppQ2uLj?alt=media&key=AIzaSyCpMiFIS8G-1XrZmYXe9crmqhRM7sWC5js&v=.mp4" data-thumb="media/thumbnails/GD.jpg" data-poster="media/images/GD.jpg">
			<p class="fwdrmg-title">Google Drive And Other Cloud Storage</p>
			<p class="fwdrmg-desc">Google Drive, Dropbox, and pretty much all cloud storage platforms, <a href="https://webdesign-flash.ro/p/evp" target="_blank">Easy Video Player</a>.</p>
		</li>

		<!-- Vimeo -->
		<li data-src="https://vimeo.com/channels/top/62092214" data-thumb="media/thumbnails/vimeo.jpg" data-poster="media/images/vimeo.jpg">
			<p class="fwdrmg-title">Vimeo & Vimeo Pro</p>
			<p class="fwdrmg-desc">Vimeo & Vimeo Pro support, <a href="https://webdesign-flash.ro/p/evp" target="_blank">Easy Video Player</a>.</p>
		</li>

		<!-- Youtube -->
		<li data-src="https://www.youtube.com/watch?v=IDZTCLNOfqU" data-thumb="media/thumbnails/youtube.jpg" data-poster="media/images/youtube.jpg">
			<p class="fwdrmg-title">Youtube</p>
			<p class="fwdrmg-desc">Youtube support, <a href="https://webdesign-flash.ro/p/evp" target="_blank">Easy Video Player</a>.</p>
		</li>

		<!-- VAST & VMAP -->
		<li data-src="media/videos/girls.mp4" data-thumb="media/thumbnails/vast.jpg" data-poster="media/images/vast.jpg" data-vast="media/vast/VMAP - Pre-roll Single Ad, Mid-roll Standard Pod with 3 ads, Post-roll Single (non linear between breaks) Ad.xml">
			<p class="fwdrmg-title">VAST & VMAP</p>
			<p class="fwdrmg-desc">VAST/Video Ad Serving Template & VMAP/Video Multiple Ad Playlist support, <a href="https://webdesign-flash.ro/p/evp" target="_blank">Easy Video Player</a>.</p>
		</li>

		<!-- Google Adsense & IMA SDK/Interactive Media Ads -->
		<li data-src="media/videos/girls.mp4" data-thumb="media/thumbnails/adsense.jpg" data-poster="media/images/adsense.jpg" data-vast="//googleads.g.doubleclick.net/pagead/ads?ad_type=video&client=ca-video-pub-4968145218643279&videoad_start_delay=0&description_url=http%3A%2F%2Fwww.google.com&max_ad_duration=40000&adtest=on">
			<p class="fwdrmg-title">Google Adsense & IMA SDK/Interactive Media Ads</p>
			<p class="fwdrmg-desc">Google Adsense & IMA SDK/Interactive Media Ads support, <a href="https://webdesign-flash.ro/p/evp" target="_blank">Easy Video Player</a>.</p>
		</li>

	</ul>

	<!-- Iframe/HTML gallery -->
	<ul data-category-name="Iframe & HTML gallery" style="display:none;">

		<!-- Google Maps -->
		<li data-src="https://www.google.com/maps/embed/v1/place?q=castelul%20hunedoara&key=AIzaSyDYlgLIneg_UOd8STBfJEgq2JgmT5nNJKU" data-thumb="media/thumbnails/maps.jpg">
			<p class="fwdrmg-title">Google Maps</p>
			<p class="fwdrmg-desc">Google maps support using <a href="https://webdesign-flash.ro/" target="_blank">Iframe</a> embed.</p>
		</li>

		<!-- Iframe -->
		<li data-src="https://www.wikipedia.org/" data-thumb="media/thumbnails/iframe1.jpg">
			<p class="fwdrmg-title">Iframe Support</p>
			<p class="fwdrmg-desc">Embed any HTML page using and Iframe, <a href="https://webdesign-flash.ro/" target="_blank">unlimited possibilities</a>.</p>
		</li>

		<!-- PDF -->
		<li data-src="media/sample.pdf" data-thumb="media/thumbnails/pdf.jpg">
			<p class="fwdrmg-title">PDF support</p>
			<p class="fwdrmg-desc">Easily display <a href="https://tanx.io/" target="_blank">.pdf format</a>.</p>
		</li>

		<!-- HTML content -->
		<li data-src="test" data-thumb="media/thumbnails/html.jpg" data-width="450" data-height="596">
		</li>
	</ul>
</div>

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

Options

Revolution Multimedia Gallery has many options that allows to customize it's features. They are added directly in the gallery constructor as it can be seen in the initialize section.

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

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

Example

FWDRMGUtils.onReady(function(){
	new FWDRMG({	
		// General settings.
		instanceName:"rmg0",
		mainFolderPath:"content",
		parentId:"myDiv",
		galleryId:"my_gallery",
		etc...
	});
});

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.

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.

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.

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.


Methods

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

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

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.


Events

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

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

FWDRMGUtils.onReady(function(){

	new FWDRMG({	
		// General settings.
		instanceName:"rmg0",
		mainFolderPath:"content",
		parentId:"myDiv",
		galleryId:"my_gallery",
		etc ...
	});

	rmg0.addListener(FWDRMG.SHOW_START, function(e){
		console.log('Show gallery start');
	});

	rmg0.addListener(FWDRMG.SHOW_COMPLETE, function(e){
		console.log('Show gallery complete');
	});
});

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.