Question

I have a jQuery UI slider on the page I am building. It is controlling a type of slide show.

I want each element in my slide show to listen for the slide event of the slider. Upon the event, each element will assess it’s own position, determining whether it is in the viewable area of the slide show. If it is, it will load it’s own image and then remove it’s listener for the slide event.

The aim is for each element to be managing it’s own image loading. Is there a way I can acheive this in jQuery?

Answer 1

I like to use jQuery’s custom events to set up listeners like this.

Here’s an example: http://www.spookandpuff.com/examples/SliderPublishEvents.html

Basically, you bind a custom event handler to each slide (called ‘update’ in my example), which executes whatever logic you need it to (determining position, loading images, etc). For each slide you can trigger the event, like so: $(slide).trigger('update').

To update all the slides, you can bind an event to the slider itself (or any container for all the slides). In my example, this is called ‘refresh’. All this does is trigger the ‘update’ event on all the slides:

slider.bind('refresh', function(event, position){
    slides.trigger('update', [position]);
});

The [position] parameter is designed to take the slider’s position, which is available from the ‘slide’ event in jQuery. (It’s set as a single-item array because of the way jQuery handles this data – it’s a bit of a kludge).

So, when you set up the slider, assign the callback like so:

$('#slider').slider({
    slide:function(event, ui){
        slider.trigger('update', [ui.value]);
    }
});

Then it’s just a matter of putting the logic for each slide into the refresh event handler for the slide itself. Do you need help with that, also?