ajaximage.js

Ajax tutorial archive

var dom = (!document.all && document.getElementById);
var gallery_index = 0;
var description_index = 0;

function ajaxManager()
	{
	var args = ajaxManager.arguments;
	switch (args[0])
		{
		case "array_setup":
			galleryArray = new Array();
			galleryArray[0] = "image1.html";
			galleryArray[1] = "image2.html";
			galleryArray[2] = "image3.html";
			galleryArray[3] = "image4.html";
			galleryArray[4] = "image5.html";
			galleryArray[5] = "image6.html";

			descriptionArray = new Array();
			descriptionArray[0] = "description1.xml";
			descriptionArray[1] = "description2.xml";
			descriptionArray[2] = "description3.xml";
			descriptionArray[3] = "description4.xml";
			descriptionArray[4] = "description5.xml";
			descriptionArray[5] = "description6.xml";
			break;
		case "load_page":
			var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
			pageWidth = (dom) ? innerWidth : document.body.clientWidth;
			preload = document.getElementById("preloadLYR");
			gallery = document.getElementById("galleryLYR");
			if (x)
				{
				x.onreadystatechange = function()
					{
					if (x.readyState == 0)
						{
						preload.innerHTML = "initializing";
						}
					else if (x.readyState == 1)
						{
						preload.innerHTML = "processing request";
						}
					else if (x.readyState == 2)
						{
						preload.innerHTML = "request acknowledged";
						}
					else if (x.readyState == 3)
						{
						preload.innerHTML = "loading data..";
						setOpacity(0, 'galleryLYR');
						setOpacity(0, 'captionLYR');
						}
					else if (x.readyState == 4 && x.status == 200)
						{

						el = document.getElementById(args[2]);
						el.innerHTML = x.responseText;
						preload.innerHTML = "Standy: Fading Image In...";
						getImageSize = document.getElementsByTagName("img")[0].getAttribute("width");
						gallery.style.left = (pageWidth - getImageSize) / 2+"px";
						preload.style.left = (pageWidth - getImageSize) / 2+"px";
						document.getElementById('captionLYR').style.left = (pageWidth -	getImageSize) / 2+"px";
						document.getElementById('accessLYR').style.visibility = "hidden";
						setTimeout("fadeIn('galleryLYR', 0, '99.99')", 1200);
						setTimeout("fadeIn('captionLYR', 0, '99.99')", 1300);
						}
					}
				x.open("GET", args[1], true);
				x.send(null);
				}
			break;

		case "cycle_gallery":
			if (args[1] == 'forw' && gallery_index != galleryArray.length - 1)
				{
				gallery_index++;
				description_index++;
				ajaxManager('load_page', galleryArray[gallery_index], 'galleryLYR');
				ajaxManager('load_page', descriptionArray[description_index], 'captionLYR');
				}
			else if (args[1] == 'rev' && gallery_index != 0)
				{
				gallery_index--;
				description_index--;
				ajaxManager('load_page', galleryArray[gallery_index], 'galleryLYR');
				ajaxManager('load_page', descriptionArray[description_index], 'captionLYR');
				}
			break;
		case "hide_access":
			document.getElementById('accessLYR').style.visibility = "hidden";
			break;
		case "start_up":
			ajaxManager('hide_access');
			ajaxManager('array_setup');
			ajaxManager('load_page', galleryArray[gallery_index], 'galleryLYR');
			ajaxManager('load_page', descriptionArray[description_index], 'captionLYR');
			break;
		}
	}

function fadeIn(id, startfade, endfade)
	{
	timer = 0;
	if (startfade < endfade)
		{
		for (i = startfade; i <= endfade; i++)
			{
			setTimeout("setOpacity(" + i + ",'" + id + "')", (timer * 20));
			timer++;
			}
		}
	}

function setOpacity(opacity, id)
	{
	var el = document.getElementById(id).style;
	el.opacity = (opacity / 100);
	el.MozOpacity = (opacity / 100);
	el.KhtmlOpacity = (opacity / 100);
	el.filter = "alpha(opacity=" + opacity + ")";
	}