Welcome to Atalasoft Community Sign in | Help

Ajax Image Sliders Part 2: Intervals with On Demand

This is Part 2 of a multi-part blog series.

  1. The OnDemand method
  2. The Interval method
  3. The Interval Opacity method

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.

The Interval Method
This method requests a series of images from the server, at a set interval along the entire slider.  These images are requested as the page is loading, new requests are made when the slider has finished moving.  The pre-loaded images are stored in their own image tags, hidden and shown when needed.  This is along the same lines as many image pre-load scripts that were used for rollovers, many years ago.

Without changing the server side code of Part 1, I was able to use this method to create a slider that looks dynamic enough to fool most people into thinking it's changing it on the fly.  Because the main image tag is updated to hold the new image when the drag thumb is dropped, there can be a slight flicker.  We'll see if we can take care of that in Part 3. 

Here's the demo for this method:

Here's what you need:

  1. An img tag
  2. An input tag to hold/edit the value (I used a text box)
  3. A JavaScript slider control (YUI slider in this example)
  4. Some JavaScript event handlers
  5. A server side method that returns an updated image from a querystring containing a path and a change value
  6. A loop that creates a series of img tags on page load, and pre-populates them with images (client side)
  7. A method that shows and hides the tags as they are needed (client side)

The server side code for this example is attached the Part 1 article, I have provided the client-side code inline:

 <!-- YUI Dependencies -->  
 <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js%22%3E%3C/script>
 <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/animation/animation-min.js%22%3E%3C/script>
 <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/dragdrop/dragdrop-min.js%22%3E%3C/script>
 <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/slider/slider-min.js%22%3E%3C/script>
 
 <!-- XHTML -->
 <div>
  <div id="container"><asp:Image ID="Image1" runat="server" ImageUrl="images/spacer.gif" Width="320" Height="240" /></div>
  <div style="padding-left:6px;">Gamma</div>
  <div id="sliderbg" style="position:relative; background:url(images/bg-fader.gif) 5px 0 no-repeat; height:28px; width:228px;">
   <div id="sliderthumb" style="position: absolute; top: 4px;"><img src="images/thumb-n.gif" /></div>
  </div>
  <input id="gammaVal" maxlength="4" size="3" type="text" value="0" style="position:relative; left:230px; top:-24px;" />
 </div>
<script type="text/javascript">
 var _slider;
 var _gammaVal = document.getElementById('gammaVal');
 var _img = document.getElementById('<%= this.Image1.ClientID %>');  // ASP.NET server control is used for server side access
 var _url = 'Images/Rosebud.jpg'; // Starting image url
 var _path = '<%= this.Page.Request.CurrentExecutionFilePath %>'; // url path of this page
 
 var _imgs; // Array used to hold the img tags used for the images
 var _steps = 20;
 var _range = 200;
 var _container = document.getElementById('container');
 var _showing = 0;
 function init(){
  _slider = YAHOO.widget.Slider.getHorizSlider("sliderbg", "sliderthumb", 0, _range);
  _slider.subscribe('change', chgInterval); // Updates the text field and the image
  _slider.subscribe('slideEnd', chgImg); // Updates the image
  
  _imgs = new Array();
  // pre loads the images se we don't have to wait for them to load
     for (var g = 0; g <= _steps ; g++){
   var i = new Image();
    i.src = _path + '?img=' + _url + '&gamma=' + (g * (_range / _steps));
    i.style.left = '0px'; 
    i.style.top = '0px';
    i.style.position = 'absolute';
    i.style.visibility = 'hidden';
   
   _container.appendChild(i);
   _imgs.push(i);
  }
        YAHOO.util.Event.on(_gammaVal, "blur", checkValue);
        YAHOO.util.Event.on(_gammaVal, "keydown", keyDown);
  checkValue();
 }
 
 YAHOO.util.Event.onDOMReady(init);
 // Changes the text field value
 function chgValue(x){
  _gammaVal.value = x - 100;
 }
 // Changes the url of the img tag
 function chgImg(){
  _img.src = _path + '?img=' + _url + '&gamma=' + (parseInt(_gammaVal.value) + 100);
  hideShowing();
 }
 
 function hideShowing(){
  _imgs[_showing].style.visibility = 'hidden';
 }
 // Changes the shown img tag
 function chgInterval(x){
  var shownum = Math.round(x/(_range/_steps));
  if (shownum != _showing){
   hideShowing();
   
   _showing = shownum;
   _imgs[_showing].style.visibility = 'visible';
  }
  chgValue(x);
 }
 
 // Checks the value of the text field, and sets the slider to that value
 function checkValue(){
  i = parseInt(_gammaVal.value);
  if (isNaN(i)){
   i = _slider.getValue() - 100;
  }
   
  _slider.setValue(i + 100, false);
 }
 
 // Used to determine if the enter key has been pressed
 function keyDown(k){
  if (k.keyCode == 13){
   checkValue();
   return false;
  }
 }
</script>
Published Monday, April 21, 2008 10:23 AM by David Cilley
Filed under: , , ,

Comments

# David Cilley's AJAX Imaging Blog : AJAX Image Sliders: Part 1

Tuesday, April 22, 2008 4:18 PM by DotNetKicks.com

# Creating Image Sliders with AJAX - Part II

You've been kicked (a good thing) - Trackback from DotNetKicks.com

Thursday, April 24, 2008 10:29 AM by TrackBack

# http://yuiblog.com/

Monday, April 28, 2008 4:53 PM by David Cilley's AJAX Imaging Blog

# Sliders Part 3: Intervals with Opacity

This is Part 3 of a multi-part blog series. The OnDemand method The Interval method The Interval Opacity

Tuesday, April 29, 2008 10:59 AM by TrackBack

# http://noupe.com/best-of/websites-you-shouldn’t-have-missed-in-april-2008.html

Thursday, November 20, 2008 11:08 AM by DotNetShoutout

# Ajax Image Sliders Part 2: Intervals with On Demand

Your Story is Submitted - Trackback from DotNetShoutout

Saturday, November 15, 2014 10:35 AM by outdoor advertising South Africa

# outdoor advertising South Africa

David Cilley's AJAX Imaging Blog : Ajax Image Sliders Part 2: Intervals with On Demand

Anonymous comments are disabled