Building the Gallery

1. Create a new HTML page
   Create a new or open an existing HTML page and save the page. We change the background color of our page to black (go to your page properties and choose a black background color and press Ok).
   
   
   
   


2. Applying the extension
   Choose the  icon from the DMXzone object bar to apply the extension, the following  popup appears:
   
   
   
   


3. Setting the Gallery Title Options
   The Gallery Title gives the gallery a name that is displayed above the main images, we'll set it to Natural Flow.
   
   
   
   The Title Color sets the color of the title, we'll set it to dark grey.
   
   
   Background sets the background color of the title, we'll set it to black.
   
   
   
   The Title Size sets the font size of the title, we'll set it to 20.
   
   

4. Setting the Description Options
   Now it is time to set the Description Color, this sets the color of the text below your images. Let's set it to light grey.
   
   
   
   The Description Size sets the font size of the text underneath your images, we'll leave at 14.
   
   
   
   
5. Setting the Other Options
   We'll determine the space between the images with these options. Space Main sets the space between the borders of the main image and the images to the left and right of it. We'll set it to 125.
   
   
   
   Space Back sets the spacing between all other images, let's set it to 40.
   
   
   
   Angle sets the angle in degrees that will be used to display the images next to the main image, we'll set it to 35. 
   
   
   
   
   Depth sets the depth of the images around the main image. The higher the depth the further the images will be displayed in the back, we give it a value of 200.
   
   
   
   
6. Adding your images to the gallery
   Select the Images tab and select the icon to add a complete folder of images or theicon to insert the images one by one. We'll upload 10  images. Select your image and press the  button to define your start image. You can arrange the order of your images with the  and  buttons and delete images from the gallery with the  button. The W: and H: display the Width and Height of the selected image. Don't use them to resize your images, we recommend the options in the Resize image menu below for this. Press the  to update the values.
   
   
   
   We add a description to the image by selecting it and entering a text in the Description field.
   
   
   
   You can create bold text by placing words between the the <b> and </b> tags, create italic text with (<i></i>), underline words (<u></u>) or change the font with the font tag (<font color="#FFFFFF" face="Verdana">). We'll add a description to every image.
   
   
   
   Add links to your images using the Link field. And select the Link Target, to choose the target window. We won't add any links now.
   
   

7. Resizing your images
   
   Select the Resize images checkbox to automatically resize all images in the gallery. Max. Width sets the maximum width of the images while Max. Height sets the maximum height. We set both to 200.
   
   Whether you check the Resize image checkbox or not, the Max. Width and Max. Height options still apply. For optimal quality we recommend using images that are a little bit bigger then the Max. Width and Max. Height when you don't resize your images. Because the extension (depending on your settings) might stretch the image above the specified limit when putting it in the 3D perspective.
   
   Also it can be more attractive to use the 4:3 format instead of a square format. For the purpose of this tutorial we keep things simple by choosing a simple square format with resize option turned on.
   
   

8. Setting Effects - Reflection
   Check the Enable checkbox to apply a reflection to your images.
   
   
   
   Set the transparency with the Strength option. The lower the value, the more transparent your reflection will be.  We'll give it a value of 30.
   
   
   
   The Size option sets the height of your reflection. We'll set it to 50.
   
   
   
   The Background sets the background color of your reflection. If you have a background image, choose the  in the color picker for a transparent background in your reflection. If you don't use a background image it is best to choose a color, so we'll set it to black.
   
   
   
   
9. Setting Effects - Flip
   Check the Autoflip checkbox to cycle trough your images automatically like a slideshow. When the last image is reached, the slideshow moves back to the previous image on the left and continues till the end and vice versa.
   
   
   
   The Interval sets the time in seconds that the slideshows pauses to show you the main image. We'll set it to 2.
   
   
   
   Speed determines the time it takes to switch between the images, it is the time of the motion effect in seconds, we'll set it to 1. Note that the Speed is not affected by the Autoflip option.
   
   
   
   We'll set the Other effects in the next chapter, we'll leave them at the default settings now.
   
   
10. Final Steps
    Press OK to generate your gallery. The extension will start to resize your images automatically. A popup reminds you to copy the generated HTML and the support files in the "imageflowgallery" folder from the root of your site to your server. Press OK to close the popup.