Gridd Template

GRIDD XML Template, is a versatile XML driven flash template to showcase any work on a creative way, featuring a grid layout, which is fill of thumbnails that can be link to an Image, External Flash, Mp3, Link. With this you have a wide range of possibilities on how the end looks can be and functionality.

With 9 modules included you can customize to a different with no effort:

Image Gallery
About US
News
Video Gallery
YouTube Gallery
Mp3 Gallery
Background Audio
Link
Contact Form

Main Features

Fully customizable via XML files.
Multifunction Grid format, you define what does each thumbnail represent (Image, Video, SWF , Audio Files, Links, YouTube Video).
All text can be edited (or translate to other language), add html tags.
DEEPLINKING is embedded, so every image or SWF has a unique web address you can link directly back to.
SOE friendly since all thumbs can be link directly.
Control thumbnail navigating with mouse click, mouse wheel or keyboard.
Image slideshow player with timer & controls.
Define Image Zoom and user selectable map image.
Set grid appearance with thumbs in Color or B&W.
Personalize template with your logo, colors and contents.
Add Social Network links.
Auto Image Scale on resize.

General Configuration Settings:

Here you can configure the layout and look of the template, in the help file included your find the ranges and recomendation for each value so you feel more confortable playing with the settings.

//main configuration settings
textLoading = Add legend to a big image loader
splahImage = Logo image name
rows = Number of rows in the thumbnail grid
colums = Number of colums in the thumbnail grid
borderW = Spacing in pixels between thumbnails
scaledThums = Indicates if you want to shuffle or randomize the  original order of the thumbnails, according to the XML.
randomposition = Indicates if you want to have a sequential or random  thumbnail appearance in the grid.
imagePath = Indicates the thumbnail directory
bigimagePath = Indicates the Big Images directory
bgColor = Background color

//images slideshow player settings
slideshow = Indicate if you want to activate the image slidewshow function and show it controls
updateHours = Indicates slide show hours between images
updateMinutes = Indicates slide show minutes between images
updateSeconds = Indicates slide show seconds between images
showzoom = Indicate image zoom is alowed
zoomPorcent = Indicates the image zoom porcent when activated

//footer
showFooter = Indicates if you want to show the page footer (this footer holds the social icons, volumen control, fullscreen button and credits
playerON = Indicates id the background music player is activated or not (the external audio player is not afected by this setting)
site_Url = Add a link to the footer credits
copyWrite = Add footer credits text
copyWriteColor = Add Footer credits text color
socSpacing = Indicates spacing in px between social networks icon in footer

//audio settings
audioON = Indicates if the background music player is activated or not (the external audio player is not afected by this setting)
vol = Indicates the starting background music volume level
audioPath = Indicates the directory where the bacground music file is
audioTrack = Indicates the background music mp3 file name

Social Icons Configuration Settings:

//Social Icon settings
nameS = Indicates icon Rollover text
iconS = Indicates location if the social network icon
icon_link = Indicates the link to go when the icon is press

Thumbnail Configuration Settings:

//Thumbnail settings
name = Indicates the title of the thumbnail
thumb = Indicates the file name of the thumbnail
loadItem = Indicates the name of the big image
BW = Make thumbnail Black & White as the starting color
zoomIn = Allow big image to be zoom-in?<br /><![CDATA[Add Your Text, special characters and HTML tags here, html tag must be declared in the style.css file]]>    <br />

Modules

Image Gallery

This module is the main feature of the template, and is the only module integrated into main Flash, this is responsible for the layout of all thumbs, appearance and menus. For either the thumbnails or big images you can use PNG , JPG and GIF files.

Image Gallery Configuration Settings:

//Thumbnails Settings
name = Indicates the title of the thumbnail
thumb = Indicates the file name of the thumbnail
loadItem = Indicates the name of the big image
BW = Make thumbnail Black & White as the starting color
zoomIn = Allow big image to be zoom-in?<br /><![CDATA[Add Your Text, special characters and HTML tags here, html tag must be declared in the style.css file]]>

Text & Images

This module has automatic scroller show feature, it can be resize & color customize, you can add html tags to text and special characters.

Text & Images Configuration Settings:

title = Indicates the title of this module
width = Indicates the width of this module
height = Indicates the heigth of this module
bar_thickness = Indicates the widht of the scroller ans scroller bar 
bar_color = Indicates the scroller bar color
scroller_color = Indicates the scroller color
scrollSpeed = Indicates the text scrolling speed
bgcolor = Indicates the module background color
<![CDATA[Add Your Text, special characters and HTML tags here, html tag must be declared in the style.css file]]>

News

This module is a modern news reader with automatic scroller show feature, list headlines first, and after you select one view in full window, you can add html tags to text and special characters.

News Configuration Settings:

title = Indicates the title of this module
width = Indicates the width of this module
height = Indicates the height of this module
bar_thickness = Indicates the widht of the scroller ans scroller bar 
bar_color = Indicates the scroller bar color
scroller_color = Indicates the scroller color
scrollSpeed = Indicates the text scrolling speed
bgcolor = Indicates the module background color
Title = News title for this news
Published = Indicates the publising date or any other title you want
<![CDATA[Add Your Headline Text, special characters and HTML tags here, html tag must be declared in the style.css file]<br />
<![CDATA[Add Your Full News Text, special characters and HTML tags here, html tag must be declared in the style.css file]]

Video Player

This is a Flash Video player, and can play as many files you configure in the xml file. The video player works with Flash Videos (FLV), you can resize the video window to any dimensions of your video, 4:3 or wide screen.

Video Player Configuration Settings:

videoW = Indicates the widht of the video window in px
videoH = Indicates the height of the video window in px  
autoplay = Auto start video after loading module?
repeat = Repeat played video when finish?
bgcolor = Indicates module background color
Volumen = Indicates video starting volume
video_ = Indicates the name of the Flah Video
videoTitle = Indicates the title of the vodeo
video_link = Indicates if the video has a hyperlink?
<![CDATA[Add Your Full News Text, special characters and HTML tags here, html tag must be declared in the style.css file]]

MP3 Player

This module is a Mp3 player, and can play as many files you configure in the xml, and you can add ans representative image for each mp3 track like an album cover.

MP3 Player Configuration Settings:

autoplay = Auto start mp3 file after loading module?
repeat = Repeat played mp3 when finish?
width = Indicates module widht in px
height = Indicates module height in px
bgcolor = Indicates module background color
Volumen = Indicates mp3 starting volume

song = Indicates mp3 fielname
songTitle = Indicates the Mp3 title
albumcover = Indicates a representing image for the mp3 
albumcover_link = Add a link to the albumcover
<![CDATA[Add Your Full News Text, special characters and HTML tags here, html tag must be declared in the style.css file]]>

YouTube Player

This module is a YouTube player, and can play as many videos you configure in the xml, we use YouTube Flash API to call and control the player behavior.
Just add embeding link for each video.

YouTube Player Configuration Settings:

autoplay = Auto start video after loading module?
repeat = Repeat played video when finish?
Volumen = Indicates video starting volume
bgcolor = Indicates module background color 
youtubeVideo = Indicates the embeding link for a youtube video

Single MP3 Files

This is a link to an mp3 file; that will play in instead of the background music. The file type is automatically detected it’s send to the music player. Note: audioplayer in the main file must be enabled.

Single MP3 Configuration Settings:

name = Indicates the title of the thumbnail
thumb = Indicates the file name of the thumbnail
loadItem = Indicates the mp3 file name to be played instead of the original background music file
BW = Make thumbnail Black & White as the starting color
zoomIn = Allow big image to be zoom-in?

Links

This is a simple hyperlink located at the thumbnail, same as with the single audio file, the link is automatically detected and send to getURL with “_blank” as default. No other action will be generated.

Link Configuration Settings:

name = Indicates the title of the thumbnail
thumb = Indicates the file name of the thumbnail
loadItem = Indicates the hyper link for this thumbnail
BW = Make thumbnail Black & White as the starting color
zoomIn = Allow big image to be zoom-in?

Contact Form & Map

This is not the typical contact form, we added and interactive map to it, that can be any image (png, jpg or gif), and it can be panned just by hovering over the image, it will auto detect the image edges and set the hover boundaries, you can also activate the zoom tool and see your map in more detail.
The contact form uses PHP mail function to send email from your server.

Map starting coordinate locator. This is a tool that will help you identify a desired starting coordinate for your map. Just press SHIFT +A at run time and you’ll see the map coordinates above the map, use this values and add the to the XML file.

Contact Form & Map Configuration Settings:

<p>title = Indicates the Contact form title
bgcolor  = Indicates de module background color
width = Indicates this module width
height = Indicates this module height
map  = Indicates the map file name
movemap  = Allow map to be moved by mouse hover ?
showzoom  = Allow map zoom-in when clicked?
zoomPorcent  = Indicates zoom-in porcentage
startX  = Indicates a starting X coordinate for the map
startY  = Indicates a starting Y coordinate for the map</p>

CREDITS :

IMAGES ,
some images used in this template preview but not included in file are distributed and license by http://www.photos8.com, please support them.
VIDEOS Loops shown:
Bold Titles Logo Revealer by placdarms
YOUTUBE videos,
Are link from official/authorize artist feeds.
SOCIAL icons,
I used the social media icons distributed by www.komodomedia.com Please make a donation like I did if you plan to use them on your project.

MC also includes: