# “Ultimate Grid Pro (dynamic 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

1. IMPORTANT NOTES - read this before anything else
2. Preparing thumbnails and images
3. Ultimate Grid Pro installation
4. Constructor parameters
5. Setup categories / playlists
6. Presets
7. Setup Facebook app
8. API specifications
9. 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 dynamic vertical type type are starting with dv- 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 thumbnailMaxWidth and thumbnailMaxHeight properties in the grid constructor, these two properties represent the base thumbnail width and height, the smallest possible values for your thumbnails.

All the thumbnails of the gallery must have their widths and heights a multiple of the base thumbnail width, this means the smallest thumb can have the base thumbnail width, and the other bigger ones will have to be double or triple etc, the same applies to the thumbnail height.

For example, with the 240 and 160 base width and height values, if you want to add a double sized thumbnail, it must have 240 * 2 = 480 width and 160 * 2 = 320 height, if you want it to be double just on its height then it must have 240 width and 160 * 2 = 320 height and if you want for example a thumbnail to be three times long just on its width, then it must have 240 * 3 = 720 width and 160 height.

If you find it difficult to understand these rules simply save your images at the same size as we did in our example.

### 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 dv-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 dv-1.html with a text editor as reference.
- The javascript and CSS files must be imported in the head section of your html.

- You need a div 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 will adapt based on the parent div width and the height will adapt based on the thumbnails height and position.

- Next step is to set up the categories / playlists, to do this copy and paste the div element with the id myPlaylist into the body element, the id is passed to the UGP parameter playlistId:myPlaylist. For more info about playlist types and how to create them read the Setup categories / playlists section.

    						IMAGE DISPLAY

    						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 1

    						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 DISPLAY

    						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.

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

### D) Constructor parameters - top

Please open dv-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.

//menu settings

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

//thimbnail settings

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

//load more button settings

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

//preset settings

- Please read the Presets section for details about each preset, each preset has some different setting this is why a different section is required.

//ligtbox settings

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

    							IMAGE DISPLAY

    							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 DISPLAY (mp4)

    							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 DISPLAY (mp3)

    							Support for unlimited categories!

    							VIMEO DISPLAY

    							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.

    							YOUTUBE DISPLAY

    							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.

    							FLASH DISPLAY (swf)

    							Support for four two types
    							Support for four two types, vertical and horizontal.

    							GOOGLE MAPS DISPLAY

    							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 DISPLAY

    							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.

    							EXTERNAL LINK

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

    				IMAGE DISPLAY

    				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.

    					VIDEO DISPLAY (mp4)

    					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.

    					AUDIO DISPLAY (mp3)

    					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.

    					YOUTUBE DISPLAY

    					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.

                    VIMEO DISPLAY

                    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.

    					FLASH DISPLAY (swf)

    					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.

    					GOOGLE MAPS DISPLAY

    					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.

    					IFRAME DISPLAY

    					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.

    					EXTERNAL LINK

#### YOUTUBE PLAYLISTS:

Please open with a text editor the dv-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.

#### SOUNDCLOUD PLAYLISTS:

Please open with a text editor the dv-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.

#### PINTEREST BOARDS:

Please open with a text editor the dv-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.

#### FLICKR ALBUMS:

Please open with a text editor the dv-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.

#### FACEBOOK ALBUMS:

Please open with a text editor the dv-facebook.html file as reference.

UGP can load and display one or more albums from Facebook. 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-facebook-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 Facebook paylists is important to note that at the end of the UGP contructor there is another section with some specific parameters for Facebook that are self explanatory.

Unfortunately loading Facebook albums is a bit more complicated, Facebook requires an access token that can only be retrived using their API using an app, so far so good but they made it so complicated then even for a developer it's really difficult to figure this out, they require the app to be reviewed and to send them print screens of the code and explanation of what it is doing plus there are users that have apps submited without a response it might take up to 3 months to get an answer. This is crazy and frankly we don't understand why they chose to make it so difficult to load a simple public album, however there is a workaround to get the access token that is explained here , we have used this tutorial to get an access token that never expires, please note that you have to create an app, how to do this is explained in the Setup Facebook app. Once the access token is retrived it must be added in the facebook_access_token.txt inside the content folder.

### F) Presets - top

In this section each preset is explained. One thing to note is that each thumbnail can have a different border or overlay color this is done by adding some extra attributes for a playlist item, below is an example that shows how to add an entry in the playlist and set the thumbnail border and overlay color to a custom color, doing so will overwrite the default colors.

    					ULTIMATE GRID PRO
    					Complete multimedia grid for your website that can only be fond on sale here, it runs on all major browsers and mobile devices like iPhone, iPad, IOS, Android and Windows8.

    					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.

#### Presets ONE and TWO

Please open with a text editor dv-1 and dv-2 files as reference.

These presets allow to add text / HTML content and /or buttons to thumbnails and animate each letter in a chain order, all available parameters are explained below.

- preset:"animtext" - The preset type.
- textVerticalAlign:"center" - the HTMl content / text and / or buttons position. This can be top, center or bottom
- textAnimationType:"scale" - The HTML content / text animation type. This can be opacity, scale, scalerandom and largescale.
- useIconButtons:"no" - This shows or hides the buttons that opens the lightbox. This can be yes or no.
- thumbnailOverlayColor:"#FFFFFF" - This thumbnails overlay color.
- thumbnailOverlayOpacity:.8 - This thumbnails overlay opacity. A number from 0 to 1.
- thumbnailIconWidth:30 - This thumbnails buttons width.
- thumbnailIconHeight:29 - This thumbnails buttons height.
- spaceBetweenThumbanilIcons:29 - Horizontal space between thumbnails buttons in px.
- spaceBetweenTextAndIcons:10 - Vertical space between the thumbnails HTML content / text amd buttons in px.

#### Presets THREE and FOUR

Please open with a text editor dv-3 and dv-4 files as reference.

These presets allow to add text / HTML content and / or buttons to thumbnails and reveal it with a curtain animation, all available parameters are explained below.

- preset:"curtain" - The preset type.
- textVerticalAlign:"center" - the HTML content / text and / or buttons position. This can be top, center or bottom
- imageTransitionDirection:"left" - The curtain animation type direction. This can be top, right, bottom and left.
- useIconButtons:"no" - This shows or hides the buttons that opens the lightbox. This can be yes or no.
- thumbnailOverlayColor:"#FFFFFF" - This thumbnails overlay color.
- thumbnailOverlayOpacity:.8 - This thumbnails overlay opacity. A number from 0 to 1.
- thumbnailIconWidth:30 - This thumbnails buttons width.
- thumbnailIconHeight:29 - This thumbnails buttons height.
- spaceBetweenThumbanilIcons:29 - Horizontal space between thumbnails buttons in px.
- spaceBetweenTextAndIcons:10 - Vertical space between the thumbnails HTML content / text amd buttons in px.

#### Presets FIVE and SIX

Please open with a text editor dv-5 and dv-6 files as reference.

These presets allow to add text / HTML content and / or buttons to thumbnails and animate show / hide them based on the entry angle, all available parameters are explained below.

- preset:"movetext" - The preset type.
- textVerticalAlign:"center" - the HTML content / text and / or buttons position. This can be top, center or bottom
- useIconButtons:"no" - This shows or hides the buttons that opens the lightbox. This can be yes or no.
- thumbnailOverlayColor:"#FFFFFF" - This thumbnails overlay color.
- thumbnailOverlayOpacity:.8 - This thumbnails overlay opacity. A number from 0 to 1.
- thumbnailIconWidth:30 - This thumbnails buttons width.
- thumbnailIconHeight:29 - This thumbnails buttons height.
- spaceBetweenThumbanilIcons:29 - Horizontal space between thumbnails buttons in px.
- spaceBetweenTextAndIcons:10 - Vertical space between the thumbnails HTML content / text amd buttons in px.

#### Presets SEVEN and EIGHT

Please open with a text editor dv-7 and dv-8 files as reference.

These presets allow to add text / HTML content and / or buttons to thumbnails and animate show / hide them with a 3D turn effect, all available parameters are explained below.

- preset:"3D" - The preset type.
- textVerticalAlign:"center" - the HTML content / text and / or buttons position. This can be top, center or bottom
- useIconButtons:"no" - This shows or hides the buttons that opens the lightbox. This can be yes or no.
- thumbnailOverlayColor:"#FFFFFF" - This thumbnails overlay color.
- thumbnailOverlayOpacity:.8 - This thumbnails overlay opacity. A number from 0 to 1.
- thumbnailIconWidth:30 - This thumbnails buttons width.
- thumbnailIconHeight:29 - This thumbnails buttons height.
- spaceBetweenThumbanilIcons:29 - Horizontal space between thumbnails buttons in px.
- spaceBetweenTextAndIcons:10 - Vertical space between the thumbnails HTML content / text amd buttons in px.

#### Presets NINE and TEN

Please open with a text editor dv-9 and dv-10 files as reference.

These presets allow to add text / HTML content and / or buttons to thumbnails and animate show / hide them with a scale and opacity animation, all available parameters are explained below.

- preset:"scaletext" - The preset type.
- textVerticalAlign:"center" - the HTML content / text and / or buttons position. This can be top, center or bottom
- useIconButtons:"no" - This shows or hides the buttons that opens the lightbox. This can be yes or no.
- thumbnailOverlayColor:"#FFFFFF" - This thumbnails overlay color.
- thumbnailOverlayOpacity:.8 - This thumbnails overlay opacity. A number from 0 to 1.
- thumbnailIconWidth:30 - This thumbnails buttons width.
- thumbnailIconHeight:29 - This thumbnails buttons height.
- spaceBetweenThumbanilIcons:29 - Horizontal space between thumbnails buttons in px.
- spaceBetweenTextAndIcons:10 - Vertical space between the thumbnails HTML content / text amd buttons in px.

#### Presets ELEVEN and FOURTEEN

Please open with a text editor dv-11 and dv-14 files as reference.

These presets allow to add text / HTML content and / or buttons to thumbnails and display it by default and hide it when the thumbnail is selected, all available parameters are explained below.

- preset:"scaleTextInverse" - The preset type.
- textVerticalAlign:"center" - the HTML content / text and / or buttons position. This can be top, center or bottom
- useIconButtons:"no" - This shows or hides the buttons that opens the lightbox. This can be yes or no.
- thumbnailOverlayColor:"#FFFFFF" - This thumbnails overlay color.
- thumbnailOverlayOpacity:.8 - This thumbnails overlay opacity. A number from 0 to 1.
- thumbnailIconWidth:30 - This thumbnails buttons width.
- thumbnailIconHeight:29 - This thumbnails buttons height.
- spaceBetweenThumbanilIcons:29 - Horizontal space between thumbnails buttons in px.
- spaceBetweenTextAndIcons:10 - Vertical space between the thumbnails HTML content / text amd buttons in px.

#### Preset TWELVE

Please open with a text editor dv-12 as reference.

This preset allows to add one or two blocks of html content / text, the first one is always visible and the second becomes visible only when the thumbnail is hovered / selected, also it is possible to have only one block of text / HTML content that is always visible, all available parameters are explained below.

- preset:"media" - The preset type.
- textVerticalAlign:"bottom" - the HTML content / text and / or buttons position. This can be top or bottom
- thumbnailOverlayColor:"#FFFFFF" - This thumbnails overlay color.
- thumbnailOverlayOpacity:.8 - This thumbnails overlay opacity. A number from 0 to 1.

#### Preset THIRTEEN

Please open with a text editor dv-13 as reference.

This preset allows to add text / HTML content and buttons to thumbnails that are revealed when the thumbnail is hovered / selected..

- preset:"media2" - The preset type.
- textVerticalAlign:"center" - the HTML content / text and / or buttons position. This can be top or bottom
- useIconButtons:"no" - This shows or hides the buttons that opens the lightbox. This can be yes or no.
- thumbnailOverlayColor:"#FFFFFF" - This thumbnails overlay color.
- thumbnailOverlayOpacity:.8 - This thumbnails overlay opacity. A number from 0 to 1.
- thumbnailIconWidth:30 - This thumbnails buttons width.
- thumbnailIconHeight:29 - This thumbnails buttons height.
- spaceBetweenThumbanilIcons:29 - Horizontal space between thumbnails buttons in px.
- spaceBetweenTextAndIcons:10 - Vertical space between the thumbnails HTML content / text amd buttons in px.

#### Preset FIFTEEN

Please open with a text editor dv-15 as reference.

This preset allows to add text / HTML content and buttons to thumbnails that are revealed when the thumbnail is hovered / selected based on the entry angle.

- preset:"scaleTextInverse" - The preset type.
- textVerticalAlign:"center" - the HTML content / text and / or buttons position. This can be top or bottom
- useIconButtons:"no" - This shows or hides the buttons that opens the lightbox. This can be yes or no.
- thumbnailOverlayColor:"#FFFFFF" - This thumbnails overlay color.
- thumbnailOverlayOpacity:.8 - This thumbnails overlay opacity. A number from 0 to 1.
- thumbnailIconWidth:30 - This thumbnails buttons width.
- thumbnailIconHeight:29 - This thumbnails buttons height.
- spaceBetweenThumbanilIcons:29 - Horizontal space between thumbnails buttons in px.

#### Preset SIXTEEN

Please open with a text editor dv-14 as reference.

This preset allows to add text / HTML content and buttons to thumbnails that are revealed when the thumbnail is hovered / selected with a simple animation.

- preset:"animtext" - The preset type.
- textVerticalAlign:"center" - the HTML content / text and / or buttons position. This can be top or bottom
- useIconButtons:"no" - This shows or hides the buttons that opens the lightbox. This can be yes or no.
- thumbnailOverlayColor:"#FFFFFF" - This thumbnails overlay color.
- thumbnailOverlayOpacity:.8 - This thumbnails overlay opacity. A number from 0 to 1.
- thumbnailIconWidth:30 - This thumbnails buttons width.
- thumbnailIconHeight:29 - This thumbnails buttons height.
- spaceBetweenThumbanilIcons:29 - Horizontal space between thumbnails buttons in px.

### G) Setup Facebook app (required for Facebook share or loading Facebook albums inside the grid) - top

In order to display a Facebook album a Facebook app key is required, this key is obtained by setting up a Facebook app as follows:

- Login into your Facebook account.
- Open the following link https://developers.facebook.com/apps
- From the top bar menu select My Apps - > Add New App then select Website and set the app name.
- After this the app can be found by oppening the My Apps from the menu. In the Settings section set the website url where the grid is used, example in the image below, also in this screen the App ID and App Secret can be seen.

- Last step is to select from the left menu bar Status & Review, in this page there is a button that is referring to "Do you want to make this app and all its live features available to the general public?" that must be set to yes, example in the below image.

One important thing to note is that the Ultimate Grid Pro domain name must be identical with the url passed to the Facebook app, for example if the Ultimate Grid Pro domain name is http://www.some-domain.com and the Facebook app is configured with the url/domain name http://some-domain.com it will not work, both url / domain names must be exactly the same.

### H) API specifications - top

Inside the start file there is a HTML file called UGPAPI-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 | Updates the category based on the categoryId, the counting starts from 0.
getCategoryName | getCategoryName():Array | Returns an array with all categories names.
getCategoryId | getCategoryId():Array | Returns an array with the selected categories id or id's.

Event listeners:

Event | Prefix | Description
--- | --- | ---
ready | FWDVUGP.READY | Dispatched when UGP API is ready to be used.
categoryUpdate | FWDVUGP.CATEGORY_UPDATE | Dispatched when UGP a category is changed.
showStart | FWDVUGP.LIGHTBOX_SHOW_START | Dispatched when UGP lightbox starts to show.
showComplete | FWDVUGP.LIGHTBOX_SHOW_COMPLETE | Dispatched when UGP show animation is complete.
hideStart | FWDVUGP.LIGHTBOX_HIDE_START | Dispatched when UGP lightbox starts to hide.
hideComplete | FWDVUGP.LIGHTBOX_HIDE_COMPLETE | Dispatched when UGP hide animation is complete.

### I) Sources and Credits - top

This plugin was made by Tibi from FWDV (FWDVesign) Future Web Design, for more information and support contact us at tibi_diablo@yahoo.com

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.

FWDVesign

Go To Table of Contents