KBurnalizer
New version 3.1 is out:
Download: KBurnalizer3.1.zip (standard library)
Download: KBurnalizer3.1-G2.zip (Gallery2 Module)
Older versions
Download: KBurnalizer3.zip (standard library)
Download: KBurnalizer3G2.zip (Gallery2 Module)
Download: KBurnalizer2.zip (standard library)
Download: KBurnalizer2G2.zip (Gallery2 Module)
Download: KBurnalizer.zip (standard library)
Download: KBurnalizerG2.zip (Gallery2 Module)
What is KBurnalizer?
KBurnalizer is a lightweight library to display slideshows on a web page, using the Ken Burns effect. What makes it special is that it relies only on “pure” web technology, that is, pure HTML, CSS and Javascript – no Flash, Applet or exotic plugins are required. It has been sucessfuly tested in FF 2.0, IE 7, Safari 3 Beta and Opera 9.
You can also download it as a ready-to-use Gallery2 module.
Example
What’s new on version 3.1
- Fixed a problem with Z-Index values that were creating erratic behavior in Fireforx
What’s new on version 3.0
- Additional control over visual elements, like progress bars, logos, etc..
- Support for image and transparent backgrounds
- Support for 100% width, auto-adjusting to container size
- Delayed start
- Improved memory usage and some bug fixes
What’s new on version 2.0
- Fast start (no preloading) - quite a few people pointed out that when used in large photo albums, it would take quite some time to start the slide show. This was because all images had to be preloaded before it could start, and this could a while… Now in 2.0 the slide show starts as soon has the first picture has been loaded, and it continues to load the remaining slides in the background as it progresses! Cool, uh? Well, there are a few downsides to this, though. First, there is no guarantee of which image will be the first – that is, if image number 4 is the quickest to load, then the slideshow starts on that one. There might also be some gaps, since image number 5 might not be available when 4 is finished, so it will jump to number 6, and so on. Eventually all images are loaded, and on the next round the sequence will be correct. If this is a big problem, then you can still enable the old way of preloading the images.
- Navigation and index - There is a new section on the bottom information bar that displays the current slide index, the total number of slides and has navigations buttons to go to the next or previous slide instantly.
Err… Ken Burns?
In case you didn’t know (shame on you!), Ken Burns is a famous documentary filmmaker. From Wikipedia:
In his documentaries, Burns often gives life to still photographs by slowly zooming-in on subjects of interest and panning from one subject to another. For example, in a photograph of a baseball team, he might slowly pan across the faces of the players and come to a rest on the player the narrator is discussing. […] This technique came to be known as the Ken Burns Effect, even though he did not originate the technique, and has become a staple of documentaries, slide shows, presentations, and even screen savers.
I’m sure you’ve seen it, just didn’t know the name 
Features
- Cool looking slideshow, without extra plugins.
- Can display more than one slideshow in the same page.
- Configurable size.
- Configurable duration and transition times for the slides.
- Configurable fade color.
- Choice of preloading/quick start
- Quickly jump to next and previous slide
- Optional display of the slide title.
- Random algorithm to choose the effect for each slide.
- Possibility of manually defining the effect for any individual slide.
- Pure OO Javascript library – good learning material.
How do I use it?
This depends on which file you download. If it’s just the plain library (to use anywhere), there is a small document included in the zip file explaining on to create a slideshow in your page.
If you download the Gallery2 module version, then extract the files to \gallery2\modules, go the Modules administration page, install and activate it. You should see a new item called Burnalize it! in your actions list.
Where can I use it?
Well, anywhere, really. You can include the library in any page and with a few lines of Javascript you can have it running.
It’s already included in other cool stuff you can find in this side – it’s embedded on the vSlider 3.0 theme for Wordpress, and the companion theme for Gallery2.
License
This theme (like everything else on this site) is available under a Creative Commons License (in short, you can do whatever you want with it, as long as you give me credit for the original work).
18 Responses to “KBurnalizer”
[...] New option to have multiple fading header images. This functionality is provided by KBurnalizer, which is already built-in. [...]
Also very cool!
Is there a way to make it so the plugin does not pull the same picture in each random draw. I keep getting a picture fading into the same picture (there is not a duplicate in the folder)
Nice Gallery2 module. Might I suggest that it not attempt to preload all images before starting, though? In large albums the startup time is way too long because of this.
I am currently trying to get KBurnalizer to work. got it to work but it keeps showing the same pictures many times. Any way we can change this randomization?
Great work by the way … much appreciated!
[...] Much to my wife’s dismay, I spend 3 hours this evening attempting and succeeding at fixing broken elements of the blog. The side bar now shows a random image from gallery. After searching and a little head scratching, I ran across the WPG2 support forums. I found that I needed to make an entry in the sidebar.html file and…voila, it works. I spent a little more time browsing around for neat things people had done and I ran across Rui Pereira’s website and found the KBurnalizerG2 plugin. Way cool. Thanks Rui. [...]
okay…..slowly I am figuring all this out.
I have vslider installed in wordpress and gallery correctly. Everything works good.
I have added photos to a post/page using the wpg2 plugin. Everything is good.
I am now trying to figure out how to add the slideshow to a post/page. I downloaded the standard library zip file and the gallery module is already installed and works fine! My question is how do I (when in wordpress creating a page/post) add the slideshow. I am not sure where or how I do that.
Any help would be greatly appreciated! Thanks in advance.
Hi.
I think I like this plug, however I’d like to have my photos static, without any movement. How do I set the parameters for that?
cheers from Sweden
This theme Rocks. I just landed here from a blog who was using this theme of your and and now I found out these cool stuff ..
Thanks
Ravi
http://www.on-life.org
It would be really cool if somehow the kburnalizer script could be further integrated into vslider to allow kburnalized slide shows in posts. Even better if wpg2 aware.
I cannot get the Titles to display in the KB slide show. Any clue Why?
Can I get the KB standard library to pull images dynamically from a folder instead of a static list?
The title issue appears to be a G2 DB error.
Ok.. I fixed the issues with G2’s Titles - in fact did a clean reinstall of G2.
KB still not displaying data in the title bar. The bar is there but no data .. including item count and KB Link.
Any Clue????/
I really need the Title Bar to work
Well, i figured it out…
When i activate the “ImageFrame” plugin… and select the “shadow’ frame.. Bar disappears.
I tested wit the “book” frame and had no issue.
Boy, did that take a lot of tedious troubleshooting to figure out.
I still would like to get the KB standard library to pull images dynamically from a folder instead of a static list. Or get it to interface with the G2 galleries. I want to use it as a “sample” displayer outside of the G2 gallery. Title are not important here - just images. I have images being U/L’d and deleted on a regular basis. Editing a static list is not practical. Or is there a way to wrap the KB G2 Slideshows in a HTML Page.
Greg, dynamically loading the list of images from a folder using *just* KBurnalizer is not possible, simply because it’s using only Javascript running on the browser, and there’s no way for it to access the file system of the server. But his can be done in combination with a server side technology, like PHP - vSlider actually does this. The idea is to use PHP to check the folder, assemble a list and generate the correct Javascript code on-the-fly to load the images. Here are some pointers to help you out:
- in functions.html you can find a function called vSlider_choose_header that handles the selection of files from a folder
- in header.html, around line 82 you have an example on how to dynamically create the KBurnalizer Javascript statements
Hopes this helps you out
hi all i have this wierd problem …. kburnalizer works great, but only when i (administrator rights) are logged in - for all other visitors it just says “This album has no photos to KBurnalize” - some kind of permission error?
Care to comment?