Post on 06-Aug-2020
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 1 of 36
Table of contents
Table of contents ............................................................................................................................................................................ 1 About DMXzone Supersized 2 ...................................................................................................................................................... 2 Features in Detail ............................................................................................................................................................................. 3 The Basics: Creating a Fullscreen Bakcground Slideshow ................................................................................................. 16 Advanced: Dynamic Fullscreen Background Slideshow ................................................................................................... 22 Advanced: Using DMXzone Supersized 2 Control Behaviors ............................................................................................ 30 Video: Creating a Fullscreen Bakcground Slideshow ......................................................................................................... 36 Video: Dynamic Fullscreen Background Slideshow ............................................................................................................ 36 Video: Using DMXzone Supersized 2 Control Behaviors ..................................................................................................... 36
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 2 of 36
About DMXzone Supersized 2
Create an awesome fullscreen background slideshow that will convey the right message better than any
text! The supersized images are displayed behind objects like menus, text fields or any other content that you
have on your site. DMXzone Supersized 2 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.
Along with the great HTML5 Data Bindings integration, you can also use DMXzone Database Connector PHP/ASP and create dynamic slideshows with ease.
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 3 of 36
Features in Detail
*New marks features, not available in the older version
NEW: Great integration with HTML5 Data Bindings - Supply the images, titles, descriptions and links for
the DMXzone Supersized 2 from HTML5 Data Bindings local file or public feed.
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 4 of 36
NEW: DMXzone Supersized 2 directly from dynamic sources - Use HTML5 Data Bindings and DMXzone
Database Connector PHP/ASP to connect to your images, titles, descriptions and more.
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 5 of 36
NEW: 64bit Dreamweaver support - DMXzone Supersized 2 runs smoothly even on the latest 64bit
update of Dreamweaver CC 2014.
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 6 of 36
NEW: Advanced mobile support - The DMXzone Supersized 2 comes with awesome mobile support
and now your slideshow looks great and loads super-fast on any mobile device.
NEW: Super-smart image preloader - A super-smart image preloader loads only the necessary images
and not all of them at once. You can add as many images as you want and it will still load super-fast.
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 7 of 36
Live preview of the slideshow in Dreamweaver - You can simply switch from design to Live view and
experience the slideshow directly in Dreamweaver.
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 8 of 36
Fully responsive DMXzone Supersized 2 - It looks great on a desktop browser, phone or other mobile
device.
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 9 of 36
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 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 10 of 36
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 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 11 of 36
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 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 12 of 36
Timed transitions on slides - You can specify the duration of the slide and the transitions, and 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.
Many CSS editable skins supplied - Select one of the added skins or edit them through the CSS to fit
your website perfectly.
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 13 of 36
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.
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 14 of 36
Full support for the DMXzone Behavior Connector - You can easily bind other DMXzone extensions to
your slides.
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 15 of 36
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!
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 16 of 36
The Basics: Creating a Fullscreen Bakcground Slideshow In this tutorial we will show you how to create a fullscreen background slideshow, using DMXzone Supersized
2 *You can also check out the video.
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 17 of 36
How to do it 1. From the insert panel (1) select DMXzone Supersized 2 (2).
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 18 of 36
2. First, select the static image source option (1). We want to resize the images that we import, into our
slideshow so we enable the DMXzone Image Resizer option (2). If you’ve already resized your images,
you can just turn this option off. Click the import a folder with images button (3).
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 19 of 36
3. Select the images source folder (1) and the destination folder (2). Enter the new size for the images
and the size of the thumbnails (3). And turn off the crop and sharpen options (4) as we do not need
them right now. When you’re done, click OK.
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 20 of 36
4. In the advanced tab (1), you can select one of the predefined design presets (2), enable or disable
the autoplay option and also you can select whether the slideshow should stop on the last slide or
not (3). Adjust the elements and navigation options (4), which we leave to their defaults, and setup
the slides and transitions options (5). Click OK, when you’re done.
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 21 of 36
5. Now you can save your project and preview the result.
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 22 of 36
Advanced: Dynamic Fullscreen Background Slideshow In this tutorial we will show you how to create a dynamic fullscreen background slideshow, using DMXzone
Supersized 2.
*You can also check out the video.
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 23 of 36
How to do it
1. We created a data source, using HTML5 Data Bindings and DMXzone Database Connector PHP/ASP.
In the database we stored the path, title, thumbnail and link for each of our images. Let’s add DMXzone Supersized 2 (2) from the insert panel (1).
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 24 of 36
2. Select dynamic source radio button (1) and select your data source from the data source menu (2).
Now, we select the repeating element of our data source. Click the HTML5 Data Bindings value icon
(3).
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 25 of 36
3. Expand the data source tree (1) and select the repeating element of your data source (2). The
repeating element is wrapped in square brackets. When you’re done, click OK.
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 26 of 36
4. Now let’s select the data element that stores the paths of our images. Click the HTML5 Data Bindings
value icon.
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 27 of 36
5. In our data source it is called: image. Select it (1) and click the OK button (2).
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 28 of 36
6. We do the same with for the titels (1) but select the data element that contains our thumbnails paths.
Do the same with the rest of the fields that you need to populate with dynamic data. When you’re done, you can customize the appearance of the slideshow from the advanced tab (2).
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 29 of 36
7. Now, you can save and preview the results.
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 30 of 36
Advanced: Using DMXzone Supersized 2 Control Behaviors In this tutorial we will show you how to use DMXzone Supersized 2 control behaviors. *You can also check out the video.
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 31 of 36
How to do it
1. We’ve added two simple buttons on our page - previous and next. We also inserted the DMXzone Supersized 2 on our page so let’s edit its settings. Click the DMXzone Supersized 2 icon (2) from the
insert panel (1).
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 32 of 36
2. Select the advanced tab (1) and disable the default next and previous buttons (2) that the extension
displays.
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 33 of 36
3. Select the next button (1) and from the behaviors panel (2), add a new behavior (3).
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 34 of 36
4. Open the action menu and select next (1). Click the OK button in order to apply the behavior (2).
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 35 of 36
5. We do the same with the previous button, by selecting the action called - previous. Now you can
save and preview the results.
DMXzone Supersized 2 DMXzone
Copyright © 2015 DMXzone.com All Rights Reserved
To get more go to DMXzone.com
Page 36 of 36
Video: Creating a Fullscreen Bakcground Slideshow
With this movie we will show you how to create a fullscreen background slideshow, using
DMXzone Supersized 2.
Video: Dynamic Fullscreen Background Slideshow
With this movie we will show you how to create a dynamic fullscreen background slideshow,
using DMXzone Supersized 2.
Video: Using DMXzone Supersized 2 Control Behaviors
With this movie we will show you how to use DMXzone Supersized 2 control behaviors.