HTML5 Slideshow

Bring your photos to life in an amazing HTML5 slideshow in Dreamweaver. The Slideshow photo gallery is built with jQuery, is CSS based and uses HTML5 W3C standard elements like the Canvas and CSS3 Transitions, when available, for the highest animation quality and no Flash at all – so it runs on all iDevices smoothly!

Choose amazing effects from the famous director, Ken Burns to slowly zoom and pan across your photos, or use the many transitions available. The slideshow includes navigation controls in many styles so it perfectly fits your site.

The HTML5 Slideshow can be used as an Add-on for the Advanced HTML Editor 3.

$45.00
- OR -
Features
  • Amazing Ken Burns moving effect – It enables a widely used technique of embedding still photographs in motion pictures, displayed with slow zooming and panning effects, and fading transitions between them.
Ken Burns moving effect
  • Extensive Random Ken Burns - Now you can not only choose a random start and end position for the Ken Burns effect but also a random start and end factor!
random Ken Burns
  • HTML5 Animations with Canvas, CSS3 and jQuery – No Flash required!
HTML5 Animations with Canvas, CSS3 and jQuery
  • Rich choice of slide transitions – You can choose between Fade, Reveal, Push, Slide or Random transition for your slides.
slide transitions
  • Cool looking navigation control - Available in many styles and fully stylable with CSS.
navigation control
 
 
 
 
  • Title and description for each slide - A cool title and description can be displayed as additional slide info.
Title and description for each slide
  • Full control of the position of title and description as well the navigation controls
Full control for postition of title and description
  • Discover the power of HTML5 Canvas control - When available it is used to display the Ken Burns effect providing you the best quality ever.

  • CSS3 Transforms are used on iDevices like iPad and iPhone - Take advantage of the build in hardware acceleration and give you the maximum performance and greatest experience.
iPad and iPhone compatible
  • You can make HTML5 slideshows directly from dynamic sources like a Recordset, an RSS/ATOM Feed fetched with Feed Genie ASP/PHP, or even a Spry DataSet! By combining HTML5 Slideshow now with Feed Genie ASP/PHP, you can make slideshows directly from your Picasa / Flickr Photo Albums! Or just choose the featured photos!
  • Live preview of the total slideshow in Dreamweaver - With a single click on the preview button you can see a preview of your complete slideshow.
live preview in Dreamweaver
  • Integrated DMXzone Resizer - Now resizing all your images super fast to a regular size for the slideshow and bigger size for display the image in DMXzone Lightbox.
Integrated Resizer
  • Timed transitions on slides and text - You can specify the duration of the slide, the text and the transitions.
Timed transitions on slides and text
  • Easing enables special movement effect - Apply easing to your transitions. This way you can create effects such as elastic movement, accelerated movement and much more.
Easing
  • Add clickable links to your slideshow - You can add link to every image of you slideshow. If you have the DMXzone Lightbox extension installed you can automatically generate Lightbox links.
Clickable links in slideshow
  • Great Dreamweaver Integration - Interactive dialog in Dreamweaver with all the options you’ll need.
Dreamweaver integration
  • An inline property inspector -  The property inspector enables you to change several options after you’ve created the slideshow
Inline property inspector
  • Fully Controllable by behaviors - You want to navigate to specific position, start or stop the Slideshow - it can be easily done with the Control HTML5 Slideshow behavior.

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

  • Fully cross-browser compatible - Create stunning slideshows even in Internet Explorer thanks to the DMXzone’s clever use of feature detection and fall back. For example when the HTML5 Canvas control is available it is used, but when it is not available the slideshow falls back to use regular image tags.

Advanced HTML Editor 3 Integration

  • HTML5 Slideshow and Advanced HTML Editor 3 integration - Have a look at our HTML5 Slideshow fully integrated into the Advanced HTML Editor 3.
  • Expandable options dialog - Collapse and expand the options you need for your slideshow.


  • Direct image upload from your computer - You can upload images directly from your computer with the help of Pure PHP Upload 2/ Pure ASP Upload 3 and even resize them with Smart Image Processor ASP/PHP 2.



  • Image upload from your Image Gallery Add-on - If you have the Image Gallery Add-on set in your editor, you can upload from the gallery the images that you've selected.



  • Images upload from your File Manager Add-on - If you have the File Manager Add-on set in your editor, you can select the images directly from the manager.


  • Drag & Drop (Firefox and Chrome) - Drag one or many images from your personal folders and drop to upload them automatically for the slideshow.

  • Timed transitions on slides - We offer various combinations of transition effects, image placement and transition duration for your slides. 


  • Title and description - You can add title, URL and description to the images that you've uploaded. Once you've done it edit the title position, transition effect and duration in order to create the slideshow that you've always wanted.

    • Navigation - You can choose which type of control to enable in your image sliders.



    • Ken Burns effect - The HTML5 Slideshow will allow you to use Ken Burns effect and edit its position and zoom factor.

    • Fully editable settings - If you decide to change any setting at some later point, you can do that from the user friendly interface, where you can set up how the navigation will work and many other options.
    Showcases


    Videos

    Basic Usage

    Basic HTML5 Slideshow

    Creating Basic HTML5 Slideshow
    With this movie we will show you how to create a basic slideshow using HTML5 Slideshow.

    Watch the movie read more


    HTML5 Slideshow Video

    Attach Videos to your Images in HTML5 Slideshow

    With this movie we will show you how to open videos in DMXzone Lightbox by clicking HTML5 Slideshow images

    Watch the movie read more

    HTML5 Slideshow Video

    Randomize and Shuffle your Images in HTML5 Slideshow

    With this movie we will show you the new Random and Shuffle options that had recently been integrated into the HTML5 Slideshow.

    custom controls in HTML5 Slideshow

    Using Custom Controls to Navigate the HTML5 Slideshow

    With this movie we will show you how you can use custom controls in order to navigate the HTML5 Slideshow.

    Watch the movie read more

    Combined Usage

    HTML5 Slideshow Video

    Open Tooltips in your HTML5 Slideshow

    With this movie we will show you how to show Advanced Tooltips when the mouse goes over an HTML5 Slideshow images.

    HTML5 Slideshow Video

    Open HTML5 Slideshow in a Lightbox

    With this movie we will show you how to show your HTML5 Slideshow in a nice DMXzone Lightbox popup.

    html5 slideshow and dmxzone lightbox

    Combining HTML5 Slideshow with DMXzone Lightbox

    With this movie we will show you how to open your HTML5 Slideshow images in DMXzone Lightbox.

    Watch the movie read more

    • Navigate Sliding Panels with HTML5 Slideshow
      – Use the behavior connector to navigate the panels
    • Creating HTML5 Slideshow Using Spry Data Set
      – Retrieve HTML5 Slideshow images from a XML file
    • HTML5 Slideshow Overview
      – A video presentation on the features in HTML5 Slideshow
    • Working with HTML5 Slideshow and Behavior Connector
      – Create a div container with text, which is changed through the HTML5 Slideshow
    • Using File Genie as a Data Source for HTML5 Slideshow
      – Make HTML5 Slideshow on the fly with File Genie as a data source
    • Creating a Responsive HTML5 Slideshow
      – Design your HTML5 Slideshow to fit any screen and device
    • Controlling HTML5 Slideshow with DMXzone Slider
      – Change the HTML5 Slideshow image by dragging the DMXzone Slider handle
    • Inserting HTML5 Slideshow within DMXzone Tabs
      – Add an amazing image gallery within your DMXzone Tabs
    • Using HTML5 Slideshow with Online Page Editor
      – Create your slideshows directly from the browser
    • Integrating HTML5 Slideshow within the Advanced HTML Editor 3
      – Create your slideshows directly in the Advanced HTML Editor 3
    • Bringing HTML5 Music to Your Slideshow
      – Wire your Slideshow with Sound
    • Using Overlay Images with HTML5 Slideshow
      – Create a Slideshow with Overlay Images
    • Add Music to Your HTML5 Slideshow
      – Enhance your Slideshow with a great MP3 Player
    • Building a Photography Website - Part 1
      – Building a Photography Website Combining 5 of our Finest DMXzone Extensions
    • Creating Image Gallery with Animated Thumbnails
      – Amazing image gallery with aminated thumbnails
    • Spry Data Set as a Source in HTML5 Slideshow
      – Use Dreamweaver Spry Data Set as a Source
    • Showing Picasa Featured Photos within HTML5 Slideshow
      – Present your Picasa images in a Slideshow
    • Applying a nice Spin-in Effect to HTML5 Slideshow
      – Using one of the Advanced CSS Animator predefined animation presets.
    • Controlling HTML5 Slideshow with Ajax DataGrid
      – Connect your Slideshow with a DataGrid using Behavior Connector
    • Creating Dynamic HTML5 Slideshow
      – Retrieve images from a Dynamic source
    Requirements
    Type: Behavior
    License: External link
    Product: Dreamweaver 8, Dreamweaver CS3, Dreamweaver CS4, Dreamweaver CS5/CS5.5 and CS6, Dreamweaver CS5.5, Dreamweaver CC
    Platform: Win XP/2000/2003/2008/7, Mac OS X
    Browser: Opera 8, Opera 9, Safari 2.0, IE 7, Firefox 3.6+, Opera 9.5, Safari 3, Chrome 9+, IE 8, Safari 4+, Opera 10+, iPad
    Used Technologies: jQuery, CSS
    Screen Shot: External link
    Tags: html5,slideshow,css,jquery,dreamweaver


    History

    Version 1.5.1

    • Included the latest jQuery 1.11.1
    • Improved for Dreamweaver CC 2014
    • Improved for DMXzone Extension Manager

    Version 1.5.0

    Version 1.2.4

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

    • New integration with File Genie ASP/PHP! Now you can use any folder as dynamic image source!
    • Improved integration with dynamic data
    • Improved DW integration
    • Improved installer for DW CS6

    Version 1.2.2

    • New responsive capabilities! Now you can specify width 100%,image placement fill or fit and the slideshow will automatically resize itself to fit your desktop or mobile device browser! 
    • Improved behavior connector events and compatibility with the latest jQuery
    • Latest jQuery 1.7.2 included
    • Improved installer for DW CS 5.5+

    Version 1.2.0

    • Now also available as Advanced HTML Editor 3 Add-on!
    • Improved Dreamweaver Interface and context help
    • All options in Dreamweaver now generate valid JSON config

    Version 1.0.6

    • Included latest jQuery 1.6.3
    • Fix for fade effect in older Internet Explorer versions

    Version 1.0.5

    • Improved Dreamweaver UI
    • Smaller JavaScript files by better compression
    • Improved jQuery version recognition and include
    • Improved related files include method
    • Improved working in Dreamweaver templates
    • Compatibility now with site root relative links Dreamweaver option for making all includes site root relative

    Version 1.0.4

    • Included new jQuery 1.4.4
    • Improved depended file includes
    • Improved includes and cleanup of styles

    Version 1.0.3

    • You can make HTML5 slideshows directly from dynamic sources like a Recordset, an RSS/ATOM Feed fetched with Feed Genie ASP/PHP, or even a Spry DataSet! 
    • By combining HTML5 Slideshow now with Feed Genie ASP/PHP, you can make slideshows directly from your Picasa / Flickr Photo Albums! Or just choose the featured photos!
    • Optimized image preloading
    • Native support for Spry as data source

    Version 1.0.2

    • Improved IE positioning and Ken Burns
    • Improved iPad support, now the slideshow is smoother and faster than ever!
    • Smart linking to case sensitive styles folder

    Version 1.0.1

    • New option for starting with random slide
    • New option to shuffle the slides first

    Update Procedure:

    Just open a page using the HTML5 Slideshow. You will see a progress bar indicating new files are being copied. After that a dialog will popup with the list of the new files. Depending on if you have remote site defined and you have site synchronization enabled, the files will be automatically synchronized or you will be presented an option to upload all files.

    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 most popular for its over high-quality Dreamweaver extensions and templates.

    See All Postings From George Petrov >>

    Place your review about HTML5 Slideshow




    You must me logged in to write a review
    Reviews
    Dissappointed with lack of control
    January 8, 2012 by Jothy John

    Unlike “Active Slide Show” which has been around for quite a while and has controls over each slide on where they start and where they end and allowing custom timing for each slide, this program does not allow for individual controls. 

    Really disappointed with the lack of control over each slide. This is not good for portrait presentation where the subjects head goes missing half the time. Unless I am missing something, it does not seem to have support for audio where as “Active Slide Show” had this. Bought this to get away from flash only to be disappointed with the final output product..

    Simple fade effect won't work in IE
    September 8, 2011 by Frank D.

    HTML5 Slideshow disappoints me. It can't even do a simple fade effect in IE. Also no recent replies on bugs in the forums. There is no flexibility in the designs as well. Sorry, but I feel like this is the worst extension I bought from DMXzone and I wont recommend it. There are better sliders in the market based on jQuery for the same price, more flexibility and cross-browser support (including fade effects in IE). I ended up buying a better slider elsewhere :*(

    absolutely blindingly brilliant ... pure quality
    August 17, 2011 by Nathan Thadani

    Created dynamic slideshow in seconds .... www.ratpack.biz ... absolutely blindingly brilliant !

    Only downer is too many variations on the fades in/outs ... don't know which one to use ... they all look good !

    re: First Slide
    June 28, 2011 by Dane Henas

    Great plug in. On my wish list would be to have control over at least the first slide so that I can have it linger longer as a still image at first and then have it start to move. How hard would that be? ;-)

    See all 7 Reviews