Photo Flow Flash Gallery

Use the famous streamline photo flow effect on your website. This effect is well known because of the cover flow gallery switching from iTunes.

Help > PhotoFlow Gallery > FAQ

Install & tuning sample of PhotoFlow Flash Gallery

Let’s do a sample of the setting up the gallery

The look & feel customization, adding/removing the images can be done via XML file.

1. Specify the path for the images

<imagesFolder>images/</imagesFolder>

2. Add an image and a description to it

Use low-quality images to force the gallery work faster. In this case low-quality images will be preloaded first and then source images will follow. Low quality images can be specified in a tag <thumb>...</thumb>.

Also you need to specify a source image in a <source>..</source> tag.

<item>

<source>1.jpg</source>
<thumb>1_th.jpg</thumb>
<description>Image 1</description>

</item>

. . . . . . . . . . .

<item>

<source>15.jpg</source>
<thumb>15_th.jpg</thumb>
<description>Image 15</description>
<link>http://www.DomainName/images/15.jpg</link>
<target>_blank</target>

</item>

. . . . . . . . . . .

3. Look & Feel Customization

3.1. Change the size of the image. Specify the width of the focal image. The height of the image depends on the height of the gallery. The size of the gallery needs to be set up in the object HTML code (URL).

3.2. Setup colors for background, slider and preloader

3.2a. The gallery lets you use a built-in color scheme (white, black, red, green…) ie background color, slider color and preloader color will correspond to the specified color.
Color scheme is specified in: <colorScheme>..</colorScheme> tag.

A white scheme is defined in our sample:

<colorScheme>white</colorScheme>

3.2b. If the color schemes are not satisfied then your color scheme can be defined. You need to use a "custom" color scheme in this case:

<colorScheme>custom</colorScheme>

Now you can customize colors of all components:

<preloader stripesAlpha="45" barColor="0x000000" barAlpha="14" bgColor="0x000000" bgAlpha="10" innerShadow="20" dropShadow="30" />
<scrollbar bgColor="0x000000" bgAlpha="20" handleColor="0xffffff" handleAlpha="40" arrowsColor="0xffffff" arrowsAlpha="40" innerShadow="10" dropShadow="0" />
<caption textColor="0xffffff" bgColor="0x000000" bgAlpha="80" frameColor="0xffffff" frameAlpha="40" shadowAlpha="30" />
<background bgColor="0xffffff" bgAlpha="100" bgImage="images/bg.jpg" />

4. Embed the gallery to the page

Copy the object code of the gallery to the sources of the web page i.e. the next code:

 <script src="swfobject.js" type="text/javascript" ></script>

      <script type="text/javascript">
       var flashvars = {XMLFile: "XML    file"};

        var params = {bgcolor: "BgColor",    allowFullScreen: "true"};

        swfobject.embedSWF("SwfGalleryFile",    "myAlternativeContent", "Width",
        "Height",    "10.0.0",false, flashvars, params); 

      
      </script>

      <div id="myAlternativeContent"> 

       <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>

      
      </div>

You can use a different source for embedding the gallery into the web page but we strongly recommend swfobject.js (a sample above).

Configure the embed code of the gallery into the page.

4.1. Specify the path to swfobject.js

4.2. Specify the path to the SWF and XML files

var flashvars = {XMLFile: "gallery/gallery.xml"};
var params = {bgcolor: "#ffffff", allowFullScreen: "true"};
swfobject.embedSWF("gallery/PhotoFlowFlashGallery.swf", "myAlternativeContent", "Width", "Height", "10.0.0",false, flashvars, params);

</script>

4.3. Setup the size of the gallery

var flashvars = {XMLFile: "gallery/gallery.xml>"};
var params = {bgcolor: "#ffffff", allowFullScreen: "true"};
swfobject.embedSWF("gallery/PhotoFlowFlashGallery.swf", "myAlternativeContent", "500", "400", "10.0.0",false, flashvars, params);

</script>

Gallery is customized.

Download a demo and try to customize it from first to last. Answer to the most of the questions can be found here: http://flash-gallery.com/support/