Dazzle your viewers with 3D photo navigation using 3D ImageFlow Gallery.
Create an amazing gallery with cool perspective effects in seconds and
give your photos stunning 3d and camera effects. Add and edit your
images directly in Dreamweaver. Interact with other components like the
Flash MP3 Player or Spry elements and effects to glue everything together.
3D ImageFlow Gallery Manual
Editing the Gallery with the Property Inspector
Introduction
In this chapter we're going to edit the
properties of the gallery using the property inspector of Dreamweaver. Click on
the preview of the gallery in the design view to display its properties. Below
is a screenshot of the property inspector and a screenshot of the final result.
Editing the Slide options
- Editing the Gallery Properties
Name sets the ID of the gallery, this is useful when you use more then one gallery, this way the different galleries can be identified we leave it to its default value.
The Gallery Title gives the gallery a name that is displayed above the main images, we'll change it to North Bulgarian Coastline.
The Background sets the background color of the gallery we'll leave it to black.
Width sets the width of the gallery, we'll set it to 770px. Height sets the height of the gallery, we'll set it to 450px.
The Title Size sets the font size of the title, we'll change it to 22.
The Description Size sets the font size of the text underneath your images, we'll leave at 14.
Space Main sets the space between the borders of the main image and the images to the left and right of it. The higher the value, the bigger the space between the images, we'll set it to 20.
Space Back sets the spacing between all other images, we'll leave it at 20.
Angle sets the angle in degrees that will be used to display the images next to the main image, we'll set it to 85. 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.
The Title Color sets the color of the title, we'll leave it on dark grey.
The Description Color, this sets the color of the text below your images. We'll leave it at light grey.
Press the Play Button to preview your gallery in the design view of Dreamweaver.
- Editing your images
Select the Images tab to edit your images. You can arrange the order of your images with the
and 
buttons. Select your
image and press the 
button to define your start
image, we use 00.jpg. And delete images from the gallery with the 
button.
The
icon
to add a complete folder of images, the
icon to insert the images one by one.
We won't do this. Notice the 
icon next to the description text, press
it to enter a long description. This will open the following Popup:
You can format your text using HTML tags. 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 won't change the text now.
To add a link to our first image, select it and enter http://www.dmxzone.com in the Link field. We set the Target to _blank to open it in a new window.
The W: and H: display the Width and Height of the selected image. Don't use them to resize your images, we recommend the main extension menu for this. Press the
to update the values.
- Setting Effects – Reflection
We leave the Enable checkbox checked to apply a reflection to your images.
We the Strength option to 50. The higher the value, the less transparent your reflection will be.
The Size option sets the height of your reflection.
The Background sets the background color of your reflection, we'll set it to black. If you have a background image, choose the
in the color picker
for a transparent background in your reflection.
Setting Effects – Flip
We leave the Autoflip checkbvox checked to cycle trough your images like a slideshow.
We set the Interval time to 3 in seconds so that the slideshows pauses a second longer to show you the main image.
The Speed determines the time it takes to switch between the images, it is the time of the motion effect in seconds. We leave it at 1.
We'll show you how to use the Other effects in the Adding 3d And Camera Effects chapter.
- Final Steps
Save and upload your files and preview the result in your browser.