Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 1 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
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 2 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.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 3 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.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 4 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.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 5 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.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 6 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.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 7 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.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 8 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.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 9 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.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 10 of 39
Great Dreamweaver integration - Interactive dialog in Dreamweaver with all the options you’ll need.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 11 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!
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 12 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.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 13 of 39
How to do it 1. Click the DMXzone Supersized icon in Dreamweaver.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 14 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).
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 15 of 39
3. Open the images folder and select it.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 16 of 39
4. When you insert your images, go to the advanced tab to customize the slideshow.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 17 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.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 18 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.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 19 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.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 20 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.
*You can also check out the video.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 21 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.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 22 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).
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 23 of 39
3. The control DMXzone Supersized window opens. From the action dropdown menu (1), select the
“Next” action (2) and click OK.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 24 of 39
4. The action will be executed on mouse click.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 25 of 39
5. We do the same for the Prev navigation button, but from the control DMXzone Supersized window
we select the “Prev” action.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 26 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.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 27 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.
*You can also check out the video.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 28 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.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 29 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).
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 30 of 39
3. Select the images binding in your recordset and click OK when you’re done.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 31 of 39
4. We do the same for the other fields – thumbnails, title and links.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 32 of 39
5. Now you can go to the advanced tab and customize your DMXzone Supersized.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 33 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.
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 34 of 39
Gray Design
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 35 of 39
iPad Design
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 36 of 39
Shutter Design
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 37 of 39
White-Gloss Design
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 38 of 39
Blue Design
DMXzone Supersized Manual DMXzone.com
Copyright © 2011 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 39 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.