Creating Mega grid image gallery
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
download in package
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 | Script Tutorials (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
download in package
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!
Related Articles
Animated Photo Gallery (grid) with javascript
Creating a Photo Scrambler grid in javascript
Creating A Globe Shaped Photo Gallery using 3D Sphere Gallery FX
Hi Andrew… I was wondering if you found any way to use XML for loading galleries and texts from external XML file in both Flash and HTML so to be able to make HTML and coexist. Im so surprised to not see any implementation in such a direction, sounds like a strategy to kill Flash to me, at cost of putting at risk a most client-friendly approach. I hope my point sounds clear enough, I would like to find a nice tutorial with some experimentation about that. I’m not a coder and i would like to focus on a more creative approach instead of losing myself to learn a different way of doing something XML and Flash already allow to do. I’m used to test websites on an old machine with XP and a RAM of 512MB only and I must say, honestly, that Flash runs still faster than any other approach, specially with those damned ‘CPU-killers’ called ‘webkits’. We should think not only about youngsters with ROG machines {I’m a 39yo guy with an Asus G75VW notebook with 3D display myself!}, ‘iAddicts’ and Galaxy III astronauts… but also about the unlucky ones with an old-generation wreckage of a PC… there are plenties still around the world!
I know my words sounds like concerned a lot but probably we all seriously need a brand new social-friendly truly responsible manifesto…