jQuery - заставить элемент без слайдов прослушивать событие «слайд»

Question

У меня есть ползунок jQuery UI на странице, которую я создаю. Он управляет типом слайд-шоу.

Я хочу, чтобы каждый элемент в моем слайд-шоу прослушивал событие слайда слайдера. После этого события каждый элемент оценивает свою позицию, определяя, находится ли он в видимой области слайд-шоу. Если это так, он загрузит собственное изображение, а затем удалит слушателя для события слайда.

Цель состоит в том, чтобы каждый элемент управлял загрузкой своего изображения. Есть ли способ, которым я могу добиться этого в jQuery?

Answer 1

Мне нравится использовать пользовательские события jQuery для настройки прослушивателей, подобных этой.

Вот пример: http://www.spookandpuff.com/examples/SliderPublishEvents.html

По сути, вы привязываете собственный обработчик событий к каждому слайду (в моем примере это называется «обновление»), который выполняет любую логику, в которой вы нуждаетесь (определение позиции, загрузка изображений и т. Д.). Для каждого слайда вы можете вызвать событие, например так: $(slide).trigger('update').

Чтобы обновить все слайды, вы можете привязать событие к самому слайдеру (или к любому контейнеру для всех слайдов). В моем примере это называется «обновить». Все, что это делает, это вызывает событие «обновление» на всех слайдах:

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

Параметр [position] предназначен для определения положения слайдера, что доступно из события 'slide' в jQuery. (Он установлен как массив из одного элемента из-за того, как jQuery обрабатывает эти данные - это немного замешательство).

Итак, когда вы устанавливаете ползунок, присвойте обратный вызов следующим образом:

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

Тогда нужно просто поместить логику для каждого слайда в обработчик события обновления для самого слайда. Вам тоже нужна помощь?