Welcome to Atalasoft Community Sign in | Help

Ajax Image Sliders Part 3: Intervals with Opacity

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

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

On the previous two slider examples, I used a YUI slider that had a range from -100 to 100, with a total of 201 possible values.  Both of these examples still have some disconnect from the action performed, and still feel like we're on the web.  I promised that we could improve upon this, and I don't mean by adding more intervals... there's one more browser trick we can use to get this right.

The Interval Opacity Method
This is possibly the most responsive method for using sliders with images in the native browser.  This method builds upon the Interval method by using browser native opacity to 'create' the missing steps between the intervals that we've already downloaded.  This also removes the OnDemand portion that was causing the flicker in Part 2.  Two image tags are shown in this method, one on top of the other, the the top one partially opaque depending on the percentage between intervals.

Without changing the server side code of Part 1, and making a few changes to the client side code that we've built in Part 2, we get a visual update for every available value of the slider.  As of this posting, this method works in IE 5.5/6/7, Mozilla Firefox, Safari, and Opera.

Here's the demo:

Here's what you need:

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

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 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>
  <input id="gammaVal" maxlength="4" size="4" type="text" value="0" style="position:relative; left:230px; top:-24px;" />
 <script type="text/javascript">
var _slider;
var _gammaVal = document.getElementById('gammaVal');
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

_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';

		YAHOO.util.Event.on(_gammaVal, "blur", checkValue);
YAHOO.util.Event.on(_gammaVal, "keydown", keyDown);

	// Changes the text field value
function chgValue(x){
_gammaVal.value = x - 100;
	// hides the image at the given interval, and the image overlaying it (if any)
function hide(i){
_imgs[i].style.visibility = 'hidden';
		if (i + 1 < _imgs.length){
_imgs[i + 1].style.visibility = 'hidden';

// shows the image at the given interval, and the image overlaying it (if any)
function show(i){
_imgs[i].style.visibility = 'visible';

if (i + 1 < _imgs.length){
_imgs[i + 1].style.visibility = 'visible';
	// Changes the shown img tag
function chgInterval(x){
var shownum = Math.floor(x/(_range/_steps));
var opacity = Math.round(((x/(_range/_steps)) - shownum) * 100);
		if (shownum != _showing){
_showing = shownum;

// set the opacity of the overlaying image, to a percentage
if (_showing + 1 < _imgs.length){
setOpacity(_imgs[_showing + 1], opacity);

setOpacity(_imgs[_showing], 100);

// sets the percentage based opacity (0-100) of the given object
function setOpacity(obj, opacity){
obj.style.opacity = (opacity / 100);
obj.style.filter = 'alpha(opacity=' + opacity + ')';

// 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){
return false;

Published Monday, April 28, 2008 3:20 PM by David Cilley
Filed under: , , ,


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

Monday, April 28, 2008 5:05 PM by DotNetKicks.com

# Ajax Image Sliders Part 3: Intervals with Opacity

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

Anonymous comments are disabled