David Cilley's Tutorial Series on Ajax Image Sliders

By YUI TeamApril 24, 2008

David Cilley on Ajax image sliders using YUI.

David Cilley on Ajax image sliders using YUI.David Cilley this week published the second in his series of articles on using the YUI Slider Control to provide real-time previewing of image changes.

In this second installment, David takes on the challenge of making the preview feel instantaneous without computing or delivering every possible image represented by the slider's continuum:

On the previous slider example, I used a YUI slider that had a range from -100 to 100. This is a total of 201 different combinations for one image dialog, and that's about 10-20 times more requests than a web server should have to handle in a reasonable amount of time. We want to make this look as if the slider is actually changing the image while we scroll it, but we don't want to request 201 images up front, and we don't want to load them all on demand either.

A part 3 in the series, David notes, will continue to refine the control. [Update: David has posted Part 3.]

For more Slider Control examples, check out the YUI Slider example roster; and don't miss Todd Kloots's Slider/Button example, which would be another way of presenting the control David is describing in his article series.