table of contents - dmxzone · 2011-11-23 · create an awesome fullscreen background slideshow...

DMXzone Supersized Manual DMXzone.com

Copyright © 2011 DMXzone.com All Rights Reserved

To get more go to DMXzone.com

of 39

Table of contents

Table of contents ..................................................................................................................................................................... 1 About DMXzone Supersized .................................................................................................................................................. 2 Features in Detail ..................................................................................................................................................................... 3 The Basics: Creating Basic DMXzone Supersized Slideshow .......................................................................................... 12 Advanced: Using custom controls to navigate the DMXzone Supersized ................................................................ 20 Advanced: Creating a Dynamic DMXzone Supersized ................................................................................................ 27 Reference: DMXzone Supersized Settings and Skins ...................................................................................................... 33 Video: Creating Basic DMXzone Supersized .................................................................................................................... 39 Video: Using Custom Controls to Navigate the DMXzone Supersized........................................................................ 39 Video: Using DMXzone Supersized with Dynamic Image Source ................................................................................ 39




of 39

About DMXzone Supersized

Create an awesome fullscreen background slideshow that will convey the right

message better than any text! With DMXzone Supersized Dreamweaver extension you

can set amazing timed transitions on slides. The supersized images are displayed

behind objects like menus, text fields or any other content that you have on your site.

This great extension is supplied with stylish navigation controls with keyboard support

and CSS skins that you can choose from or edit to fit any website perfectly. You

shouldn’t worry about resizing anymore! All your images will become browser specific so regardless of the

window size or the monitor size of your device the background images will be perfectly matched up.

DMXzone Supersized is exactly what you need to bring your website design from boring to exiting!

With it you’ll have all the options for an amazing fullscreen display of your photos. Use them to set a

supersized slideshow as background which adds a nice atmosphere behind the content that you want to

present. You can add your images from dynamic source and preview them along with their titles and links

directly in the UI. The extension is built upon jQuery and CSS so they run on all devices smoothly.




of 39

Features in Detail

Integrated DMXzone Resizer - Resize all your images super fast to a regular size for the DMXzone

Supersized. The DMXzone Supersized requires images with the same size for the best effects and the built-

in DMXzone Resizer slices and crops your images so they are just as required.




of 39

Preview of images, title and link - Awesome preview of your images, title and link directly in the User

Interface. The titles can be also HTML.

Automatically generated images’ names - Auto generate image titles from their file names.




of 39

Cool looking navigation control - Fully stylable with CSS.

o Show Next & Prev Navigation - Displays next & prev navigation buttons.

o Show Play/Pause button - Displays a show/pause button.

o Slides Counter - Displays the number of slides in the slideshow.

o Thumbnails Tray - Generates a list of thumbnails that jump to the corresponding slide.

o Progress Bar - It runs based on the slide interval.

o Thumbnail Navigation - Toggles forward/backward thumbnail navigation. When on, thumbnails

from the next/previous posts are generated and can be clicked to navigate.

o Slides Titles - Displays the slides’ titles

o Enable Mouse Scrub - The thumbnail list navigates left or right based on the mouse location.

o Allow Keyboard Navigation - Allows controls via keyboard.

Flexible background image positioning - You can specify the image position to fit your website design.

o Vertical Center - Centers image vertically. When unchecked, the images resize/display top

center if horizontal center is also unchecked.

o Fit Always - Prevents the image from ever being cropped. Ignores minimum width and height.

o Horizontal Center - Centers image horizontally. When unchecked, the images resize/display from

the left of the page.

o Fit Portrait - Prevents the image from being cropped by locking it at 100% height

o Protect Image - Disables right clicking and image dragging using Javascript.




of 39

Timed transitions on slides - You can specify the duration of the slide and the transitions.

7 unique transition effects - You can choose between different transition for your slides, which are fully

cross browser compatible and even run on iPhone/iPad.

Paging Controls - You can chose between different sets of paging controls.




of 39

DMXzone Supersized directly from dynamic sources like a Recordset and an RSS/ATOM Feed fetched

with Feed Genie.

Many CSS editable skins supplied - Select one of the added skins or edit them through the CSS to fit your

website perfectly.

http://www.dmxzone.com/go?17883




of 39

Fully Controllable by behaviors - You want to navigate to a specific slide, start or stop the slideshow and

even set prev and next actions - it can be easily done with the Control DMXzone Supersized behavior.

Full support for the DMXzone Behavior Connector - You can easily bind other DMXzone extensions to your

slides.




of 39

Search Engine Friendly - HTML5 Slideshow is made in just HTML5, CSS and jQuery it can be nicely indexed

by all search engines and web spiders.




of 39

Great Dreamweaver integration - Interactive dialog in Dreamweaver with all the options you’ll need.




of 39

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

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

Get the latest extension manager from Adobe at

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

Open the .mxp file (the extension manager should start-up) and install the extension.

If you experience any problems contact our Live Support!

http://kb2.adobe.com/cps/140/tn_14028.html


http://www.dmxzone.com/myZone/purchases

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




of 39

The Basics: Creating Basic DMXzone Supersized Slideshow In this tutorial we will show you how to create a basic slideshow using DMXzone Supersized.

*You can also check out the video.





of 39

How to do it 1. Click the DMXzone Supersized icon in Dreamweaver.




of 39

2. The DMXzone Supersized dialog opens. Choose the source for your images (1) and enable

autogenerate image titles if you want to use image filenames as titles (2). For our slideshow we will

add a whole folder of images (3).




of 39

3. Open the images folder and select it.




of 39

4. When you insert your images, go to the advanced tab to customize the slideshow.




of 39

5. For this slideshow we will use the Shutter design, but you can also choose another one or customize

an existing through the CSS.




of 39

6. From the advanced tab we will allow autoplay of the slideshow, also turn it on to display all the

images and not just a single one, show navigation buttons, slides counter, images thumbnail tray as

well as bullets for our paging controls.

7. In the slides options we will center our slideshows vertically and horizontally, protect them from being

right mouse click and set fit portrait and landscape to lock our images at 100% height and width.




of 39

8. Before we’re done and click OK we will chose the Fade effect for the transitions.

9. Now you can save your work and preview it in the browser.




of 39

Advanced: Using custom controls to navigate the DMXzone

Supersized In this tutorial we will show you how you can use custom controls in order to navigate the DMXzone

Supersized.






of 39

How to do it 1. We’ve created our page layout and added DMXzone Supersized to our page. We have two arrow

images that we want to use in order to control the slideshow.




of 39

2. Select the first custom “button” (1) and click the Tag Inspector button (2). Click the Add behavior

button (3), select the DMXzone menu item (4) and choose the control DMXzone Supersized menu

item (5).




of 39

3. The control DMXzone Supersized window opens. From the action dropdown menu (1), select the

“Next” action (2) and click OK.




of 39

4. The action will be executed on mouse click.




of 39

5. We do the same for the Prev navigation button, but from the control DMXzone Supersized window

we select the “Prev” action.




of 39

6. The action will be executed on mouse click.

7. Now you can save your work and preview the result in the browser.




of 39

Advanced: Creating a Dynamic DMXzone Supersized In this tutorial we will show you how to use DMXzone Supersized with a dynamic Image source.






of 39

How to do it 1. We’ve already created a standard Dreamweaver recordset. The next step is to click the DMXzone

Supersized icon.




of 39

2. In the DMXzone Supersized window, select the dynamic image source radio button (1). Choose the

recordset that you already created (2) and click dynamic data for images button (3).




of 39

3. Select the images binding in your recordset and click OK when you’re done.




of 39

4. We do the same for the other fields – thumbnails, title and links.




of 39

5. Now you can go to the advanced tab and customize your DMXzone Supersized.




of 39

Reference: DMXzone Supersized Settings and Skins

Navigation Controls:

Show Next & Prev Navigation - Displays next & prev navigation buttons.

Show Play/Pause button - Displays a show/pause button.

Slides Counter - Displays the number of slides in the slideshow.

Thumbnails Tray - Generates a list of thumbnails that jump to the corresponding slide.

Progress Bar - It runs based on the slide interval.

Thumbnail Navigation - Toggles forward/backward thumbnail navigation. When on, thumbnails from

the next/previous posts are generated and can be clicked to navigate.

Slides Titles - Displays the slides’ titles

Enable Mouse Scrub - The thumbnail list navigates left or right based on the mouse location.

Allow Keyboard Navigation - Allows controls via keyboard.

Background Image Positioning:

Vertical Center - Centers image vertically. When unchecked, the images resize/display top center if

horizontal center is also unchecked.

Fit Always - Prevents the image from ever being cropped. Ignores minimum width and height.

Horizontal Center - Centers image horizontally. When unchecked, the images resize/display from the

left of the page.

Fit Portrait - Prevents the image from being cropped by locking it at 100% height.

Fit Landscape - Prevents the image from being cropped by locking it at 100% width.

Protect Image - Disables right clicking and image dragging using Javascript.




of 39

Gray Design




of 39

iPad Design




of 39

Shutter Design




of 39

White-Gloss Design




of 39

Blue Design




of 39

Video: Creating Basic DMXzone Supersized

With this movie we show you how to use our DMXzone Supersized Dreamweaver extension

and create a background slideshow.

Video: Using Custom Controls to Navigate the DMXzone Supersized

With this movie we show you how to use the DMXzone Supersized Dreamweaver extension in

order to set Custom Controls.

Video: Using DMXzone Supersized with Dynamic Image Source

With this movie we explain how to use our DMXzone Supersized extension with dynamic

image source in order to create background slideshow.







table of contents - dmxzone · 2011-11-23 · create an awesome fullscreen background slideshow...

Documents