Back to Top
The nuts and bolts for
Creative web development

DMXzone Supersized

“The most awesome fullscreen background slideshow”

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 Supersized jQuery plugin and CSS so they run on all devices smoothly.

Overview

Features Highlights:

  • 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.
  • Cool looking navigation control - Fully stylable with CSS.
  • 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.
  • 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.
* For complete Features overview press the Features in Detail

Features

Online Demo: External link
  • 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. 

  • 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.

  • Cool looking navigation control - Fully stylable with CSS.
    • 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.

  • Flexible background image positioning - You can specify the image position to fit your website design.
    • 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
    • Protect Image - Disables right clicking and image dragging using Javascript.
  • 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 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.
  • 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.

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

Showcases


  • Digital Photo Exhibition

    For this showcase we used DMXzone Bootstrap 3 for the page layout, DMXzone Bootstrap 3 Elements for the content and DMXzone Supersized to display the amazing images.

  • Responsive Fullscreen Gallery Showcase

    For this showcase we used DMXzone Supersized to show our images in the best possible way - fullscreen, with thumbnails preview for quick navigation. For the page layout we used DMXzone Bootstrap 3 ...

  • Interior Design Studio Showcase

    For this showcase we used DMXzone Supersized for the background image, DMXzone Bootstrap 3 for the design layout and Elements for the page content.

  • Single Page Portfolio Showcase

    For this showcase we used the Single Page Portfolio Template, where we used the DMXzone Bootstrap and its Elements addition for the page layout, and DMXzone Supersized for the background image.

  • Photographer Portfolio Showcase

    For this showcase we used the DMXzone Supersize extension for the beautiful image presentation and Advanced CSS Animator for the sliding out navigation on hover. We also animated the camera icon that ...

  • Cars Magazine Showcase

    For this showcase we used DMXzone Supersized for the beautiful background images, Ajax Datagrid for the car specs and Advanced CSS Animator for the sliding out panel that is triggered on mouse over.

  • Scuba Diving School Showcase

    For this showcase we created a beautiful full screen background image slideshow with DMXzone Supersized and used DMXzone Bootstrap and its Elements extension for the rest of the page content.

  • Creative Studio Showcase

    For this showcase we used DMXzone Supersized for the changing background images and DMXzone Responsive Text for the fully responsive text on the different circles.

  • Amazing Game Store Showcase

    In this showcase we used the DMXzone Supersized for the background images, which change along with the HTML5 Parallax Slider elements, when clicked to match the game info and image. The purchase ...

  • Metro UI Hotel Website Showcase

    For this showcase we used the Metro UI Design Template's home page, which features the DMXzone Supersized for the sliding background images, the DMXzone Calendar 2 for the reservation form and the ...

  • Luxury Travel Showcase

    In this showcase we used four awesome DMXzone extension to create a beautiful landing page for reservations. The page navigation is created with the Universal CSS Navigation Menu, the sliding ...

  • Scuba Diving Showcase

    For this Scuba Diving showcase we customized the navigation between the slides of the DMXzone Nivo Slider to match our design and also used the DMXzone Supersized extension for the background.

  • Restaurant Coming Soon Showcase

    We made a simple page and added a background image to it with the DMXzone Supersized extension. Using the HTML5 3D Flipping Gallery we put out three images which are set to flip on click. On the back ...

  • Feature Destinations Showcase

    For this showcase we used the DMXzone Supersized for the background image, DMXzone Responsive Text in order to create both text lines scalable, and DMXzone CSS3 Drop Shadows for the content shadow. ...

  • Wine List Page Showcase

    For this showcase page we used a CSS customized Universal CSS Navigation Menu and DMXzone Supersized for the awesome fullscreen background slideshow. In order to see an overview of each wine ...

  • Responsive Interior Design Layout Showcase

    The showcase features 2 DMXzone extensions - the DMXzone Supersized, which is used for the full screen background and the customized Universal CSS Navigation Menu for the site navigation.

  • Custom Swatches with DMXzone Colorpicker

    For this showcase we used DMXzone Supersized for our full-screen images and DMXzone Colorpicker Swatches for the available colors that your users can change in order to view the template in different ...

  • Interior Design Studio Showcase

    For this showcase we animated (Advanced CSS Animator) a panel that slides out upon click on the customize button. It contains colorpickers for all 3 boxes that change their background and font ...

  • Golf Equipment Store Showcase

    For this showcase we used DMXzone Supersized for the background images, Sliding Billboard to present the different sections of the store and Universal CSS Navigation menu for the site navigation.

  • Full Screen Gallery Showcase

    For this showcase we connected the images thumbnails to DMXzone Supersized through the control behaviors.

  • Concept Car Gallery Showcase

    For this showcase we used DMXzone Supersized in order to present the product images in full screen. When dragged, the DMXzone Slider changes the picture, which fades in/out with the help of Advanced ...

  • Animator & Supersized Showcase

    For this showcase we used div containers that contain text, being animated (Advanced CSS Animator) through the behavior connector. Also we use the DMXzone Supersized in order to use fullscreen images ...

  • Interior Design Studio Showcase

    With the DMXzone Supersized we created an awesome fullscreen background slideshow that will convey the right message better than any text with its amazing images!

  • Car Service Showcase

    In this showcase we will show you how you can combine DMXzone Accordion, Universal CSS Navigation Menu and DMXzone Supersized in order to create an awesome Car Service website. For an amazing ...

  • Sliding Animated Website

    For this showcase we put our images/content in a DMXzone Supersized slideshow and added fade in/out effects with the Advanced CSS Animator, when changing the slides.

  • Golf Club Showcase

    In this showcase you can see an extremely easy but yet really effective way to present your place with amazing pictures that will stun your users. The image slider is created with DMXzone ...

  • Furniture Product Page Showcase

    In this showcase you can see awesome background images, packed as a web page background and you can change them through custom controls.

  • Winter Sports Equipment Showcase

    In this showcase you can see how we combined both extensions in order to create a Winter Sports Equipment website. The fantastic navigation is created with the Universal CSS Navigation Menu, which ...

  • Feed Genie & DMXzone Supersized Showcase

    In this showcase we binded Feed Genie and DMXzone Supersized so you can search for images in Picasa. Also you can connect your Picasa/Flickr account directly to use it as a source for your DMXzone ...

  • Restaurant Reservation Showcase

    For this showcase, we created the amazing background with the newly released DMXzone Supersized. The reservation form is protected with the DMXzone reCAPTCHA and is validated with Universal Form ...

  • Interior Design Showcase

    There are 4 different images that work as a background for the page and can be navigated from the images thumbnails that are custom controls, binded through behaviors.

  • The Gym Website with DMXzone Supersized

    The showcase was built to show an interesting presentation of your photos in the background of the website. You can explore The Gym web page and the many possibilities that our DMXzone Supersized ...

  • DMXzone Supersized Navigation

    Along with the different types of navigation, you can also show/hide the thumbnails, add titles to the images and start/stop the slideshow manually.

  • Beach House Website Showcase

    In this showcase you can preview an example of a Beach House Website, which was created with the DMXzone Supersized extension. We've used it to display this awesome fullscreen background slideshow. ...

Videos


Requirements

Type: Behavior
License: External link
Product: Dreamweaver CS3, Dreamweaver CS4, Dreamweaver CS5/CS5.5 and CS6, Dreamweaver CS5.5, Dreamweaver CC
Used Technologies: jQuery, CSS
Screen Shot: External link
Tags: supersized, slideshow, dmxzone, jquesry, css


History

Version 1.0.5

  • Full Internet Explorer 11 compatibility
  • Included the latest jQuery 1.10.2
  • Improved Thumbnail Tray functionality

Version 1.0.4

  • Included the latest jQuery 1.10.1

Version 1.0.3

  • Full Dreamweaver CC and Extension Manager CC support
  • Included new Behavior Connector with restyled UI and better Mac OSX Support
  • Updated the automatic file copy and update component for better Dreamweaver CC support
  • Improved compatibility with the latest jQuery
  • Included latest jQuery 1.10.1
  • Improved Windows 8 compatibility

Version 1.0.2

  • Improved integration with dynamic data
  • Improved Control DMXzone Supersized behavior
  • Improved DW integration
  • Latest jQuery 1.7.2 included
  • Improved installer for for DW CS 5.5+ and Mac DW CS6

Version 1.0.1

  • New random feature included that allows the Supersized to start with a different image when loaded. Even when set the thumbnails correspond to the slide.
  • Improved JavaScript for better thumbnails change and autoplay.
  • Improved CSS for smooth opacity transition when thumbnails are hovered over
  • Optimized file size for faster loading
  • Improved Dreamweaver integration
  • Improved extension installation for DW CS 5.5+

George Petrov

George PetrovGeorge Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. His expertise in countless languages and technologies gives inspiration and teach valuable lessons on his website – DMXzone.com, which is visited daily by more than 30.000 people and is most popular for its over high-quality Dreamweaver extensions and templates.

See All Postings From George Petrov >>

Share this Article