Art Photo Gallery

Art Photo Gallery organically blends with any design thanks to flexible appearance settings. You can publish any photos and images on your site in a matter of minutes using this photo gallery.

Help > Art Flash Gallery > FAQ > Install & Tuning Sample Of Art Flash Gallery

Install & tuning sample of Art Photo Gallery

Let’s do a sample of the settings up the gallery.

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

1. Add the images

1.1. Specify the path for the images


        	<imagesFolder>images/</imagesFolder>

1.2. Add an image and a description to it

    
            <items>

              
                      <item  source="1.jpg" thumb="1_thumb.jpg" description="Image  1" link=" http://path to the web page, image"
                      target="_blank"/>

                <item  source="2.jpg" thumb="2_thumb.jpg " description="Image  2" link=" " target="_blank"/>

                <item  source="3.jpg" thumb="3_thumb.jpg " description="Image  3" link=" "  target="_blank"/>

                      . . . . . . . . . . . . . 

                <item  source="30.jpg" thumb="30_thumb.jpg "  description="Image 30" link=" "  target="_blank"/>
              
            </items>

2. Look & Feel Customization

Look & Feel parameters have to be set within tags: <settings>.. </settings>

2.1. Specify the size of the thumbnails


    		<thumbnail width="60"  height="40" …/>

2.2. Set the background image

Set an image as a background;


        	<bgImage alpha="100" source="images/bg.jpg"/>

Also any color can be set as a background color;

Background color needs to be specified in object HTML code


          <script type="text/javascript"> 

          
              . . .

            var params = {bgcolor: "#ffffff"};

              . . .

          
          </script>

The background can be transparent.

2.3. Enable slideshow mode


			<slideshow start="true"  delay="3" loop="true" stopAutoOnClick="true"/>

2.4. Customize the font of the image descriptions

Change the position, color and size of the description (variable parameters are highlighted).


            <caption position="top" visibleMode="onRollOver"  bgAlpha="30" color="0xFFFFFF" bgColor="0x000000"  fontName="Arial" fontSize="11"/>

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

3.1. Specify the path to swfobject.js

3.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/ArtPhotoGallery.swf", "myAlternativeContent", "Width", "Height", "10.0.0",false, flashvars, params);

</script>

3.3. Setup the size of the gallery


            <script  type="text/javascript"> 

            
              var flashvars = {XMLFile: "gallery/gallery.xml"};

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

              swfobject.embedSWF("gallery/ArtFlashGallery.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/