Mega grid image gallery tutorial. Today we will continue overviews of available flash galleries. Next gallery will Flashmo 249 Mega Grid. This gallery display grid of images from left to right. Here are also horizontal scroll bar. Also we can set custom params like thumb size, thumb gap, photo border size, black/white for thumbs, descriptions etc. This gallery have light weight (about 35kb). Also we have possibility to have customized image descriptions too (using tags: A, P, SPAN etc).
One of the important features of this Mega Grid gallery – possibility to obtain necessary gallery info through PHP file (as xml source of used images). It will allow us to generate different sets of images (in case if this is as Mega Grids of different members as example). Interesting?
Here are samples and downloadable package:
Live Demo
[sociallocker]
download in package
[/sociallocker]
Ok, download the example files and lets start coding !
Step 1. HTML
As usual, we start with the HTML. This is whole source code of our sample:
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Flashmo 249 Mega Grid demo | Dev School (2011)</title>
<style type="text/css" media="screen">
html, body
{ height:100%; }
body
{ margin:0; padding:0; overflow:hidden; }
</style>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/swffit.js"></script>
<script type="text/javascript">
var flashvars = {
xml_file: 'feed.php'
};
var params = {
allowfullscreen: true
};
var attributes = {
id: 'flashmo_template',
name: 'flashmo_template'
};
swfobject.embedSWF("app/flashmo_249_mega_grid.swf", "flashmo_template", "100%", "100%", "9.0.0", false, flashvars, params, attributes);
swffit.fit("flashmo_template", 600, 600);
</script>
</head>
<body>
<div id="flashmo_template">
<div id="alternative_content">
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
</div>
</body>
</html>
Initialization is quite standard – all through swfobject, where we can set all necessary params: xml_file, allowfullscreen. First one is file name, which will generate us images info in necessary format for that gallery. Here are only one changes – we will using ‘swffit’ now too (for adding scrollers to browser if need).
Here are necessary JS initialization again (only js):
var flashvars = {
xml_file: 'feed.php'
};
var params = {
allowfullscreen: true
};
var attributes = {
id: 'flashmo_template',
name: 'flashmo_template'
};
swfobject.embedSWF("app/flashmo_249_mega_grid.swf", "flashmo_template", "100%", "100%", "9.0.0", false, flashvars, params, attributes);
swffit.fit("flashmo_template", 600, 600);
Step 2. CSS
Here are used CSS file for our gallery demo (so we can define styles for text of description):
css/flashmo_210_style.css
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
a {
color: #CCFF00;
text-decoration: underline;
}
a:hover {
color: #FF6633;
text-decoration: none;
}
.title {
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
color: #FFFFFF;
}
.subtitle {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #FFCC00;
}
.highlight {
color: #CC99FF;
}
.note {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #BBBBBB;
}
Step 3. JS
Here are both JS files:
js/swfobject.js and js/swffit.js
Both files available in our package.
Step 4. PHP
Here are code of our XML generator (to generate xml-based set of using images):
feed.php
<?
$sCode = '';
$sTemplate = <<<XML
<photo>
<thumbnail>{thumburl}</thumbnail>
<filename>{fileurl}</filename>
<description><![CDATA[<p>{title} ({width} x {height})</p>]]></description>
</photo>
XML;
$sFolder = 'data_images/';
$aUnits = array(
'pic1.jpg' => 'Image 1', 'pic2.jpg' => 'Image 2', 'pic3.jpg' => 'Image 3', 'pic4.jpg' => 'Image 4',
'pic5.jpg' => 'Image 5', 'pic6.jpg' => 'Image 6', 'pic7.jpg' => 'Image 7', 'pic8.jpg' => 'Image 8',
'pic9.jpg' => 'Image 9', 'pic10.jpg' => 'Image 10', 'pic11.jpg' => 'Image 11', 'pic12.jpg' => 'Image 12',
'pic13.jpg' => 'Image 13', 'pic14.jpg' => 'Image 14', 'pic15.jpg' => 'Image 15'
);
foreach ($aUnits as $sFileName => $sTitle) {
list ($iWidth, $iHeight, $vType, $vAttr) = getimagesize($sFolder.$sFileName);
$sCode .= strtr($sTemplate, array('{thumburl}' => 'thumb_' . $sFileName, '{fileurl}' => $sFileName, '{title}' => $sTitle, '{width}' => $iWidth, '{height}' => $iHeight));
}
header ('Content-Type: application/xml; charset=UTF-8');
echo <<<EOF
<?xml version="1.0" encoding="utf-8"?>
<photos>
<config
folder="{$sFolder}"
enable_fullscreen="true"
drag_speed="1.5"
thumbnail_complete_fillup="false"
thumbnail_random_scale="true"
thumbnail_black_white="true"
thumbnail_size="192"
thumbnail_gap="1"
photo_border_size="10"
photo_border_color="#FFFFFF"
close_button="true"
previous_button="true"
next_button="true"
description="true"
description_bg_color="#000000"
description_bg_alpha="0.8"
css_file="css/flashmo_210_style.css"
tween_duration="0.5">
</config>
{$sCode}
</photos>
EOF;
?>
Ok, Let’s look at the code in details. Firstly I define template for our image units:
$sTemplate = <<<XML
<photo>
<thumbnail>{thumburl}</thumbnail>
<filename>{fileurl}</filename>
<description><![CDATA[<p>{title} ({width} x {height})</p>]]></description>
</photo>
XML;
You can use different html content for description (as example font tags, link tag etc).
Then, I hardcoded array of used images:
$aUnits = array(
'pic1.jpg' => 'Image 1', 'pic2.jpg' => 'Image 2', 'pic3.jpg' => 'Image 3', 'pic4.jpg' => 'Image 4',
'pic5.jpg' => 'Image 5', 'pic6.jpg' => 'Image 6', 'pic7.jpg' => 'Image 7', 'pic8.jpg' => 'Image 8',
'pic9.jpg' => 'Image 9', 'pic10.jpg' => 'Image 10', 'pic11.jpg' => 'Image 11', 'pic12.jpg' => 'Image 12',
'pic13.jpg' => 'Image 13', 'pic14.jpg' => 'Image 14', 'pic15.jpg' => 'Image 15'
);
Make attention that you don`t need this code in case if you making custom gallery with different sets of images. In that case I can suggest you to use some SQL queries or another ways to obtain info about images. After it – I passing through all our images and filling info about photos within our predefined template:
foreach ($aUnits as $sFileName => $sTitle) {
list ($iWidth, $iHeight, $vType, $vAttr) = getimagesize($sFolder.$sFileName);
$sCode .= strtr($sTemplate, array('{thumburl}' => 'thumb_' . $sFileName, '{fileurl}' => $sFileName, '{title}' => $sTitle, '{width}' => $iWidth, '{height}' => $iHeight));
}
As you can see – I collecting all this into string variable $sCode. In result – we will just echo our result XML:
header ('Content-Type: application/xml; charset=UTF-8');
echo <<<EOF
<?xml version="1.0" encoding="utf-8"?>
<photos>
<config
folder="{$sFolder}"
enable_fullscreen="true"
drag_speed="1.5"
thumbnail_complete_fillup="false"
thumbnail_random_scale="true"
thumbnail_black_white="true"
thumbnail_size="192"
thumbnail_gap="1"
photo_border_size="10"
photo_border_color="#FFFFFF"
close_button="true"
previous_button="true"
next_button="true"
description="true"
description_bg_color="#000000"
description_bg_alpha="0.8"
css_file="css/flashmo_210_style.css"
tween_duration="0.5">
</config>
{$sCode}
</photos>
EOF;
As you can see – here we can set some properties of this gallery like: folder, enable_fullscreen, thumbnail_black_white, thumbnail_gap etc. All of them just changing behavior of grid gallery. Done, our generator ready!
Step 5. SWF application
app/flashmo_249_mega_grid.swf
Its Mega Grid swf file itself. Available in package.
Step 6. Images
All our images located in ‘data_images’ folder. Of course, you can use another directory. Don`t forget to correct feed.php if you want to use another folder for images.
Live Demo
Conclusion
Today I told you how to create new flash Mega Grid gallery. Sure that you will happy to use it in your projects. Good luck!