Thank you for purchasing our script. If you have any questions that are beyond the scope of this help file, please feel free to email via our email. Thanks so much!
A) IMPORTANT NOTES - make sure you read this! - top
Please note that the UGP installation and configuration is not complicated but because it has a lot of customizable settings it might seem complicated, please go through the entire documentation before trying to install it into your own page. Basically what it must be done is to copy some html and js code from the examples we provided and paste it into your own html page and of course add your own content.
The server is character case sensitive so make sure that the UGP settings are identical to those from the provided examples.
To have the best possible visual grid and use your own custom size images they should be saved as follow, first set the thumbnailMaxWidth and thumbnailMaxHeight parameters to your desired thumbnails size, than save your image to this two values, this way you will have a sharp grid and it will load fast and perform well on all devices.
In the download files there is a start folder and in this folder there are example html files for each display type. You can use one of them to copy and paste the required html and js code based on the skin and display type that you need. In this tutorial we have used the in.html file.
Copy and paste the content folder, java folder and media folder into the same folder with your html file, they are self explanatory.
Open in.html with a text editor as reference.
The javascript and CSS files must be imported in the head section of your html.
A div is required into which UGP will be added as a child, so create a div and set an id for it, the id is important because it is passed in the UGP constructor, make sure it is unique. The UGP is responsive as follows, the width adapt based on the parent width and the height will be set based on the thubnails stack.
Next step is to set up the categories / galleries, to do this copy and paste the div element with the id myGallery into the body element, the id is passed to the UGP parameter galleryId:myGallery. For more info about how to create categories / galleries please read Setup galleries.
Next step is to initialize UGP with javascript, in the head section of your html page add the code from below. Please note that all parameters are described in the Constructor parameters section.
This is how UGP is installed in a HTML page, please read the Constructor parameters section, it will explain all settings in details.
Please open in.html with a text editor as reference. These parameters represents the possible setting of UGP, they are all described below.
MAIN SETTINGS.
rightClickContextMenu:"default" - this can be developer, default or disabled. We would appreciate it if you can leave this feature set to developer.
instanceName:"myUGP0" - represents the UGP instance name, this is used to access API methods, it must be unique and add if you use multiple instances in the same page add a different number at the end for example myUGP1, myUGP2, myUGP2.
parentId:"myDiv" - represents the div into which UGP will be added.
mainFolderPath:"content" - The main folder path. This folder contains some important files like the skin, vector font, CSS file, etc
gridSkinPath:"grid_skin_classic" - The grid icons location, UGP is using a vector font but this folder contains a wrning icon and is here to verify everything loads in place.
galleryId:"myGallery" - The UGP galleries div id, for more info read Setup galleries.
initializeOnlyWhenVisible:"no" - this can be yes or no, if set to yes it will initialize the grid only when visible on page, otherwise the grid will initialize on page start.
lTransitionType:"opacity" - represents the thumbnail image transition type when it first appears, it can opacity or motion.
preloaderBackgroundColor:"#000000" - the preloader background color.
preloaderFillColor:"#FFFFFF" - the preloader fill color.
backgroundColor:"rgb(247, 246, 252)" - the grid background color.
CAPTION
captionPosition:"yes" - this can be in or out, show the caption inside or under the thumbanil.
showCaption:"yes" - this can be yes or no, show or hide the thubnail caption.
showCaptionOnThumbVideo:"yes" - this can be yes or no, show or hide the thubnail caption for thumbnails that contains videos.
GALLERIES MENU SETTING.
showMenu:"yes" - this can be yes or no, show or hide the categories menu selector if more that one categories are used.
menuPosition:"in" - this can be in or out, the menu type an poaition.
comboboxSelectorLabel:"Select galleries" - the categories menu selector default label.
allCategoriesLabel:"All galleries (mixed)" - the all categories name.
showAllCategories:"yes" - this can be yes or no, if you have more then one category and you want an extra category with all other category mixed in then set this to yes otherwise set it to no.
showSearch:"yes" - this can be yes or no, show or hide the search input.
showSearch:"yes" - this can be yes or no, show or hide the search input.
searchLabel:"Search" - the search input label.
notFoundLabel:"Nothing found" - the nohing found label.
randomizeCategories:1 - this can be yes or no, if this is set to yes all galleries will be randomized.
GRID THUMBNAILS SETTINGS.
hideAndShowTransitionType:"yes" - this can be default or scale. The transition type for the thumbanails when they are shoed or hidden when the grid is filtred..
fitToViewportHeight:"no" - this can be yes or no. If set to yes the the when the grid is initialized the thumbnails will have the width equal to thumbnailMaxWidth and height equal to thumbnailMaxHeight. If set to no when the grid is initialized the thumbnails will be resized to fill the entire grid without cutting the thumbnails.
disableThumbnails:"no" - this can be yes or no. Disable or enable thumbnails interactivity, if is set to yes the thumbnail can't be clicked or touched to open the lightbox or a link.
showThumbnailIcon:"yes" - this can be yes or no. Show or hide the thumbnail small media icon when a thumbnail is hovered.
openOnSingleTouch:"no" - this can be yes or no. On mobile open the lightbox on a single touch.
showThumbnailOverlay:"yes" - this can be yes or no. Show or hide the thumbnail overlay when a thumbnail is hovered.
thumbnailOverlayOpacity:.7 - a number from 0 to 1 where 0.5 is 50% opacity.
thumbnailBacgroundColor:#111111 - the thumbnails background color.
thumbnailOverlayColor:#000000 - the thumbnails overlay color.
vdAudioVisualizerCircleColor:"#b9b9b9" - thumbail audio visualizer circle color.
thumbnailBorderRadius:0 - thumbail border radius in px.
thumbnailBorderSize:0 - thumbail border size in px.
thumbnailsHorizontalOffset:0 - think of this as grid padding left and right in px.
thumbnailsVerticalOffset:0 - think of this as grid padding top and bottom in px.
horizontalSpaceBetweenThumbnails:0 - horizontal space between thumbnails in px.
verticalSpaceBetweenThumbnails:0 - vertical space between thumbnails in px.
thumbnailBorderNormalColor:"0000FF" - the thumbnails border color in normal state.
thumbnailBorderSelectedColor:"00FF00" - the thumbnails border color in selected state.
howManyThumbnailsToDisplayPerSet:12 - how manu thumbnails to load per set..
thumbnailMaxWidth:489 - the thumbanils max width in px..
thumbnailMaxHeight:321 - the thumbanils max height in px..
THUMBNAILS VIDEO.
useVideoInThumb:"yes" - this can be yes or no, enable video support inside the thumbnails supported formats are mp4 and mp3, please make sure to set this to no if you don't want to use video in the thumbnails.
vdPreloaderBkColor:"#2e2e2e" - the thumbnail video preloader circular animation background color.
vdPreloaderFillColor:"#FFFFFF" - the thumbnail video preloader circular animation fill color.
vdFillEntireVideoScreen:"yes" - this can be yes or no, fill the video screen video to cover the entire video screen viewport.
vdUseKeyboard:"yes" - this can be yes or no, add keyboard support. 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.
rlVolume:1 - video start volume, a number from 0 to 1 where 0.5 is 50% volume.
vdBackgroundColor:"#000000" - background color for the video player.
vdShowLogo:"yes" - this can be yes or no, show the video logo.
vdLogoPath:"" - the video logo path, the supported formats are .jpg, .webp, .jpeg, .png.
vdLogoLink:"" - the page URL to open when the video logo is clicked, if you don't want this option leave it black.
vdButtonsHideDelay:5 - duration in seconds until the buttons will hide after several seconds of user inactivity.
vdShowVolumeButton:"yes" - this can be yes or no, show the video main scrubber when the controller is hidden.
vdShowVolumeButton:"yes" - this can be yes or no, show the video rewind button.
vdShowVolumeScrubber:"yes" - this can be yes or no, show the video current and total time.
vdShowScrubberToolTipLabel:"yes" - this can be yes or no, show the video and volume scrubbers tooltips.
vdTimeColor:"#B9B9B9" - the video current and total time HEX color.
vdScrubbersToolTipLabelBackgroundColor:"#FFFFFF" - video and volume scrubbers tooltips background color.
vdScrubbersToolTipLabelFontColor:"#5a5a5a" - video and volume scrubbers tooltips font color.
vdThumbnailsPreviewWidth:196 - the video thumbnails preview window width in px, the height is set automatically to keep a correct ratio.
vdThumbnailsPreviewBackgroundColor:"#2e2e2e" - the video thumbnails preview background color.
vdThumbnailsPreviewBorderColor:"#CCCCCC" - the video thumbnails preview label text color.
vdThumbnailsPreviewLabelBackgroundColor:"#414141" - the video thumbnails preview label background color.
vdThumbnailsPreviewLabelFontColor:"#CCCCCC" - the video thumbnails preview label text color.
LIGHTBOX SETTINGS.
useLightbox:"yes" - this can be yes or no, enable lightbox support, please make sure to set this to no if you don't want to use the lightbox.
rlUseDeepLinking:"yes" - this can be yes or no, creates an unique and shareable link and history entry for the current opened media lightbox item.
rlItemBackgroundColor:"#212121" - background color for the lightbox items.
rlDefaultItemWidth:1527 - the default global lightbox item width in px if its Iframe, video or HTML content. Please note this option can be overwritten individually for each item.
rlDefaultItemHeight:859 - the default global lightbox item height in px if its Iframe, video or HTML content. Please note this option can be overwritten individually for each item.
rlItemOffsetHeight:37 - offset/gap in px for the lightbox items when buttons are aligned in or out.
rlItemOffsetHeightButtonsTop:47 - offset/gap in px for the lightbox items when buttons are aligned top.
rlItemBorderSize:0 - lightbox item border size in px.
rlMaxZoom:1.2 - the zoom factor for the lightbox item if it is an image and it is zoomed in. For example to zoom the image 150% set this option to 1.5.
rlPreloaderBkColor:"#2e2e2e" - the lightbox preloader circular animation background color.
rlPreloaderFillColor:"#FFFFFF" - the lightbox preloader circular animation fill color.
rlButtonsAlignment:"in" - this can be in, out and top the lightbox button alignment.
rlButtonsHideDelay:5 - duration in seconds until the lightbox buttons will hide after several seconds of user inactivity.
rlMediaLazyLoading:"yes" - this can be yes or no, loads the lightbox 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.
rlUseDrag:"yes" - this can be yes or no, drag the lightbox media item to navigate to the next or previous slide.
rlUseAsModal:"yes" - this can be yes or no, close the lightbox only if the close button is used.
rlShowSlideShowAnimation:"yes" - this can be yes or no, show the lightbox slideshow circular animation.
rlShowSlideShowButton:"yes" - this can be yes or no, show the lightbox slideshow play/pause button.
rlSlideShowAutoPlay:"no" - this can be yes or no, the lightbox will start the slideshow as soon as the first media item is showed.
rlSlideShowAutoStop:"no" - this can be yes or no, the lightbox will stop the slideshow when the last media item is displayed.
rlSlideShowDelay:6 - the lightbox slideshow delay in seconds, floats are accepted as well for example 6.5 seconds.
rlSlideShowBkColor:"#2e2e2e" - the lightbox slideshow circular animation background color.
rlSlideShowFillColor:"#FFFFFF" - the lightbox slideshow circular animation fill color.
rlUseKeyboard:"yes" - this can be yes or no, 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.
rlUseDoubleClick:"yes" - this can be yes or no, use double click or double tap to maximize and minimize the lightbox item if it's an image.
rlShowCloseButton:"yes" - this can be yes or no, show the lightbox close button.
rlShowFullscreenButton:"yes" - this can be yes or no, show the lightbox fullscreen button.
rlShowZoomButton:"yes" - this can be yes or no, show the zoom button if the lightbox item it's an image.
rlShowCounter:"yes" - this can be yes or no, show the lightbox counter (item current number and total number of items).
rlShowNextAndPrevBtns:"yes" - this can be yes or no, show the next and previous lightbox item button.
rlSpaceBetweenBtns:8 - space/gap in px between lightbox buttons.
rlButtonsOffsetIn:10 - space/gap between the buttons and the lightbox item.
rlButtonsOffsetOut:10 - space/gap between the buttons and the and window left or right side.
rlBackgroundColor:"rgba(0,0,0,.99)" - main lightbox background RGBA color.
rlShareButtons:['facebook', 'twitter', 'linkedin', 'tumblr', 'pinterest', 'reddit', 'buffer', 'digg','blogger'], - lightbox 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:[].
rlShareText:"Share on" - the lihgtbox share window text.
rlSharedURL:"deeplink" - this can be deeplink, page and media, the URL used to share the current showed lightbox item.
rlShareMainBackgroundColor:"rgba(0,0,0,.4)" - the lightbox main share window background RGBA color.
rlShareBackgroundColor:"#FFFFFF" - the lightbox small share window background color.
rlShowThumbnails:"yes" - this can be yes or no, show the lightbox thumbnails.
rlShowThumbnailsIcon:"yes" - this can be yes or no, show the lightbox thumbnails play icon for the videos.
rlThumbnailsHeight:80 - the lightbox thumbnails height in px, the width is set automatically to keep a correct image ratio.
rlThumbnailsOverlayColor:"rgba(0,0,0,.4)" - the lightbox thumbnails transparent overlay RGBA color.
rlThumbnailsBorderSize:2 - the lightbox thumbnails boder size in px.
rlThumbnailsBorderColor:"#FFFFFF" - the lightbox thumbnails border color.
rlSpaceBetweenThumbnailsAndItem:10 - the lightbox space/gap in px between the thumbnails and the item.
rlThumbnailsOffsetBottom:10 - the space/gap in px between thumbnails and the lightbox bottom part.
rlSpaceBetweenThumbnails:5 - the lightbox space/gap in px between thumbnails.
rlShowCaption:"yes" - this can be yes or no, show the lightbox caption.
rlCaptionPosition:"bottomout" - this can be bottomout, bottomin or topin, the caption position.
rlShowCaptionOnSmallScreens:"yes" - this can be yes or no, show the lightbox caption on small screens if the lightbox height is smaller than 220px.
rlCaptionAnimationType:"motion" - this can be motion or opacity, the lightbox caption animation type.
rlUseVideo:"yes" - this can be yes or no, enable video support inside the lightbox, please make sure to set this to no if you are not using video.
rlFillEntireScreenWithPoster:"yes" - this can be yes or no, fill the video screen poster to cover the entire video screen viewport.
rlFillEntireVideoScreen:"yes" - this can be yes or no, fill the video screen video to cover the entire video screen viewport, this doese not apply to Youtube or Vimeo.
rlVolume:1 - video start volume, a number from 0 to 1 where 0.5 is 50% volume.
rlVideoAutoPlay:"no" - this can be yes or no, the lightbox video autoplay for the first lightbox item when it is showed first time.
rlNextVideoAutoPlay:"no" - this can be yes or no, the lightbox video autoplay for the next or previous item, when the lightbox is changed/navigating to a different item.
rlVideoAutoPlayText:"Click to unmute" - lihgtox video autoplay unmute button text. In some cases, the video can't autoplay with sound, for this cases an unmute button will appear with the text set in this option.
rlShowLogo:"yes" - this can be yes or no, show the lightbox video logo.
rlLogoPath:"content/rl/content/evp/skin/logo.png" - the lihgtbox video logo path, the supported formats are .jpg, .webp, .jpeg, .png.
rlLogoLink:"" - the page URL to open when the video logo is clicked, if you don't want this option leave it black.
rlShowDefaultControllerForVimeo:"yes" - this can be yes or no, use the player controller instead of the default Vimeo controller.
rlShowScrubberWhenControllerIsHidden:"yes" - this can be yes or no, show the lightbox video main scrubber when the controller is hidden.
rlShowRewindButton:"yes" - this can be yes or no, show the lightbox video rewind button.
rlShowVolumeButton:"yes" - this can be yes or no, show the lightbox video volume button.
rlShowChromecastButton:"no" - this can be yes or no, show the lightbox Chromecast button. Only one instnace of Chromecast can be created per page (it will work only in the fist created video instance) so if Chromecast is enabled in the carousel thumbnails it will not work in the lightbox, if you want it to work in the lightbox please make sure you set use Chromecast to no in the carousel thumbnails settings.
rlShow360DegreeVideoVrButton:"yes" - This can be yes or no, show the VR button for 360 videos, currently only mp4 videos are supported or HLS videos if CORS allows it and the video attriute data-is-360="" is set.
rlRotationY360DegreeVideo:-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 360 video.
rlShowPlaybackRateButton:"yes" - this can be yes or no, show lightbox video playback rate speed button.
rlShowQualityButton:"no" - this can be yes or no, show the lightbox video Youtube quality button.
rlShowFullScreenButton:"yes" - this can be yes or no, show the lightbox fullscreen button.
rlShowScrubberToolTipLabel:"yes" - this can be yes or no, show the lightbox video and volume scrubbers tooltips.
rlShowTime:"yes" - this can be yes or no, show the lightbox video current and total time.
rlTimeColor:"#B9B9B9" - the lihgtbox video current and total time HEX color.
rlYoutubeQualityButtonNormalColor:"#B9B9B9" - the lihgtbox Youtube quality button text normal color.
rlYoutubeQualityButtonSelectedColor:"#FFFFFF" - the lihgtbox Youtube quality button text selected color.
rlScrubbersToolTipLabelBackgroundColor:"#FFFFFF" - lihgtbox video and volume scrubbers tooltips background color.
rlSrubbersToolTipLabelFontColor:"#5a5a5a" - lihgtbox video and volume scrubbers tooltips font color.
Please open with a text editor the in.html file as reference.
In this section is explained how to setup a gallery with two categories. Below is a representation of a gallery with four categories. You can add as manny categories as you want and a thumbnail an be part of one, more or all categories.
As it can be seen the gallery is created using ul and li HTML elements with some custom attributes, what is important to note is that the gallery must have an unique id, this id is required by UGP and it must be set to the galleryId property like this galleryId:"myGallery".
All thumbnails images that will be loaded in the grid MUST have the same width and height so please make sure that you save your images properly!
Maximize/minimize button and maximize/minimize double click/tap feature for images.
Maximize & Minimize For Images
Maximize/minimize button and maximize/minimize double click/tap feature for images. The maximize zoom factor can be set to a custom value to allow fine tune controll on the maximized image.
Fully responsive and adaptable regardless of which device is used.
Lightbox image gallery
Easy To Configure And Install
Easy to include in your project.
Easy To Configure And Install
Easy to include in your project. Featuring detailed documentation and video tutorials with sample demo pages ready for use.
Lightbox image gallery
Video & Audio In Thumbnails
Support for video and audio directly in the grid thumbnails.
Video & Audio In Thumbnails
Support for video and audio directly in the grid thumbnails.
Lightbox image gallery
True Multimedia Content
Support for images, video and multiple video formats.
Share Button And Share Window
Share button and share window with nine share social platforms, the share social platforms buttons can be ordered and also removed as needed.
Lightbox image gallery
Advanced Video Advertising
VAST - Video Ad Serving Template and VMAP, IMA SDK for HTML5 and DFP / Google Doubleclick IMA tags.
Advanced Video Advertising
VAST - Video Ad Serving Template and VMAP - Video Multiple Ad Playlist support and Google Adsense Interactive Media Ads SDKs - IMA SDK for HTML5 and DFP / Google Doubleclick IMA tags.
Lightbox image gallery
Caption Support
Customizable CSS formatted caption with two animation types (opacity and motion).
Video Thumbnails Live Preview
Video thumbnails preview created from a .vtt file or live auto-generated video thumbnails.
Lightbox image gallery
Chromecast Support
Play mp4 video, mp3 audio or HLS/m3u8 files on your TV screen using Chromecast.
Chromecast Support
Play mp4 video, mp3 audio or HLS/m3u8 files on your TV screen using Chromecast, the media can be controlled via the video player interface basically, the browser and the video player become a remote tv, example here.
Lightbox image gallery
Video Thumbnails Live Preview
Video thumbnails preview created from a .vtt file or live auto-generated video thumbnails.
Video Thumbnails Live Preview
Video thumbnails preview created from a .vtt file or live auto-generated video thumbnails.
Lightbox image gallery
Private Password Protected Video/Audio
Private Video/Audio with MD5 encrypted password, this feature applies to Youtube and Vimeo as well.
Private Password Protected Video/Audio
Private Video/Audio with MD5 encrypted password, this feature applies to Youtube and Vimeo as well.
Lightbox image gallery
Desktop And Mobile Optimized
Support for mouse and touch for mobile devices and touch screens.
Desktop And Mobile Optimized
Support for mouse and touch for mobile devices and touch screens.
Lightbox image gallery
Deeplinking
Unique and shareable link for the current opened gallery item.
Deeplinking
Unique and shareable link for the current opened gallery item.
Lightbox image gallery
Youtube and Vimeo support
Revolution Lightbox Youtube and Vimeo support.
Youtube and Vimeo support
Revolution Lightbox Youtube and Vimeo support.
Lightbox image gallery
Video & Audio Subtitles
Support for subtitles, the format can be .txt, .srt or .vtt.
Video & Audio Subtitles
Support for subtitles, the format can be .txt, .srt or .vtt.
Lightbox image gallery
Constant Development And Updates
Once purchased, infinite Grid Pro comes with access to support and free updates.
Constant Development And Updates
Once purchased, infinite Grid Pro comes with access to support and free updates.
Lightbox image gallery
Direct support from the developer
Once you buy Revolution Lightbox you will also receive direct support and attention from the developer. Tibi @ FWD.
Lightbox Image Support
Once you buy Revolution Lightbox you will also receive direct support and attention from the developer. Tibi @ FWD.
Lightbox image gallery
Video And Audio Keyboard support
Control the video and audio uing the keyboard.
Video And Audio Keyboard support
Control the video and audio uing the keyboard.
Lightbox image gallery
Ultimate Grid Pro
Unique multimedia grid.
Ultimate Grid Pro<
Unique multimedia grid.
Add thumbnail:
To add a simple thumbnail please check the markup below, the data-thumb-src is required, it is the image that is loaded in the grid.
The data-thumb-caption is optional and represents the thumbnail caption.
There is an useful attribute explained below.
data-thumb-overlay-color - used to add a custom HEX color to the thumbnail overlay, ex: data-thumb-overlay-color="#FF0000", this will overwrite the general thumbnailOverlayColor parameter from the grid constructor.
To add a thumbnail when clicked to open a new page please check the markup below, the data-thumb-src is required, it is the image that is loaded in the grid.
The data-thumb-caption is optional and represents the thumbnail caption.
Attributes below.
data-thumb-link - used to open a new page when the thumbail is clicked, ex: data-thumb-link="https://google.com".
data-thumb-target - the link target _blank or _slef, ex: data-thumb-target="_blank".
Open new page
Link Click Support
Open a custom page with in the same or a different tab..
Add thumbnail with video or audio:
To add a thumbnail please check the markup below, the data-thumb-src is required, it is the image that is loaded in the grid.
To add a video (.mp4) or audio(.mp3) to play inside the thumbnail use the The data-thumb-video-src.
There are other attributes that can be added to add extra functionality to the video/audio thumbnail explained below.
data-thumb-password - used to add a private password, use this tool to create the password, ex: data-thumb-password="dd1d878544e988bb644756ca5e0ba56b"
data-thumb-subtitle-src - used to add a subtitle, the supported format is .srt, ex: data-thumb-subtitle-src="media/subtitles/english_subtitle.srt"
data-thumb-preview - used to add thumbnails preview, if you want this set it to auto like this data-thumb-preview="auto".
The data-thumb-caption is optional and represents the thumbnail caption.
Thumbnails video and audio
Thumbnail audio support
Thumbmail audio support, self hosted or external hosted .mp4.
Add Lightbox image:
To add a lightbox image please check the markup below, the data-rl-src is required, it is the lightbox source, in this case an image (.jpg, .jpeg, .png).
The data-thumb-caption is optional and represents the thumbnail caption.
The data-rl-caption is optional and represents the lightbox caption.
To add a lightbox video or audio please check the markup below, the data-rl-src is required, it is the lightbox source, in this case the video or audio src, supported formats are:
.mp4 - add the video .mp4 path as the source, ex: data-rl-src="media/videos/fwd-1080p.mp4".
.mp3 - add the video .mp3 path as the source, ex: data-rl-src="media/audio/audio1.mp3".
Youtube - add the Youtube video URL as the source, ex: data-rl-src="https://www.youtube.com/watch?v=IDZTCLNOfqU"
Vimeo - add the Vimeo video URL as the source, ex: data-rl-src="https://vimeo.com/307791576".
HLS - add the HLS video URL as the source, ex: data-rl-src="https://5b44cf20b0388.streamlock.net:8443/vod/smil:hls-maudios-prod.smil/playlist.m3u8"
Google Drive - add the Google Drive video URL as the source, ex: data-rl-src="ttps://www.googleapis.com/drive/v3/files/1CaDKmLq_Ta_IEPUq7XK7oy7uTppQ2uLj?alt=media&key=AIzaSyCpMiFIS8G-1XrZmYXe9crmqhRM7sWC5js&v=.mp4".
Google Maps - add the Google Maps URL as the source, ex: data-rl-src="https://www.google.com/maps/embed/v1/place?q=castelul%20hunedoara&key=AIzaSyDYlgLIneg_UOd8STBfJEgq2JgmT5nNJKU".
IFRAME - add the the link of any page as the source, ex: data-rl-src="https://your-page.com".
PDF - add the .pdf as the source, ex: data-rl-src="media/sample.pdf".
The data-thumb-caption is optional and represents the thumbnail caption.
The data-rl-caption is optional and represents the lightbox caption.
Lightbox multimedia
Lightbox Cloud Storage
Google Drive, Dropbox, and pretty much all cloud storage platforms, Easy Video Player.
Google Drive And Other Cloud Storage
Google Drive, Dropbox, and pretty much all cloud storage platforms, Easy Video Player.
Add 360 degree video and VR:
To add a 360 degree video add the data-is-360="" attribute, please note that only .mp4 videos work and HLS if the CORS allows it. To show the VR button set the rlShow360DegreeVideoVrButton:"yes".
Lightbox 360 video
Lightbox 360 video.
Lightbox 360 video
Lightbox 360 video.
Add VAST or Google IMA SDK:
To add a VAST or Google IMA SDK file as advertisement use the data-rl-vast-src and pass the URL as the source, ex: data-rl-vast-src="//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".
Add video/audio poster:
To add a poster use the data-rl-poster-src and pass the URL as the source, ex: data-rl-poster-src="media/images/adsense.jpg".
Add video thumbnails preview:
For .mp4 files if you want a small thumbnails preview use the data-rl-preview-src and pass the URL as the source, ex: data-rl-preview-src="auto".
Inside the start file there is HTML file called API-example.html, open it with a text editor as reference. Below is a table with all API events and methods.
Methods:
Name
Method
Description
updateCategory
updateCategory(categoryId:int):void
Update the category based on id, the counting starts from zero 0
Event listeners:
Event
Prefix
Description
ready
FWDUGP.READY
Dispatched when UGP API is ready to be used.
categoryUpdate
FWDUGP.CATEGORY_UPDATE
Dispatched when UGP a category is changed.
thumbVideoStart
FWDUGP.THUMB_VIDEO_START
Dispatched when the thumbnail video has started.
thumbVideoPlay
FWDUGP.THUMB_VIDEO_PLAY
Dispatched when the thumbnail video playes.
thumbVideoPause
FWDUGP.THUMB_VIDEO_PAUSE
Dispatched when the thumbnail video is paused.
thumbVideoPlayComplete
FWDUGP.THUMB_VIDEO_PLAY_COMPLETE
Dispatched when the thumbnail video has finished playing.
goFullScreen
FWDUGP.GO_FULLSCREEN
Dispatched when the thumbnail video is going fullscreen.
goNormalScreen
FWDUGP.GO_NORMALSCREEN
Dispatched when the thumbnail video is going normalscreen.
error
FWDUGP.ERROR
Dispatched when an error occurs, it has a parameter named error which returns the error text.
showStart
FWDUGP.LIGHTBOX_SHOW_START
Dispatched when UGP lightbox starts to show.
showComplete
FWDUGP.LIGHTBOX_SHOW_COMPLETE
Dispatched when UGP show animation is complete.
hideStart
FWDUGP.LIGHTBOX_HIDE_START
Dispatched when UGP lightbox starts to hide.
hideComplete
FWDUGP.LIGHTBOX_HIDE_COMPLETE
Dispatched when UGP hide animation is complete.
startToUpdateItem
FWDUGP.START_TO_UPDATE_ITEM
Event dispatched when the lightbox item has changed and it is first showed before any settings or visual are initalized, it has a parameter that contains info about the current lightbox item.
Once again, thank you so much for purchasing this item. As I said at the beginning, I'd be glad to help you if you have any questions regarding this Ultimate Grid Pro and I'll do my best to assist.