“Ultimate Grid Pro (flexible vertical type) documentation”
Created: 07/07/2018 - Version 1.0
By:© FWDV (Future Web Design)
Email: tibi_diablo@yahoo.com
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!
Table of Contents
- IMPORTANT NOTES - read this before anything else
- Preparing thumbnails and images
- Ultimate Grid Pro installation
- Constructor parameters
- Setup categories / playlists
- Presets
- Setup Facebook app
- API specifications
- Sources and Credits
A) IMPORTANT NOTES - make sure you read this! - top
Because there are differences between the grid types we decided to create a different documentation file for each grid type this way it will be easier to understand how to configure and set up the grid.
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.
If you want to use video or audio only mp4 or mp3 files are required. It will work in all browsers on desktop machines or mobile devices, this is extremely important because there is no need to create multiple audio or video formats for browsers that don't support mp4 or mp3, also please note that the mp4 and mp3 video aud audio formats are recommended and used by all major browsers distributors like Google, Microsoft, Apple, Mozilla etc.!
The server is character case sensitive so make sure that the UGP settings are identical to those from the provided examples.
The css classes for the menu and thumbnail presets can be found in the global.css file inside the content folder.
The UGP skin (buttons and icons) is constructed from png images. We have included psd files just in case you want to modify the skin. If you want a different skin the .png files must be modified. We have a great designer in our team so if you need a custom skin please contact us!
The presets for the flexible vertical type are starting with fv- and end with a number or text followed by .html
All presets can load and display the available media sharing sources.
B) Preparing thumbnails and images - top
Before you start using the grid you need to set the thumbnailMaxHeight property in the grid constructor, it represents the height of all the thumbnails.
For this grid type the thumbnail images sizes don't matter, they can be any value but for the grid to be optimized it's a good idea to save them with a height equal to thumbnailMaxHeight. Their widths can have any values because the grid will automatically resize and adjust them to fit equally on all the rows of the grid.
C) Ultimate Grid Pro installation - top
In the download files there is a start folder and in this folder there are example html files. You can use one of them to copy and paste the required html and js code with all the presets. In this tutorial we have used the fv-1.html file.
- Copy and paste the content folder and the java folder into the same folder with your html file, inside the content folder there are other folders and files which are self explanatory.
- Open fv-1.html with a text editor as reference.
- The javascript and CSS files must be imported in the head section of your html.
This is how UGP is installed in a HTML page, please read the Constructor parameters section, it will explain all settings in details.
D) Constructor parameters - top
Please open fv-1.html with a text editor as reference. These parameters represents the possible setting of UGP, they are all described below. Please note that each preset has some differences under the Preset section, this is explained in detail for each preset in the Presets section.
//main settings
- gridType:"classicVertical" - this can be classicVertical, dynamicVertical, classicVertical, masonryVertical, flexibleVertical.
- rightClickContextMenu:"default" - this can be developer, default or disabled. We would appreciate it if you can leave this feature set to developer.
- instanceName:"myIGP" - represents the UGP instance name, this is used to access API methods.
- 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 skins, images, audio,video flash players, etc.In this folder you need to add your content (images, videos, etc), please note that your content can be added outside this folder but is a good idea to keep everything centralized.
- gridSkinPath:"grid_skin_classic" - The grid skin path, the name of the folder that contains the grid skin, this folder must always be inside the mainFolderPath folder.
- lightboxSkinPath:"lightbox_skin_classic" - The lightbox skin path, the name of the folder that contains the lightbox skin, this folder must always be inside the mainFolderPath folder.
- playlistId:"myPlaylist" - The UGP categories / playlist id, for more info read Setup categories / playlists.
- allCategoriesLabel:"ALL CATEGORIES" - represents the all categories playlist 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 categories mixed in then set this to yes otherwise set it to no.
- randomizeCategories:"no" - this can be yes or no. If this is set to yes all categories with the exception of the main category (all categories) will be randomized.
- animateParent:"yes" - this can be yes or no. Animates or not the parent grid div holder height when the thumbnails are showed.
- backgroundColor:"#000000" - This main background color.
- menuType:"list" - The menu type, this can be list or combobox.
- showMenu:"yes" - This can be yes or no, it hides or shows the menu.
- showMenuButtonsSpacers:"no" - This can be yes or no, it hides or shows the menu buttons spacers.
- showTotalThumbnailsPerCategory:"yes" - This can be yes or no, it shows or not the total number of items per category in the menu buttons.
- comboboxSelectorLabel:"SELECT GALLERIES" - If the menu is combobox this is the selector label.
- menuPosition:"center" - Te menu position, this can be center, left or right.
- comboboxArrowNormalColor:"#FFFFFF" - The combobox selector arrow normal color.
- comboboxArrowSelectedColor:"#000000" - The combobox selector arrow selected color.
- menuButtonSpacerWidth:1 - The menu spacers width.
- menuButtonSpacerHeight:1 - The menu spacers height.
- menuButtonsSapcerLeftAndRight:0 - This of this as margin left and right for the fist and last button in a row.
- menuMaxWidth:920 - The maximum menu width, if there are two many buttons they will drop down on a second, third ... row.
- menuOffsetTop:25 - Think of this as margin top for the menu buttons.
- menuOffsetBottom:25 - Think of this as margin bottom for the menu buttons.
- horizontalSpaceBetweenMenuButtons:10 - Horizontal space between buttons.
- verticalSpaceBetweenMenuButtons:10 - Vertical space between buttons.
- thumbnailLoadingType:"loadMoreWithButton" - This can be loadMoreWithButton or loadmoreOnScroll. This option loads the thumbnail using the load more button or when the browser is scrolled.
- hideAndShowTransitionType:"scale" - This can be scale, rotation or opacity. The thumbnail animation type when they are hiding or showing.
- thumbanilBoxShadow:"none" - Thumbnails box shadow.
- disableThumbnails:"no" - This can be yes or no, disable or enable thumbnails interactivity.
- inverseButtonsIcons:"no" - This can be yes or no, inverse the thumbanil buttons icons normal icon will be selected icon ...
- thumbnailBackgroundColor:"#333333" - The thumbnails background color.
- thumbnailBorderNormalColor:"#FFFFFF" - The thumbnails border normal color.
- thumbnailBorderSelectedColor:"#c1c1c1" - The thumbnails border selected color.
- howManyThumbnailsToDisplayPerSet:19 - How many thumbnails to display per set in a category before the load more thumbnails button appears or the load more on scroll occurs.
- thumbnailsHorizontalOffset:0 - Think of this as margin left for the thumbnails from the first column and margin right for the thumbnails from the last column.
- thumbnailsVerticalOffset:278 - This is the maximum base width for the thumbs in pixels, it is the smallest width possible for a thumb, and all the rest have to be a multiple of it. This is explained in detail in the Preparing thumbnails and images section.
- thumbnailMaxHeight:188 - this is the base maximum height for the thumbs in pixels, it is the smallest height possible for a thumb, and all the rest have to be a multiple of it. This is explained in detail in the Preparing thumbnails and images section.
- horizontalSpaceBetweenThumbnails:0 - Horizontal space between thumbnails in px.
- verticalSpaceBetweenThumbnails:0 - Vertical space between thumbnails in px.
- thumbnailBorderSize:0 - Thumbnails border size.
- thumbnailBorderRadius:0 - Thumbnails border radius.
- loadMoreButtonLabel:"LOAD MORE THUMBNAILS" - Load more button label.
- loadMoreButtonOffsetTop:25 - Think of this as margin top for the load more button.
- loadMoreButtonOffsetBottom:25 - Think of this as margin bottom for the load more button.
- loadMoreButtonOffsetBottom:25 - Think of this as margin bottom for the load more button.
- Please read the Presets section for details about each preset, each preset has some different setting this is why a different section is required.
- facebookAppId:"213684265480896" - this represents the APP id used by Facebook to share items, for more info about how to get your own Facebook APP id and Setup Facebook app please read Setup Facebook app.
- buttonsAlignment:"in" - this can be in or out. If set to in the buttons will be positioned near the image. If set to out the buttons will be positioned at the right or left side of the screen.
- itemBoxShadow:"none" - this can be none or a box shadow style like "10px 10px 5px #888888", represents the box shadow for the current item.
- descriptionWindowAnimationType:"opacity" - this can be opacity or motion, represents the animation type of the description window when on show / hide.
- descriptionWindowPosition:"bottom" - this can be top or bottom, represents the description window position inside the lightbox item.
- slideShowAutoPlay:"yes" - this can be yes or no. Enable or disable the lightbox slideshow autoplay.
- addKeyboardSupport:"yes" - this can be yes or no. Enable or disable the keyboard left and right arrows to navigate between lightbox items.
- showCloseButton:"yes" - this can be yes or no. Hide or show the close button.
- showFacebookButton:"yes" - this can be yes or no. Hide or show the Facebook button.
- showZoomButton:"yes" - this can be yes or no. Hide or show the image zoom in and out button.
- showSlideShowButton:"yes" - this can be yes or no. Hide or show the slideshow button.
- showSlideShowAnimation:"yes" - this can be yes or no. Hide or show the slideshow animation.
- showNextAndPrevButtons:"yes" - this can be yes or no. Hide or show the next and prev buttons.
- showNextAndPrevButtonsOnMobile:"yes" - this can be yes or no. Hide or show the next and prev buttons on mobile, this is an addition for the showNextAndPrevButtons feature.
- buttonsHideDelay:3 - this can be yes or no, delay in seconds until the buttons will hide.
- showDescriptionButton:"yes" - this can be yes or no, hide or show the description button.
- showDescriptionByDefault:"yes" - this can be yes or no, shows or not the description window by default.
- videoShowFullScreenButton:"yes" - this can be yes or no, show or hide the video player fullscreen button.
- videoAutoPlay:"no" - this can be yes or no.
- nextVideoOrAudioAutoPlay:"yes" - this can be yes or no, autoplay for the next video or audio, when changing the video if this is set to yes the video will start playing.
- videoLoop:"no" - this can be yes or no (doesn't apply to youtube or vimeo).
- audioAutoPlay:"yes" - this can be yes or no.
- audioLoop:"no" - this can be yes or no.
- backgroundOpacity:.9 - a number from 0 to 1 that represents the main background opacity.
- descriptionWindowBackgroundOpacity:.9 - a number from 0 to 1 that represents the description window background opacity.
- buttonsHideDelay:3 - this can be yes or no, delay in seconds until the buttons will hide.
- slideShowDelay:6 - slideshow duration in seconds.
- defaultItemWidth:800 - the default lightbox item width.
- defaultItemHeight:500 - the default lightbox item height.
- itemOffsetHeight:50 - a number that represents the px to remove from the top and bottom part of the lightbox item, think of this as margin top and margin bottom for the lightbox item.
- spaceBetweenButtons:1 - a number that represents the space between buttons in px.
- buttonsOffsetIn:2 - a number that represents the space between the buttons and the main lightbox item, think of this as margin left for the buttons from the right side of the lightbox item and margin right for the buttons from the left site of the lightbox item.
- buttonsOffsetOut:5 - a number that represents the space between the buttons and window left or right side, think of this as margin right for the buttons from the right side of the lightbox item and margin left for the buttons from the left site of the lightbox item.
- itemBorderSize:4 - a number that represents the lightbox item border size in px.
- itemBorderRadius:4 - a number that represents the lightbox item border radius in px.
- backgroundOpacity:.9 - a number from 0 to 1 that represents the main background opacity.
- itemBoxShadow:"none" - this can be none or a box shadow style like "10px 10px 5px #888888", represents the box shadow for the current item.
- itemBackgroundColor:"#333333" - the lightbox item background color.
- itemBorderColor:"#FFFFFF" - the lightbox item border color.
- lightBoxBackgroundColor:"#000000" - the lightbox main background color.
- descriptionWindowBackgroundColor:"#FFFFFF" - the background color of the description window.
- videoPosterBackgroundColor:"#0099FF" - The video player poster background color.
- videoControllerBackgroundColor:"#FFFFFF" - The video controller background color.
- audioControllerBackgroundColor:"#FFFFFF" - The audio controller background color.
- timeColor:"#000000" - The video and audio time color.
E) Setup categories / playlists - top
In this section is explained how to setup a playlist. UGP requires a playlist that contains the images paths, html content, buttons, etc, the playlist is of HTML format and is added directly in the html page inside the body element. It is possible to load and display playlist from media sharing websites like Facebook, Soundcloud, Flickr and Youtube, how to do this is explained below.
Each preset can have some variation in the way the playlist item content is formatted so based on the preset make sure you check the playlist item fromat in the Presets section
NORMAL HTML PLAYLIST:
Please open with a text editor the fv-1.html file as reference.
As it can be seen the playlist is created using ul and li html elements with some custom attributes, what is important to note is that the playlist must have an unique id, this id is required by UGP and it must be set to the playlistId property like this playlistId:"myPlaylist".
There are 9 content types (image, video, audio, youtube, vimeo, flash, google maps, iframe, link) that the UGP lightbox can display and they are explained in detail below in this section. To add / remove items in the playlist add or remove items depending of the type that you need. Below is a representation of a playlist with a single category. To add a category / playlist add inside the main playlist div an ul element with the attribute data-category-name. To remove a category delete the ul element with the attribute data-category-name and it's content that is not required any more.
One important aspect of this grid type that it can also have HTML / text content under the thumbnail, this is done by adding another HTML code inside the playlist item, example below.
Ultimate Grid Pro
Multimedia grid for your website that can only be found on sale here, it runs on all major browsers and mobile devices like iPhone, iPad, IOS, Android and Windows8.
Image type:
The data-url attribute represents the image that will open in the lightbox when the thumbnail button or thumbnail is clicked based on the preset.The img element represents the thumbnail image path.
The div with the attribute data-thumbnail-content1 represents the HTML content that is showed inside the thumbnail or below the thumbnail based on the preset. If you don't need one remove it.
The div with the attribute data-lightbox-desc represents the lightbox image description, if you don't need one remove it.
Ultimate Grid Pro
Multimedia grid for your website that can only be found on sale here, it runs on all major browsers and mobile devices like iPhone, iPad, IOS, Android and Windows8.
Video (mp4) type:
The data-url attribute represents the video path that will be opened in the lightbox, UGP supports two video paths, one for desktop and one for mobile, this is useful if you want a large hd video for desktop and a smaller video version for mobile, the paths are separated by comma, the mobile video path is optional.The data-poster-path attribute represents the poster path, UGP supports two poster paths, one for desktop and one for mobile, the paths are separated by comma, the mobile poster path is optional.
The data-width and data-height represents the maximum video width and height.
The img element represents the thumbnail image path.
The div with the attribute data-thumbnail-content1 represents the HTML content that is showed inside the thumbnail or below the thumbnail based on the preset. If you don't need one remove it.
The div with the attribute data-lightbox-desc represents the lightbox image description, if you don't need one remove it.
Revolution Lightbox, think outside the lightbox!
Full blown multimedia responsive lightbox included, it runs on all major browsers and mobile devices like iPhone, iPad, iOS, Android and Windows8. It has support for image, video (mp4), audio (mp3), Vimeo, YouTube, iFrame, Google maps and flash.
Audio (mp3) type:
The data-url represents the mp3 path.The img element represents the thumbnail image path.
The div with the attribute data-thumbnail-content1 represents the HTML content that is showed inside the thumbnail or below the thumbnail based on the preset. If you don't need one remove it.
The div with the attribute data-lightbox-desc represents the lightbox image description, if you don't need one remove it.
Support for unlimited categories!
Youtube type:
The data-url attribute represents the youtube video url that will be opened in the lightbox.The data-width and data-height represents the maximum video width and height.
The img element represents the thumbnail image path.
The div with the attribute data-thumbnail-content1 represents the HTML content that is showed inside the thumbnail or below the thumbnail based on the preset. If you don't need one remove it.
The div with the attribute data-lightbox-desc represents the lightbox image description, if you don't need one remove it.
The data-thumbnail-path attribute represents the thumbnail path, the data-url attribute represents the youtube video url. The data-width and data-height represents the maximum video width and height. If you don't need any description leave the inner html empty in this case remove the inner div.
Customizable thumbnails action
When a thumbnail is pressed you can choose to do nothing, display multimedia content using our great revolution lightbox, or to open a new webpage. The lightbox has support for image, video (mp4), audio (mp3), Vimeo, YouTube, iFrame, Google maps and flash.
Vimeo type:
The data-url attribute represents the vimeo video url that will be opened in the lightbox.The data-width and data-height represents the maximum video width and height.
The img element represents the thumbnail image path.
The div with the attribute data-thumbnail-content1 represents the HTML content that is showed inside the thumbnail or below the thumbnail based on the preset. If you don't need one remove it.
The div with the attribute data-lightbox-desc represents the lightbox image description, if you don't need one remove it.
Outstanding performance using OOP code and CSS3
High performance using OOP code and the latest CSS3 techniques, ready for mobile with swipe and pinch support, very flexible, easy to setup and extremely customizable.
Flash type:
The data-url attribute represents the flash swf path that will be opened in the lightbox.The data-width and data-height represents the maximum item width and height.
The img element represents the thumbnail image path.
The div with the attribute data-thumbnail-content1 represents the HTML content that is showed inside the thumbnail or below the thumbnail based on the preset. If you don't need one remove it.
The div with the attribute data-lightbox-desc represents the lightbox image description, if you don't need one remove it.
Support for four two types
Support for four two types, vertical and horizontal.
Google maps type:
The data-url attribute represents the google maps path that will be opened in the lightbox.The data-width and data-height represents the maximum item width and height.
The img element represents the thumbnail image path.
The div with the attribute data-thumbnail-content1 represents the HTML content that is showed inside the thumbnail or below the thumbnail based on the preset. If you don't need one remove it.
The div with the attribute data-lightbox-desc represents the lightbox image description, if you don't need one remove it.
Customizable thumbnails action
When a thumbnail is pressed you can choose to do nothing, display multimedia content using our great revolution lightbox, or to open a new webpage. The lightbox has support for image, video (mp4), audio (mp3), Vimeo, YouTube, iFrame, Google maps and flash.
Iframe type:
The data-url attribute represents the web page that will be opened in the lightbox.The data-width and data-height represents the maximum item width and height.
The img element represents the thumbnail image path.
The div with the attribute data-thumbnail-content1 represents the HTML content that is showed inside the thumbnail or below the thumbnail based on the preset. If you don't need one remove it.
The div with the attribute data-lightbox-desc represents the lightbox image description, if you don't need one remove it.
Optional drop down categories menu
Optional drop down categories menu, this categories selector can be positioned on the left or right side of the grid canvas.
Link type:
The data-url attribute represents the url of the web page to open when the thumbnail is clicked, the data-target attribute represents the url target (_self or _blank).The img element represents the thumbnail image path.
The div with the attribute data-thumbnail-content1 represents the HTML content that is showed inside the thumbnail or below the thumbnail based on the preset. If you don't need one remove it.
YOUTUBE PLAYLISTS:
Please open with a text editor the fv-youtube.html file as reference.
UGP can load and display one or more playlists from youtube. Below is a representation of three playlist. Inside each ul element there is an attribute data-category-name that represents the playlist name, this will appear in the menu buttons and an attribute data-youtube-playlist-url that represents the playlist url. To remove a category delete the ul element with the attribute data-category-name and it's content that is not required any more.
For youtube paylist is important to note that at the end of the UGP contructor there is another section with some specific parameters for youtube that are self explanatory. One important property is showAsExtraText that will add the info over the thumbnail or below the thumbnail based on it's settings (yes or no).
SOUNDCLOUD PLAYLISTS:
Please open with a text editor the fv-soundcloud.html file as reference.
UGP can load and display one or more playlists from Soundcloud. Below is a representation of three playlist. Inside each ul element there is an attribute data-category-name that represents the playlist name, this will appear in the menu buttons and an attribute data-soundcloud-url that represents the playlist url. To remove a category delete the ul element with the attribute data-category-name and it's content that is not required any more.
For soundcloud paylists is important to note that at the end of the UGP contructor there is another section with some specific parameters for soundcloud that are self explanatory. One important property is showAsExtraText that will add the info over the thumbnail or below the thumbnail based on it's settings (yes or no).
PINTEREST BOARDS:
Please open with a text editor the fv-pinterest.html file as reference.
UGP can load and display one or more boards from Pinterest. Below is a representation of three boards. Inside each ul element there is an attribute data-category-name that represents the playlist name, this will appear in the menu buttons and an attribute data-pintrest-board-url that represents the board url. To remove a board delete the ul element with the attribute data-category-name and it's content that is not required any more.
For Pinterest paylists is important to note that at the end of the UGP contructor there is another section with some specific parameters for Pinterest that are self explanatory. One important property is showAsExtraText that will add the info over the thumbnail or below the thumbnail based on it's settings (yes or no).
FLICKR ALBUMS:
Please open with a text editor the fv-flickr.html file as reference.
UGP can load and display one or more albums from Flickr. Below is a representation of three albums. Inside each ul element there is an attribute data-category-name that represents the playlist name, this will appear in the menu buttons and an attribute data-flickr-album-url that represents the album url. To remove an album delete the ul element with the attribute data-category-name and it's content that is not required any more.
For flickr albums is important to note that at the end of the UGP contructor there is another section with some specific parameters for flickr that are self explanatory. One important property is showAsExtraText that will add the info over the thumbnail or below the thumbnail based on it's settings (yes or no).
