“Infinite Grid Pro ” Documentation by FWDesign

---

“Infinite Grid Pro”

---

Table of Contents

1. IMPORTANT NOTES - read this before anything else
2. Preparing thumbnails and images
3. Infinite Grid Pro installation
4. Constructor parameters
5. Setup categories / playlists
6. Setup Facebook share button
7. API specifications
8. Sources and Credits

---

A) IMPORTANT NOTES - make sure you read this! - top

Please note that the IGP 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 IGP settings are identical to those from the provided examples.

IGP requires a minimum of 9 thumbnails in each category.

In the examples provided as reference we have used only 9 images per category to keep it simple and understandable this is why the thumbnails are repeating so often, the more thumbnails are added in the playlist the less there is a chance of the same thumbnail to repeat.

When something is wrong with a IGP action a red info box with the problem description will appear at the window top left corner, please note that this box is there to help you understand the problem, for example if an image is not found the box will appear and inform you about the problem. The box will hide when navigating to another item.

The IGP skin 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!

B) Preparing thumbnails and images! - top

Coding this grid was a challenge, first because the logic behind the code is complex and second and the most difficult part is that IGP is pushing the browser capabilities to its limits, it was extremely difficult to make it work. We strongly advice to use the same thumbnail and image settings and sizes that we've used. Inside the IGP constructor set the thumbnailMaxWidth:210 and thumbnailMaxHeight:190, these parameters represent the maximum initial thumbnails width and height when the thumbnails are first showed and the scale is 1 (no scale). Make sure that your thumbnails images width is 308px and the height is 206px, of course they can be modified but if the thumbnails width or height are higher then 320px in Chrome some rendering glitches can appear if there are too many image pixels to render, the other browsers are working fine no matter what sizes are used. The large images the ones that are showed using the lightbox make sure that they are not larger than 1500px in width or height, again you can use higher resolution images but it will make the grid slower.

If you want to use your own custom size thumbnails they should be saved as follow, first set the thumbnailMaxWidth and thumbnailMaxHeight parameters to your desired thumbnails size, based on this the thumbnails images must be saved as follows, width = thumbnailMaxWidth * 1.4 and height = thumbnailMaxHeight * 1.4 (this parameters represents the maximum initial thumbnails width and height when the thumbnails are first showed and the scale is 1 (no scale)).

C) Infinite Grid Pro installation - top

IGP has multiple display types (fluid width, responsive, fixed, fullscreen, after parent), each display type is explained in detail below.

Responsive installation

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 responsive-minimal-skin.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. Keep only the skin folder that you need to save space on the server.
• Open responsive-minimal-skin.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 IGP 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 IGP constructor, make sure it is unique. The IGP is responsive as follows, the width and height will adapt based on the maxWidth and maxHeight properties specified in the constructor, if the page is resized and the parent div width is smaller then the maxWidth property IGP will adapt it's size accordingly. If autoScale property is set to yes the grid will modify it's height to keep a correct aspect ratio.
• 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 IGP parameter playlistId:myPlaylist. For more info about how to create categories / playlists please read Setup categories / playlists.

			

				

					

						

							
Infinite Grid Pro
							
Multimedia infinite 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.
						
					
					

						

							
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.
						
					
					

						

							
Support for unlimited categories!
							
Supports unlimited categories and each categories can have unlimited content.
						
					
					

						

							
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.
						
					
					

						

							
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.
						
					
					

						

							
Support for four display types
							
Support for four display types, responsive, fixed, fullscreen and fluid width.
						
					
					

						

							
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.
						
					
					

						

							
Customizable drag
							
Customizable drag, the grid drag direction can be set to horizontal, vertical, both or none.
						
					
					

						

							
Auto scroll
							
Auto scroll, the grid can be set to auto scroll, the auto scroll direction and speed are customizable.
						
					
				
				
				

					

						

							
Infinite Grid Pro
							
Multimedia infinite 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.
						
					
					

						

							
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.
						
					
					

						

							
Support for unlimited categories!
							
Supports unlimited categories and each categories can have unlimited content.
						
					
					

						

							
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.
						
					
					

						

							
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.
						
					
					

						

							
Support for four display types
							
Support for four display types, responsive, fixed, fullscreen and fluid width.
						
					
					

						

							
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.
						
					
					

						

							
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.
						
					
					

						

							
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.
						
					
				
			

• Next step is to initialize IGP 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 IGP is installed in a HTML page, please read the Constructor parameters section, it will explain all settings in details.

Fluid width installation

This display type is resizing IGP width to fill the available browser width and keep the height fixed or fluid based on the maxWidth and autoScale properties. To use this display type follow the same installation steps from Responsive installation section, the only difference is the displayType property which must be set to fluidWidth like this displayType:fluidWidth. In the start folder there are two html files whose names are starting with fluid-width, you can use them as reference.

Fullscreen installation

This display type is resizing IGP width and height to fill the available browser viewport. To use this display type follow the same installation steps from Responsive installation section, the only difference is the displayType property which must be set to fullScreen like this displayType:fullScreen. In the start folder there are two html files whose names are starting with fullscreen, you can use them as reference.

Atter parent installation

This display type is resizing IGP width and height to fill the available parent div width and height, this is really useful if you have a responsive div and you want IGP to resize based on it's size. To use this display type follow the same installation steps from Responsive installation section, the only difference is the displayType property which must be set to afterParent like this displayType:afterParent. In the start folder there are two html files whose names are starting with after-parent, you can use them as reference.

D) Constructor parameters - top

Please open responsive-minimal-skin.html with a text editor as reference. These parameters represents the possible setting of IGP, 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:"myIGP" - represents the IGP instance name, this is used to access API methods.
• parentId:"myDiv" - represents the div into which IGP 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.
• skinPath:"minimal-skin" - The skin path, the name of the folder that contains the skin, this folder must always be inside the mainFolderPath folder.
• playlistId:"myPlaylist" - The IGP categories / playlist id, for more info read Setup categories / playlists.
• displayType:"responsive" - this can be fluidWidth, responsive, fullScreen or afterParent.
• dragDirection:"both" - represents the grid drag direction, it can both, horizontal, vertical or none
• autoScrollDirection:"left" - represents the grid autoscroll direction, it can down, up, left or right.
• thumbnailTransitionType:"opacity" - represents the thumbnail image transition type when it first appears, it can opacity or motion.
• allCategoriesLabel:"All Categories (mixed)" - 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.
• autoScale:"yes" - this can be yes or no. If set to yes the IGP height will always be proportional to the IGP width, if set to no the height will be fixed based on the maxHeight property.
• autoScroll:"yes" - this can be yes or no. If set to yes the IGP will auto scroll in the direction set in the autoScrollDirection.
• enableVisitedThumbnails:"no" - this can be yes or no. If set to yes the the thumbnails visited will have a reduced opacity this way the user can see which thumbnails content was viewed.
• keepThumbnailsOriginalSizeOnGridStart:"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 maxWidth and height equal to maxHeight. If set to no when the grid is initialized the thumbnails will be resized to fill the entire grid without cutting the thumbnails, this means that they will have a smaller or equal size then maxWidth and maxHeight.
• addZoomSupport:"yes" - this can be yes or no. Enable or disable zoom on desktop machines and pinch & zoom on mobile devices.
• addDragAndSwipeSupport:"yes" - this can be yes or no. Enable or disable drag and swipe.
• disableThumbnailInteractivity:"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.
• randomizeAllCategories:"no" - this can be yes or no. If this is set to yes the all categories will be randomized.
• 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.
• showThumbnailOverlay:"yes" - this can be yes or no. Show or hide the thumbnail overlay when a thumbnail is hovered.
• showThumbnailIcon:"yes" - this can be yes or no. Show or hide the thumbnail small media icon when a thumbnail is hovered.
• showHelpScreen:"yes" - this can be yes or no. Show or hide the intro help screen that appears over IGP.
• startAtCategory:1 - an integer that represents the category first category number that will be loaded, the counting starts from 0 (zero).
• maxWidth:1 - an integer that represents the category first category number that will be loaded, the counting starts from 0 (zero).
• maxWidth:750 - a number that represents the IGP maximum width in pixels, think of this property as it would be the max-width css property (only applies if the displayType is responsive).
• maxHeight:550 - a number that represents the IGP maximum height in pixels, think of this property as it would be the max-height css property (only applies if the displayType is responsive).
• thumbnailMaxWidth:210 - a number that represents the thumbnails maximum width, when IGP initializes the first time it's sets a start thumbnail width based on this parameter, the thumbnail initial width will never be larger then the parameter value.
• thumbnailMaxHeight:190 - a number that represents the thumbnails maximum height, when IGP initializes the first time it's sets a start thumbnail height based on this parameter, the thumbnail initial height will never be larger then the parameter value.
• maxScale:1.6 -the maximum allowed scale when the grid is zoomed.
• minScale:.8 -the minimum allowed scale when the grid is zoomed, please note that the minimum scale is too small and too many thumbnails are showed the IGP will perform poorly and in Chrome some rendering glitches might appear, we recommend to use the same settings that we've used in the examples provided, please read Preparing thumbnails and images!.
• autoScrollSpeed:1 - an integer that represents the autoscroll speed in px.
• thumbnailOverlayOpacity:.7 - an float number from 0 to 1.
• helpScreenOpacity:.7 - an float number from 0 to 1.
• backgroundColor:#000000 - the main background color.
• thumbnailBackgroundColor:#111111 - the thumbnails background color.
• thumbnailOverlayColor:#000000 - the thumbnails overlay color.
• helpScreenBackgroundColor:#000000 - the help screen background color.

//combobox settings

• selectLabel:"SELECT CATEGORIES" - The combobox default label.
• comboBoxPosition:"yes" - This can be topleft or topright.
• showComboBox:"yes" - this can be yes or no.
• comboBoxHorizontalMargins:20 - Horizontal margins/offset in pixels for the combobox.
• comboBoxVerticalMargins:20 - Vertical margins/offset in pixels for the combobox.
• comboBoxCornerRadius:20 - Corner radius in pixels for the combobox.
• selctorBackgroundNormalColor:"#FFFFFF" - The combobox main button background normal color.
• selctorBackgroundSelectedColor:"#000000" - The combobox main button background selected color.
• selctorTextNormalColor:"#000000" - The combobox main button text normal color.
• selctorTextSelectedColor:"#000000" - The combobox main button text selected color.
• buttonBackgroundNormalColor:"#FFFFFF" - The combobox buttons background normal color.
• buttonBackgroundSelectedColor:"#000000" - The combobox buttons background selected color.
• buttonTextNormalColor:"#000000" - The combobox buttons text normal color.
• buttonTextSelectedColor:"#000000" - The combobox buttons text selected color.
• comboBoxShadowColor:"#000000" - The combobox shadow color.

//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 share button please read Setup facebook share button.
• 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.

E) Setup categories / playlists - top

Please open with a text editor the responsive-minimal-skin.html file as reference.

In this section is explained how to setup a playlist with two categories. There are 9 content types (image, video, audio, youtube, vimeo, flash, google maps, iframe, link) that the IGP 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 two categories. Please note that at least 9 playlist items must be present in a playlist. To add a category add inside the 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.

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 IGP and it must be set to the playlistId property like this playlistId:"myPlaylist".

			

				

					

						

							
Infinite Grid Pro
							
Multimedia infinite 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.
						
					
					

						

							
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.
						
					
					

						

							
Support for unlimited categories!
							
Supports unlimited categories and each categories can have unlimited content.
						
					
					

						

							
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.
						
					
					

						

							
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.
						
					
					

						

							
Support for four display types
							
Support for four display types, responsive, fixed, fullscreen and fluid width.
						
					
					

						

							
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.
						
					
					

						

							
Customizable drag
							
Customizable drag, the grid drag direction can be set to horizontal, vertical, both or none.
						
					
					

						

							
Auto scroll
							
Auto scroll, the grid can be set to auto scroll, the auto scroll direction and speed are customizable.
						
					
				
				
				

					

						

							
Infinite Grid Pro
							
Multimedia infinite 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.
						
					
					

						

							
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.
						
					
					

						

							
Support for unlimited categories!
							
Supports unlimited categories and each categories can have unlimited content.
						
					
					

						

							
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.
						
					
					

						

							
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.
						
					
					

						

							
Support for four display types
							
Support for four display types, responsive, fixed, fullscreen and fluid width.
						
					
					

						

							
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.
						
					
					

						

							
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.
						
					
					

						

							
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.
						
					
				
			

Image type:

The data-thumbnail-path attribute represents the thumbnail path, the data-url attribute represents the image path. If you don't need description leave the inner html empty in this case remove the inner div.

		

				

					
Infinite Grid Pro
					
Multimedia infinite 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-thumbnail-path attribute represents the thumbnail path, the data-url attribute represents the video path, IGP 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, IGP supports two poser paths, one for desktop and one for mobile, the paths are separated by comma, the mobile poster path is optional. If you don't need description leave the inner html empty in this case remove the inner div.

			

					

						
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-thumbnail-path attribute represents the thumbnail path, the data-url attribute represents the mp3 path, the data-width represents the maximum audio player width. If you don't need description leave the inner html empty in this case remove the inner div.

			

				

					
Support for unlimited categories!
					
Supports unlimited categories and each categories can have unlimited content.
				
			

Youtube type:

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 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-thumbnail-path attribute represents the thumbnail path, the data-url attribute represents the vimeo video url. The data-width and data-height represents the maximum video width and height. If you don't need description leave the inner html empty in this case remove the inner div.

			

				

					
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-thumbnail-path attribute represents the thumbnail path, the data-url attribute represents the flash swf path. The data-width and data-height represents the maximum item width and height. If you don't need description leave the inner html empty in this case remove the inner div.

		

				

					
Support for four display types
					
Support for four display types, responsive, fixed, fullscreen and fluid width.
				
			

Google maps type:

The data-thumbnail-path attribute represents the thumbnail path, the data-url attribute represents the google maps url. The url can be created at this link, google provided a tool to create maps, just add your location and an embed code will be generated, from the embed code copy the src value and paste it as a value of the data-url attribute. The data-width and data-height represents the maximum item width and height. If you don't need 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.
				
			

Iframe type:

The data-thumbnail-path attribute represents the thumbnail path, the data-url attribute represents the url of the page to load in the iframe. The data-width and data-height represents the maximum item width and height. If you don't need description leave the inner html empty in this case remove the inner div.

		

				

					
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-thumbnail-path attribute represents the thumbnail path, the data-url attribute represents the url the web page to open when the thumbnail is clicked, the data-target attribute represents the url target (_self or _blank). The data-width and data-height represents the maximum item width and height. If you don't need description leave the inner html empty in this case remove the inner div.

		

				

					
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.
				
			

F) Setup Facebook share button - top

In order for the facebook share button to function 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 Apps - > Create New App button and complete the fields, it's not important the values passed to the display name and namespace fields, the only requirement is that in the category drop down box to select "Apps for pages".
• A new page will appear, in this page from the left menu bar select Settings. The Settings page will open, in this page the App ID is displayed, this id must be passed into the Infinite Grid Pro constructor as follows facebookAppId:your app id here, example in the below image.

• Next step is to click the Add Platform button and from the popup window click on the Website icon.
• A new entry will be added in the Settings page labeled Website, in this tab set the Site URL and the Mobile Site URL to the domain name where the player is uploaded, example in the below image.
• After this additions make sure you save the changes by pressing the Save Changes button.

• 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 Infinite Grid Pro domain name must be identical with the url passed to the facebook app, for example if the Infinite 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.

G) API specifications - top

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
getCategoryName	getCategoryName(categoryId:int):String	Returns the current category name, it has an optional parameter that allows to get the category name based on id, for example if you need the second category name this method can be called like this myIGP.getCategoryName(1);.
getCategoryId	getCategoryId():Number	Returns the current category id, starting from 0 (zero).

Event listeners:

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

H) Sources and Credits - top

This plugin was made by Tibi from FWD (FWDesign) Future Web Design, for more information and support contact us at contact@webdesign-flash.ro

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 Infinite Grid Pro and I'll do my best to assist.

FWDesign

Go To Table of Contents

---