Welcome to Atalasoft Community Sign in | Help

AJAX Image Sliders: Part 1

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

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

One of the most common dialogs in an image editor application is the slider with preview.  When you move these applications over to the Web, you end up losing some of the user experience because of the asynchronous nature of these apps.

There are several ways to use a JavaScript slider to change an image, and I will be covering at least 3 of them over the next few posts.

The "OnDemand" method:
This is probably the easiest to implement, but least user friendly.  I say it's not user friendly because the image only updates after the slider thumb has finished moving.  If we were to make the slider update for all points, it would innundate the server with requests.  The usage of a slider, however, is still an improvement over a postback or button/text field combination.  The feedback from the text box helps the user see that something is happening as well.

Here's a demonstration:

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

The server side code for this example is attached to this article (if you need it), 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><asp:Image ID="Image1" runat="server" ImageUrl="images/spacer.gif" /></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
 
 function init(){
  _slider = YAHOO.widget.Slider.getHorizSlider("sliderbg", "sliderthumb", 0, 200);
  _slider.subscribe('change', chgValue); // Updates the text field while the value is changing
  _slider.subscribe('slideEnd', chgImg); // We only want to change the image after we've finished sliding

        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);
 }
 
 // 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 Wednesday, April 16, 2008 10:25 AM by David Cilley
Filed under: , , ,

Attachment(s): Slider_OnDemand.aspx.cs

Comments

Thursday, April 17, 2008 5:00 PM by DotNetKicks.com

# Creating Image Sliders with AJAX - Part I

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

Monday, April 21, 2008 6:28 PM by David Cilley's AJAX Imaging Blog

# Ajax Image Sliders Part 2: Intervals with On Demand

On the previous slider example , I used a YUI slider that had a range from -100 to 100. This is a total

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

# http://yuiblog.com/blog/2008/04/24/david-cilley-image-sliders/

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

Anonymous comments are disabled