jQuery (plug-in) fade in fade out slider

Question

I am trying to build a jQuery slider.

This will fade in and fade out images that ares "stuck" in the same place. (Is this explanation clear).

A little bit like this:

http://d2o0t5hpnwv4c1.cloudfront.net/377_slider/slider_sourcefiles/slider.html

But without the horizontal moving.

Can you point me to something similar, so I can modify it to my purpose but still dont have to reinvent the wheel?

Thanks in advance!

BTW I hope the explanation is clear enough if not please ask for clarifications I will edit until it is sufficiently clear!

Answer 1

Something like this? http://jsfiddle.net/Ender/9zqbY/

Using the jQueryUI slider widget, you should be able to implement this pretty easily. My demo is far from perfect, but it should be enough to get you on the right track. With the jQueryUI slider, you can bind a function to the slidechange event to fade your images in and out. Here's a sample of that function:

$('#slider').bind("slidechange", function(event, ui) {
   var newIndex = $("#slider").slider("value");
   var oldIndex = $('#sliderContent .item').index('.shown');
   if (newIndex != oldIndex) {
       $('.shown').fadeOut().removeClass('shown');
       $('#sliderContent .item').eq(newIndex).fadeIn().addClass('shown');
   }
});

Good luck!