KenBurner Slider jQuery Plugin
What is it?
Kenburner is the premium way of using a slider in your website. A combination of Ken Burns Effect, state-of-the-art Slider and Text Animations defines this slider.
Customize this slider with just a little HTML and CSS to your very needs. Give each slider some captions to transport your message. Use your Ken Burns Animated banner elements with the possibility of playing YouTube and Vimeo clips in a special detail view with describing text.
Release v.1.3 (19.08.2012)
- Chrome Major Bug with Thumbnails and Canvas Animation fixed. Shadow is removed from Thumbnails in Chrome
- New Timer function has been added (showTimer on/off via Options, and Settings.css)
- Pause Icon is shown in the Top right corner (via settings.css can be styled or removed)
Bug Fixing 16.05.2012
- Plugin Conflicts has been solved within the cssAnimation Plugin
Bug Fixing & New Features 10.05.2012
- Shadow left/right/repeated Repaired. Some sizing bug has been repaired
- In Option set Width /Height settings was not equal to outter sizing of Banner. This issue has been repaired ! Carefull, if you update to the new version, your Container will be 20px smaller because of the paddings and the borders !
- Added new option to turn on/off the Google Chrome Canvas Bug. In Chrome the fadeover transitions are swapped against slide transitions to ignore the Canvas Bug in Chrome
Google Chrome Bug / Fade Transition Bug 09.05.2012
The lates GoogleChrome Update (18.0.1025.168) has some Bug in the Canvas Rendering. Due this Bug the Fade Over transition will not work fine between the slides. You will see some Flickering by changing between slides with fade Transitions. Since this problem does not exist in IE or in FF we can only provide you a small workaround where the Plugin automatically ignore fade transitions in Google Chrome. If you interested, please download our next update !
Via the option repairChromeBug:”on” you can decide whenever you wish to change automatically the fade transition against slide transition in Chrome.Thanks a lot, and if you have any question, please do not hesitate to contact us via http://themepunch.ticksy.com !
Additional Feature Update from 10th of February 2012 :
Please use the Update Path Documentation to update your previous version.
- Added Lazy Loading function. Set via option how many slides should be preloaded
- Using Google Font is simplified. Just set via option the google font and js library.
- JS Library is minimised and merged. Profit : Quicker load of Library
Additional Feature Update from 8th of February 2012 :
- Auto Calculated holder container Size depending on Banner and Thumnail sizes
- Video Symbol on Thumbs (on/off) Option Added
- Auto slider Option
- Optional Bulletpoint Toolbar
Update from 1st of February 2012:
- IE8 2nd Slide bug removed
- Video Roll Over in IE7 and IE8 Bug removed
- cssAnimate JS bug removed
So what is so new?
For best perfomance it uses HTML5 Canvas Animation. If this is not possible in your browser it will FallBack to CSS Animation. And if you use a browser which does not this it will FallBack to a jQuery version. So it works on every modern browser (including IE7 /8) and on mobile devices with the best possible performance!
The Ken Burns is totally customizable: Start-, End Point, Zoom In or Out, Zoom Factor are all in the different slider parameters. Or go nuts and choose “Random”!
And do not forget that you not only can animate your picture transitions and the Ken Burns Effect but the elements (Text, Icons, Pics…) on each slide too. You can create unlimited amounts of objects and let them appear with style!
Does this really run on all browsers and on mobiles?
Sure it works on every modern browser (including IE7 /8) and on iOS(iPad,iPhone) and Android mobile devices due to its 3 Layer Fallback System. Touch swipe for iOS and Android mobile devices is of course included.
Check out the mobile version:
What are the features?
- Image and Thumbs fully resizable
- Using Canvas Animation with FallBack to CSS Animation and also with FallBack to jQuery
- Optional Ken Burns effect
- Unlimited Caption Layers
- Unlimited Slides
- Customizable Ken Burns Effect (StartEnd-Position and Zoom or Random)
- iPhone/iPad & Android Swipe Touch enabled
- jQuery Conflict free plugin
- Customizable 100% via Plugin Parameters / CSS / HTML
- Easy installation in your Website
- Special Easing
- Example Page included
- Example Picture Effect Instruction PSD included
- 2 Pictures are used for Hover-Effects, so you can build every effect you wish (blur, greyscale…) with your favorite image tool
Is it hard to implement?
The given example is an awesome start point to build your own slider out of it. Put the JS and CSS links in the head of your HTML site and put in some DIV elements for your items.
The Blur Transition Effect is based on the change of 2 images. Our Instruction PSD gives you the knowlegde to reproduce this effect on your pictures.
The images seen in the preview are licensed from fotolia and are NOT included in the download. The download of this item contains placeholder images with dimension labels.