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.
Overview
Features Highlights:
- 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.
- 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!
- HTML5 Animations with Canvas, CSS3 and jQuery – No Flash required!
- Rich choice of slide transitions – You can choose between Fade, Reveal, Push, Slide or Random transition for your slides.
- Cool looking navigation control - Available in many styles and fully stylable with CSS.
- Title and description for each slide - A cool title and description can be displayed as additional slide info
- Full control of the position of title and description as well the navigation controls
- 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
- New Full Support for Dynamic Slideshows - Now you can choose to connect your slideshow directly to a Dynamic Data Source like a recordset, Feed Genie ASP/PHP or even Spry
- NEW: Now also available as Advanced HTML Editor 3 Add-on!
* For complete Features overview press the Features in Detail.
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.
- 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!
- HTML5 Animations with Canvas, CSS3 and jQuery – No Flash required!
- Rich choice of slide transitions – You can choose between Fade, Reveal, Push, Slide or Random transition for your slides.
- Cool looking navigation control - Available in many styles and fully stylable with CSS.
- Title and description for each slide - A cool title and description can be displayed as additional slide info.
- Full control of the position of title and description as well the navigation controls
- 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.
- 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.
- 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.
- Timed transitions on slides and text - You can specify the duration of the slide, the text and the transitions.
- 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.
- 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.
- Great Dreamweaver Integration - Interactive dialog in Dreamweaver with all the options you’ll need.
- An inline property inspector - The property inspector enables you to change several options after you’ve created the slideshow
- 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.
- Full Support for the DMXzone Behavior Connector - You can easily bind other DMXzone extensions like DMXzone Lightbox, Sliding Panels and Sliding Bilboard to your slides.
- 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.
- 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
-
Grand Hotel Showcase
For this stunning hotel showcase we used the Advanced CSS Animator to create drop effect of the website sections on page load and also to animate the navigation menu buttons. Also the features images ...
-
Travel Agency Showcase
For this showcase we used the HTML5 Slideshow to display beautiful images on the background and two HTML5 Parallax Sliders for the content. One is vertical and the other one horizontally oriented.
-
Seasonal Photography Showcase
For this showcase we only used the HTML5 Slideshow for the background images, which are coordinated with the HTML5 Parallax Slider once on the foreground through the behavior connector.
-
IT Company Website Showcase
For this showcase we used the HTML5 Slideshow that's connected with the HTML5 Parallax Slider through the behavior connector and both together bring an amazing user experience when browsing the ...
-
Music Contact Us Form with Notify Showcase
For this showcase we created a contact form with button, which submits the form and retrieve the result on the same page with the help of DMXzone Ajax Form. The confirmation is executed with the ...
-
Property For Sale Showcase
For this showcase we used the Universal Responsive Design Template. The CSS customized Universal CSS Navigation Menu serves as a website navigation through the pages and has curved shadow added with ...
-
Responsive Mobile Device Template Showcase
For this showcase page, we supplied the HTML5 Slideshow with awesome images that have title and description, added a DMXzone Google Maps for the office location and customized the CSS of the ...
-
Universal Responsive Design Showcase
For this showcase we used the already customized Universal CSS Navigation Menu, awesome images to supply the HTML5 Slideshow in the header, great images for the thumbnails and DMXzone Google Maps ...
-
HTML5 Slideshow Responsive Showcase
In this showcase we used our HTML5 Slideshow extension to create a responsive slider. Now it adapts to fit your computer or device screen size.
-
HTML5 Slideshow with Customized CSS
In this showcase we use HTML5 Slideshow in order to create a slideshow on our page. By clicking on any button under the slideshow you can change the current slide. We have styled the default ...
-
360 Degrees View Showcase
In this showcase, we used 36 images, each photographed with 10 interval and added them to an HTML5 Slideshow. In order to simulate the rotation, we connected the horizontal DMXzone Slider to the ...
-
Real Estate Page Showcase
In this real estate showcase page you can see how we combined awesome website navigation(Universal CSS Navigation Menu), stunning image slideshow(HTML5 Slideshow) and a right sidebar divided in ...
-
Harley Website Showcase
In this showcase we used HTML5 Slideshow as a header to present different pictures and DMXzone Tabs in order to separate the content into categories for better preview.
-
Music All Around Showcase
In this showcase we used the HTML MP3 Player to accompany the sliding images in the HTML5 Slideshow, which change with random effects.
-
HTML5 Slideshow and Spry Data Set
In this showcase Miro used a standard Dreamweaver Spry data set as a source for the HTML5 Slideshow.
-
Restaurant & Bar Showcase
For this showcase web site there were only 3 extensions used. The slider is created with the updated HTML5 Slideshow that changes the images, Universal CSS Navigation Menu to navigate through the ...
-
Facebook Hot Offers Tab Showcase
In this showcase is designed as a Facebook Fan Page Tab and you can see how amazingly you can present your products in a fantastic HTML5 Slideshow. The thumbnail images are navigate the slideshow ...
-
Facebook Fan Page Showcase
In this showcase is designed as a Facebook Fan Page Tab and you can see how amazingly you can present your products in a fantastic HTML5 Slideshow. The thumbnail images are navigate the slideshow ...
-
Hotel Showcase
In this showcase you can try how the HTML5 Slideshow works as an Add-on for the Advanced HTML Editor 3. In order to open the Online Page Editor - CTRL+SHIFT+2 (username: demo; password: demo). Once ...
-
Sliding Cookbook Showcase
For our demo we used Sliding Menu as navigation, where you can go through the pages. The whole book is 'wrapped' in Sliding Panels and the images are greatly presented in HTML5 Slideshow. *Preview ...
-
Skatepark Showcase
The showcase has been created with HTML5 Slideshow, which slide your pictures with description possibilities, the customized Universal CSS Navigation Menu is taking care of the top navigation and the ...
-
Fashion Website
This website home page has been designed with the help of Universal CSS Navigation Menu , HTML5 Slideshow and HTML5 Image Enhancer. All extensions can be viewed in our Extensions section.
-
Hotel Template
The design is created with some of the finest DMXzone extension: HTML5 Slideshow, Universal CSS Navigation Menu, Sliding Panels, DMXzone Calendar and HTML5 Image Enhancer. You can download this ...
-
HTML5 Slideshow & HTML5 MP3 Player
In this showcase we used the HTML MP3 Player to accompany the sliding images in the HTML5 Slideshow, which change with random effects.
-
Spa Website Showcase
If you were wondering where to put the HTML5 MP3 Player in great use, here is another example. The Player is not visible but plays some amazing background music and can be enabled and disabled easy ...
-
DJ Website Showcase
All you need for this showcase is HTML5 Slideshow, HTML5 MP3 Player and some creativity. We did a website with our friend QJ's music from Adultempo Specialists, who was excited to see how we bind his ...
-
HTML5 Slideshow & Flash MP3 Player
In this showcase you can see how we combined HTML5 Slideshow and Flash MP3 Player. We've actually have two players that play music, one as a background and the other one for each image.
-
Photography Website 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 ...
-
HTML5 Slideshow and Advanced CSS Animator
In this showcase we combine the power of the Advanced CSS Animator to extend the functionality of the HTML5 Slideshow by setting each image Title and Description in separate div element, which is ...
-
HTML Slideshow and Feed Genie
In this showcase, created by our bug-ninja Miro, you can explore how he combined HTML5 Slideshow and Feed Genie in other words, images feeds and a slideshow, so that you can always have your favorite ...
-
HTML5 Suite
In this showcase we've used seven out of nine extensions packed in the HTML5 Suite to create a Website. We've also added tips, so you can explore each detail how it's been made and which extensions ...
-
HTML5 Slideshow & Ajax DataGrid
In this showcase you can see how easy it is in an event calendar to display additional info, which is placed in a grid.
-
HTML5 Slideshow Showcase
The showcase is a showcase of a site header created with HTML5 Slideshow. And If you're still wondering - it's not Flash!
-
HTML5 Slideshow & Advanced Tooltips
The showcase shows a special behavior that can be used for multiple purposes such as Hinting and Content Review.
-
HTML5 Slideshow & DMXzone Lightbox
The showcase shows you how to open your HTML5 Slideshow in a nice Lightbox window.
-
HTML5 Slideshow & DMXzone Lightbox
The showcase shows you how you can open your Slideshow images in a stylish Lightbox.
-
HTML5 Slideshow Features Showcase
In this showcase you can navigate the HTML5 Slideshow with the custom navigation, choose one of the designs and experience some of the features packed in the extension.
-
HTML5 Slideshow Design
In this showcase you can navigate the HTML5 Slideshow with the custom navigation, choose one of the designs and experience some of the features packed in the extension.
-
HTML5 Slideshow Showcase
In this showcase you can navigate the HTML5 Slideshow with the custom navigation, choose one of the designs and experience some of the features packed in the extension.
Videos
Basic Usage
Creating Basic HTML5 Slideshow
With this movie we will show you how to create a basic slideshow using HTML5 Slideshow.
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
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.
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.Combined Usage
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.
Opening HTML5 Slideshow in a Lightbox
With this movie we will show you how to show your HTML5 Slideshow in a nice DMXzone Lightbox popup.
Combining HTML5 Slideshow with DMXzone Lightbox
With this movie we will show you how to open your HTML5 Slideshow images in DMXzone Lightbox.
Navigate Sliding Panels with HTML5 Slideshow
Creating HTML5 Slideshow Using Spry Data Set
HTML5 Slideshow Overview
Working with HTML5 Slideshow and Behavior Connector
Using File Genie as a Data Source for HTML5 Slideshow
Creating a Responsive HTML5 Slideshow
Controlling HTML5 Slideshow with DMXzone Slider
Inserting HTML5 Slideshow within DMXzone Tabs
Using HTML5 Slideshow with Online Page Editor
Integrating HTML5 Slideshow within the Advanced HTML Editor 3
Bringing HTML5 Music to Your Slideshow
Using Overlay Images with HTML5 Slideshow
Add Music to Your HTML5 Slideshow
Building a Photography Website - Part 1
Creating Image Gallery with Animated Thumbnails
Spry Data Set as a Source in HTML5 Slideshow
Showing Picasa Featured Photos within HTML5 Slideshow
Applying a nice Spin-in Effect to HTML5 Slideshow
Controlling HTML5 Slideshow with Ajax DataGrid
Creating Dynamic HTML5 Slideshow
Requirements
History
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 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.
