Table of contents - DMXzone...thumbnails on your pages with the Animated Thumbnail Gallery. Add...

Animated Thumbnail Gallery 2 DMXzone

Copyright © 2015 DMXzone.com All Rights Reserved

To get more go to DMXzone.com

Page 1 of 37

Table of contents

Table of contents ............................................................................................................................................................................ 1 About Animated Thumbnail Gallery 2....................................................................................................................................... 2 Features in Detail ............................................................................................................................................................................. 3 The Basics: Insert Animated thumbnail Gallery 2 on your Page....................................................................................... 18 Advanced: Dynamic Animated Thumbnail Gallery............................................................................................................ 27 Video: Insert Animated Thumbnail Gallery on your Page ................................................................................................. 37 Video: Dynamic Animated Thumbnail Gallery ..................................................................................................................... 37




Page 2 of 37

About Animated Thumbnail Gallery 2

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!

It also has great HTML5 Data Bindings integration so you can create galleries from local or public feeds as well as from dynamic sources, using DMXzone Database Connector PHP/ASP.

http://www.dmxzone.com/go/22961/animated-thumbnail-gallery-2/

http://www.dmxzone.com/go/21863/html5-data-bindings

http://www.dmxzone.com/go/22072/dmxzone-database-connector-php

http://www.dmxzone.com/go/22084/dmxzone-database-connector-asp




Page 3 of 37

Features in Detail

Great integration with HTML5 Data Bindings - Supply the images for the Animated Thumbnail Gallery 2

from HTML5 Data Bindings local file or public feed. Choose from the many feed such as: Flickr, Picasa and other.





Page 4 of 37

Animated thumbnail Gallery 2 directly from dynamic sources - Use HTML5 Data Bindings and

DMXzone Database Connector PHP/ASP to connect to your images.


http://www.dmxzone.com/go/22072/dmxzone-database-connector-php

http://www.dmxzone.com/go/22084/dmxzone-database-connector-asp




Page 5 of 37

6 stylish CSS based designs included to choose from - Select one of the various styles to fit your web

site perfectly.




Page 6 of 37

Design and save custom presets - You can also design your own styles and save them for future use

as presets.




Page 7 of 37

10 stunning lightbox effects included - your thumbnail can zoom out to the build-in Lightbox viewer

with amazing transition effects.




Page 8 of 37

Animated display of images, title and description - Adjust the appearance by overlay, show/hide

transition and miscellaneous. The bigger images explode from the thumbnails with many cool effects – all pure CSS and JavaScript based!




Page 9 of 37

Build-in lightbox – The bigger images are displayed in a build-in Lightbox.




Page 10 of 37

Fully customizable thumbnails with Live preview in Dreamweaver – Adjust the layout of the thumbnails

by width, height, border width, padding, offset and title y offset.




Page 11 of 37

Add titles and description to your gallery – You can add (by clicking the right mouse button to bring

the context menu) plain text, as well as CSS and HTML code.




Page 12 of 37

Edit your thumbnails in Photoshop and Fireworks – Open your thumbnails directly in Photoshop or

Fireworks and edit them live. They are automatically saved in your thumbs directory on your site.




Page 13 of 37

Great Live Editor in Dreamweaver - You can manipulate the gallery (add images, change

appearance) live in Dreamweaver.




Page 14 of 37

DMXzone Resizer included - Integrated Resizer, so that you don’t need to use any additional

programs to fit the images to the Animated Thumbnail Gallery.




Page 15 of 37

Fully controllable by behaviors - You want to add/remove/show thumbnail and close the viewer - it

can be easily done with the Control Animated Thumbnail Gallery behavior.




Page 16 of 37

Full support for the DMXzone Behavior Connector - You can easily bind Animated Thumbnail Gallery 2

with other DMXzone extension.




Page 17 of 37

Before you begin

Make sure to setup your site in Dreamweaver first before creating a page. If you don’t know how to do that

please read this.

Installing the extension Read the tutorial at http://www.dmxzone.com/go/4671/how-to-install-extensions-from-dmxzone/

Login, download the product, and look up your serial at http://www.dmxzone.com/user/products

Get the latest DMXzone Extension Manager at

http://www.dmxzone.com/go/22670/dmxzone-extension-manager-for-dreamweaver

Open DMXzone Extension Manager and go to your Purchased products tab and click install. If you have a

subscription, the extension is to be found and installed in the Explore tab.

Get the latest extension manager from Adobe at

http://www.adobe.com/exchange/em_download/

Open the .zxp file if you’re using Dreamweaver CC or the .mxp file for Dreamweaver CS+ with Adobe

Extension manager and install the extension.

If you experience any problems contact our Live Support!

http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html

http://www.dmxzone.com/go/4671/how-to-install-extensions-from-dmxzone/

http://www.dmxzone.com/user/products

http://www.dmxzone.com/go/22670/dmxzone-extension-manager-for-dreamweaver

http://www.adobe.com/exchange/em_download/




Page 18 of 37

The Basics: Insert Animated thumbnail Gallery 2 on your Page In this tutorial we will show you how to insert Animated Thumbnail Gallery on your page. *You can also check out the video.


http://www.dmxzone.com/go/22963/insert-animated-thumbnail-gallery-on-your-page/




Page 19 of 37

How to do it

1. We created a really basic page layout. Our page contains a responsive Bootstrap 3 container. Inside the container we want to place the Animated Thumbnail Gallery. Click inside the container (1) and

from the insert panel (2) select Animated Thumbnail Gallery (3).




Page 20 of 37

2. For this tutorial we are going to use a static image source. That means that we will select the images

manually from some location, on our hard drive. You can choose whether to use the DMXzone

Image Resizer 2 when importing the images into the gallery. If you already resized your images with

some image-editing software, like Photoshop you can turn this option off. You can import a single

image or a folder of images. We’ll add a folder of images.




Page 21 of 37

3. The DMXzone Image resizer 2 dialog appears as we enabled it. Select the source images folder (1)

and select the destination folder (2). Note, that the destination folder should be located inside your

site root. Adjust the images resize options. Enter the width and height (3) that the big Images and

thumbnails should be. When you’re done, click OK.




Page 22 of 37

4. All of our images have been resized and imported into our gallery. You can select one of the

predefined design presets or you can edit the default style of the gallery. We select the one named wall (1). You can edit (2) the style of the selected preset. You can see all of the changes in the Live

preview panel immediately.




Page 23 of 37

5. Switch to geometry tab (1) when you are done editing the gallery style. Here you can adjust the

thumbnails width, height, offsets and border options (2).




Page 24 of 37

6. In the viewer tab you can adjust the overlay options, as well as the show and hide Transitions settings.

We leave these settings to their default values.




Page 25 of 37

7. You can use the right mouse button to bring a context menu for each of the images and use the

various options including edit title and description for each thumbnail.




Page 26 of 37

8. Now you can save your project and preview the result.




Page 27 of 37

Advanced: Dynamic Animated Thumbnail Gallery In this tutorial we will show you how to create an Animated Thumbnail Gallery from dynamic source. *You can also check out the video.





Page 28 of 37

How to do it 1. We created a data source, using HTML5 Data Bindings. Let’s add an Animated Thumbnail Gallery (2)

from the insert panel (1).





Page 29 of 37

2. We’re not going to add any images now, just an empty gallery. Click OK




Page 30 of 37

3. Now, click inside the gallery container (1). We have already created a data source that retrieves our

images from a database. From the data bindings panel (2) select the repeating element (3) of your

data source.




Page 31 of 37

4. Select the repeat children from the dropdown menu (1) and click insert (2).




Page 32 of 37

5. You see that a repeat children region has been successfully added inside the gallery container.

Choose the data element (1) that corresponds to the thumbnail images and select the image option

(2). When you’re done, click insert (3).




Page 33 of 37

6. Select the dynamic image that we just added. (1), add some dummy link to it (2) and hit the enter (3).




Page 34 of 37

7. From the data bindings panel, select the data element (1) corresponding to the big images (1).

Choose the a.href option (2) and click the bind button (3).




Page 35 of 37

8. You can customize the gallery appearance, by clicking on its tag and selecting the Live editor button

in the property inspector.




Page 36 of 37

9. As you are editing a gallery that contains dynamic data the images here are just dummy samples for

preview. You can customize the style, geometry and animation options. When you’re done

customizing the gallery, click ok, save and preview the result.




Page 37 of 37

Video: Insert Animated Thumbnail Gallery on your Page

With this movie we will show you how to insert Animated Thumbnail Gallery your page.

Video: Dynamic Animated Thumbnail Gallery

With this movie we will show you how to create an Animated Thumbnail Gallery from dynamic

source.

http://www.dmxzone.com/go/22963/insert-animated-thumbnail-gallery-on-your-page/


http://www.dmxzone.com/go/22964/dynamic-animated-thumbnail-gallery/


Date post:	06-Aug-2020
Category:	Documents
Upload:	others
View:	1 times
Download:	0 times

Table of contents - DMXzone...thumbnails on your pages with the Animated Thumbnail Gallery. Add...

Documents