Looking for a blur-slider

[Seher-Design]

Dear friends of dynamicdrive,
I'm a great fan of dynamicdrive, you have so much great codes and helps for web designers.

Currently I'm looking for a blur-slider, such as here: www.notare-feist-kristic.de
This are fine smooth transitions between the images. It is a fall-back to blurred images and are looking great for a decent noble design. But how they did it?
Do you have an idea for a script? I find no way to copy and run well the script they have there on this site, although it is "only" jQuery. They are loading the images every new, but is this a good way?
I'm not a coder but a designer ;-(

Do you have an idea for this?

Love and greetings from Germany
Christoph Seher

[simonf]

Hi

Try http://wowslider.com/ you can download it and select pics and choice various option including "blur"

rgds, Simon

[jscheuer1]

That's actually just a fading slideshow. The only thing special about it is that the length of time you see each image is set separately as needed to give the blur effect. The blur is no trick of css or javascript though. Those are actual blurred images made in an image processing program. The fade slider slides to the blurred version of the current image (making it appear to get blurry), then quickly to the blurred version of the next image, then also quickly to the clear version of that next image making it appear to come into focus. Then it stays on that clear image for a longer time. Then the process repeats for the next image. The amount of time set for each transitional image varies as well as the amount of time allotted for each to fade in. Dynamic Drive has a fading slideshow which I modified awhile back to have this ability (varying display times and fade rates for slides). I'll see if I can locate it. If not, I can fairly easily recreate it. The basic slideshow is: http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

You might like it just as it is. But, as I say, it can be modified to have these varying times so that, if you make up the blurred versions of your images, you can get the same sort of effect you see in the page you linked to.

I also think that using css3 one could get images to both fade and blur, but it wouldn't work in all browsers, only those that support the css3 filter property and its blur() function. But that might be a better approach because it would require less images and therefore less loading overhead.

[Seher-Design]

Thanks John for answer!

Yes, the basic fade-in slideshow could be nice, I did consider it. I think currently the best way for browser-crossing is to make the blur images separatly in Photoshop or similar. If we would have the option to adjust the duration time of single images it would be the most simple way. If we have images 1, 2 and 3 and the blur versions 1-b to 3-b, we would need to set the times separately for 1 / 1-b / 2-b / 2 / 2-b / 3-b / 3 / ... This would give the nice blur effect. Maybe you can find the modified version?

Greetings
Christoph

[jscheuer1]

That's exactly what I was thinking. The show you linked to had that same assortment of images. The script doesn't even need to be edited as I recall, it's initialization allows for tweaking that behavior.

Why not setup your slideshow using the fadeslideshow script and your set of clear and blurred images? I should have the modification found or recreated by that time and it would be good to see what you have in order to help you fine tune it.

[Seher-Design]

Alright, thanks for help John!
I did attempt to use this script, but something was wrong. Maybe I did delete too much from it, for I don't need this Wurfl scripts etc. I only need the slider. I'll try it again tomorrow. I thought, first I want to looking for at DD, maybe there is a good one. You have so much great scripts there. I think I also did donate earlier.
Till tomorrow.
Sorry for my english :-/

Christoph

[jscheuer1]

I got this working (using images and blurred versions of them from css3, but it can also work with actual blurred images), either way you still need to have a working slideshow to add it to. Your English is probably better than my German (is it?). I'm not sure what you mean by Wurfl, I don't think that's a part of the fadeslideshow script. If Wurfl is something your host has and you cannot just put up a simple page, that might be a problem. I've seen cases like that before. But if you're just having trouble setting up a simple version of the slide show on a regular host, just do your best and make a link to it from here. I can tell you how to fix it.

Demo:

http://jscheuer1.com/garden/index_blur_timing.htm

After experimenting, this appears to not blur (but degrades nicely) in IE, works OK in Chrome and Opera, great in Firefox. I'm sure it would go well in all browsers if we use actual blurred images instead of copies of the images blurred using css as in the above demo.

Here's a demo using actual blurred images:

http://jscheuer1.com/garden/index_blur_timing_blurred_folder.htm

[Seher-Design]

Thank you John, it's great!
I can use both of it, I think the code with the real blurred images would maybe better work border cross.

It's a great help, thanks verry much! I always wondering how someone can write such scripts ...

The Wurfl script is a part of the js code of the page I had linked to. It is linked in it to wurfl.io/wurfl.js. It seems to have to do with apps and devices. I did try to delate, but than the page didn't work.

If I have a question to the code I'll contact again.
Begin of November I'll send you a donation. Thank you verry much!

Greetings from indian summer in Bavaria.
Christoph