AJAX Image Sliders: Part 1
This is Part 1 of a multi-part blog series.
- The OnDemand method
- The Interval method
- 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:
- An img tag
- An input tag to hold/edit the value(I used a text box)
- A JavaScript slider control (YUI slider in this example)
- Some JavaScript event handlers
- 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>
