Creating A Photo Carousel using Flashmo 230 carousel

Jul 1, 2011

0 22015

flashmo 230 carousel - flash photo carousel

Photo carousel with flashmo. Today we will continue overviews of available flash galleries. Next gallery will flashmo 230 carousel. This gallery display carousel of images by circle. We can easy interact with images with mouse (clicking at images, use slider to shoft carousel. Carousel have light weight (about 24kb). Also we have possibility to have customized image descriptions too.

One of the most important features of this carousel – 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 carousels 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 230 carousel demo | Script Tutorials (2011)</title>
        <style type="text/css" media="screen">
            html, body, #f_carousel
            { height:100%; }
            body
            { margin:0; padding:0; overflow:hidden; }
        </style>
        <script type="text/javascript" src="js/swfobject.js"></script>
        <script type="text/javascript">
        var flashvars = {
            xml_file: 'feed.php'
        };
        var params = {
            allowfullscreen: true
        };
        var attributes = {};
        swfobject.embedSWF('app/flashmo_230_carousel.swf', 'f_carousel', '100%', '100%', '9.0.0', false, flashvars, params, attributes);
        </script>
    </head>
    <body>
        <div id="f_carousel">
            <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 very easy – all through swfobject, where we can set all necessary params: xml_file, allowfullscreen. First is file name, which will generate us carousel images info in necessary format.

Here are necessary JS initialization again (only js):

    var flashvars = {
        xml_file: 'feed.php'
    };
    var params = {
        allowfullscreen: true
    };
    var attributes = {};
    swfobject.embedSWF('app/flashmo_230_carousel.swf', 'f_carousel', '100%', '100%', '9.0.0', false, flashvars, params, attributes);

Step 2. CSS

Here are used CSS file for our demo (so we can define styles for text of description):

css/flashmo_styles.css

p {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #DDDDDD;
}

Step 3. JS

Here are single JS file:

js/swfobject.js

This is just SWFObject class. 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>
    <tooltip>{title}</tooltip>
    <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 show_tooltip="true" follow_mouse="false" folder="{$sFolder}" css_file="css/flashmo_styles.css" tween_duration="0.5" rotation_speed="4" radius_x="300" radius_y="60" tn_border_size="3" tn_border_color="0xDDDDDD" photo_border_size="10" photo_border_color="0xFFFFFF" bar_status="1" dragger_x="0" dragger_y="220">
    </config>
    {$sCode}
</photos>
EOF;
?>

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>
    <tooltip>{title}</tooltip>
    <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'
);

Of course, you don`t need this if you making gallery with different sets of images. In that case I can suggest you to use 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 show_tooltip="true" follow_mouse="false" folder="{$sFolder}" css_file="css/flashmo_styles.css" tween_duration="0.5" rotation_speed="4" radius_x="300" radius_y="60" tn_border_size="3" tn_border_color="0xDDDDDD" photo_border_size="10" photo_border_color="0xFFFFFF" bar_status="1" dragger_x="0" dragger_y="220">
    </config>
    {$sCode}
</photos>
EOF;

Done, our generator ready!

Step 5. SWF application

app/flashmo_230_carousel.swf

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