Create an amazing thumbnail wall from your images, photos and portfolio or decorate the existing thumbnails on your pages with the Animated Thumbnail Gallery. Add great looking borders, shadows and predefined styles - all Live in Dreamweaver! When clicked on a thumbnail, it explodes with amazing animation effects to full size image shown in the build-in Lightbox. When used as wall the thumbnails float automatically in all available space - so the gallery always looks great!
Animated Thumbnail Gallery Manual
Create a stylish thumbnail wall with stunning zooming effects
The Basics: Creating a simple Animated Thumbnail Gallery
In this tutorial we will show you how to create a simple gallery with the help
of the Animated Thumbnail Gallery extension.
*You can also check out the video here.
How to do it
1.Define your site in Dreamweaver and create a new page.
2.Applying the extension – Choose the 
icon from the DMXzone object bar to
apply the extension.
The Animated Thumbnail Gallery dialog
appears:
- Using Dreamweaver 8 – In order to popup the Live Editor after the extension was added to your page, you need to select the gallery border or select the gallery code.
- Using Dreamweaver CS3/CS4 - In order to popup the Live Editor after
it was added to your page, simply click the DMXzone Animated Gallery Outline.
3.Adding images to the gallery – We have to choose either to add single images or
import a whole folder. In this tutorial we''ll
add a folder full of images.
After we've
selected the Add Images Folder the integrated DMXzone Image Resizer dialog opens. Click the Browse button in order to select the Source Images Folder and Destination
Folder.
4.Resizing images – In the DMXzone Image Resizer you can
also resize your images to fit the gallery perfectly and edit your thumbnails
size.
5.Loading a preset – For our gallery we will use the Wall preset which is one of the 6 CSS Designs integrated in the
extension.
You can also design
your own preset from the Style menu and save it for future use.
*Note that the color picker
closes when you click the Cancel button. If you want to save the color
you''ve
picked, click outside the picker.
6.Add title and description - Use the right mouse button to bring the context menu and add Title and Description for each thumbnail.
When
clicking the Edit Title a new dialog appears. This is where you can add
a title for your thumbnail.
For adding a description click the Edit Description and you can add not only plain text but HTML and CSS code.
7.The result – When we are done, we save our gallery and preview it in the browser. This is how it should look like.
Lubov Cholakova
Lubov has been with DMXzone for 8 years now, contributing to the Content and Sales departments. She is bringing high quality content in the form of daily blog updates, reviews, tutorials, news, newsletters,update emails and extensions' manuals. If you have a product that needs publicity or any other questions about the entire DMXzone community, she is the one you can contact.