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
Advanced: Creating a Dynamic Animated Thumbnail Gallery
In this tutorial we will show you how to create a dynamic Animated Thumbnail Gallery.
*You can also check out the video here.
How to do it
1.Define your site in Dreamweaver
and create a new page – We already have a database(1) that contains our images for the gallery and a recordset (2)which we will use later as a source for our images.
2.Applying the extension – Choose the icon from the DMXzone object bar to
apply the extension.
The Animated Thumbnail Gallery dialog appears. We leave the gallery empty and just
click the OK button.
3.Setting the dynamic source – Now that the gallery is on our page, click in it, select the Insert menu from the text bar and click the Image menu.
- The Select Image Source dialog opens – click the Data Sources radio button in order to add the dynamic source.
- The path to the images and filenames from the recordset - We add a path and file in the URL field. Click the OK button when you are done.
- Setting up a repeat region for the dynamic images source (in order to display all images) – Make sure the image is selected. From the Server Behaviors icon we select the Repeat Region menu item.
- Select the All records option in the Repeat Region dialog in order to show all the images from the recordset.
- Now, we need to copy the Source field and paste it into the Link. The Link field shows the gallery, where the images are, so the bigger images will show up when you click on the thumbnails.
- When you''re done, click the DMXzone Animated Gallery Outline and then the Live Editor. Now, you can customize your gallery.
4.Customizing gallery with dynamic content – In the Live Editor you can customize your gallery from the Style, Geometry and Viewer tabs.
- The context menu is inactive and the images you see are only preview images, integrated in the extension, so that you can follow the Live customization. To learn how to add titles and descriptions in a dynamic gallery, please read the FAQ.
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.