The first public fruit of my collaboration with The Image Shoppe has just launched in the form of a new site for Bazzani Associates. Anyone living close to downtown Grand Rapids will recognise the name Bazzani as they have been behind numerous high-profile building and renovation projects lately. I was particularly glad to be able to work with them because of their emphasis on sustainable building practices that go beyond ‘green building’ to look at the long term viability of the communities within which they are building.

This is a first-phase rollout of the site and we have plenty more yet to come, particularly in the form of portfolio details, case studies and the like. For now, it’s all built in (valid) XHTML/CSS/JavaScript but the next phase will include a more sophisticated backend. The key challenge, beyond working around the layout vagaries of IE/Win was getting the mouseover behaviours on the alpha-transparent PNGs to work effectively without hardcoding any image locations.

I made use of Drew’s extension of youngpup’s Sleight code to get the transparency working properly (setting links to relative positioning to ensure they worked) and altered it slightly so that the original URL of the PNG is stored in an attribute of the image, meaning I can access it using the DOM later on. Interested parties can view the source here.

Recommend this post:

The gallery script I posted about on Friday was a nice improvement on plain image switching, but didn’t quite have the elegance I was looking for, particularly when switching between images of different sizes. Yesterday, I managed to grab some time to play around with resizing images using javascript so as to produce a smoother transition. The effect is rather pleasing.

It works by preloading each image shortly before it might be needed, and using the dimensions of the preloaded image to calculate increments to change the displayed image dimension by. After stepping through the resizing, we then switch the previous image to the background, change our container’s source to the new image, and fade it in.

You can find the code and see a sample here.

Recommend this post:

Some months ago, through a long-forgotten source, I came across this technique for fading in images without using flash and I’ve been looking for an excuse to play around with such techniques. Today, work on a new page for Calvin gave me such an excuse.

I wanted to use the technique within a javascript image gallery. I needed to be able to advance through a set of images and wanted to fade each in in turn. Since the images were named numerically, all it appeared to involve was a couple of javascript functions to increment or decrement a counter and update the photo accordingly. Because I’d be using the same image tag for all the images, I also tweaked the original’s functions to use a predefined object rather than making use of the DOM each time.

It all worked splendidly on my local server, but uploading to a test server I realised that I’d need to preload the images if I wanted to avoid flickering. I added in calls to check whether the next image had been previously loaded, and if not preload it into an array, and the flickering disappeared.

The resulting code is:

	/* counter keeps track of which image we're displaying */
	var counter;

	/* display will be the pointer to the image object we're
	 * working with
	 */
	var display;

	/* totalimages is the number of images we're displaying, so we can reset
	 * counter if necessary
	 */
	var totalimages = 9;

	/*
	 * pics will hold our pre-loaded images
	 */
	var pics = new Array();

	/* This function is called by the onload attribute of the
	 * body tag
	 */
	function initPage()
	{
		container = document.getElementById('display');
		display = document.getElementById('display_image');
		counter = 1;
		pics[1] = new Image();
		pics[1].src = 'slideshow/1.jpg';
		pics[2] = new Image();
		pics[2].src = 'slideshow/2.jpg';
		pics[totalimages] = new Image();
		pics[totalimages].src = 'slideshow/'+totalimages+'.jpg';
	}

	function advance()
	{
		if (counter == totalimages) {
			counter = 1;
			nextcounter = 2;
		} else if (counter == totalimages - 1) {
			counter++
			nexcounter = 1;
		} else {
			counter++;
			nextcounter = counter + 1;
		}
		setOpacity(0);
		display.src = 'slideshow/'+counter+'.jpg';
		if (! pics[nextcounter]) {
			pics[nextcounter] = new Image();
			pics[nextcounter].src = 'slideshow/'+nextcounter+'.jpg';
		}
		fadeIn(0);
	}

	function retreat()
	{
		if (counter == 1) {
			counter = totalimages;
			nextcounter = counter - 1;
		} else if (counter == 2) {
			counter--;
			nextcounter = totalimages;
		} else {
			counter--;
			nextcounter = counter - 1;
		}
		setOpacity(0);
		display.src = 'slideshow/'+counter+'.jpg';
		if (! pics[nextcounter]) {
			pics[nextcounter] = new Image();
			pics[nextcounter].src = 'slideshow/'+nextcounter+'.jpg';
		}
		fadeIn(0);
	}

	/* Altered from the original to use the global 'display'
	 * object
	 */
	function setOpacity(opacity)
	{
		opacity = (opacity == 100)?99.999:opacity;

		// IE/Win
		display.style.filter = "alpha(opacity:"+opacity+")";

		// Safari<1.2, Konqueror
		display.style.KHTMLOpacity = opacity/100;

		// Older Mozilla and Firefox
		display.style.MozOpacity = opacity/100;

		// Safari 1.2, newer Firefox and Mozilla, CSS3
		display.style.opacity = opacity/100;
	}

	/* Altered from the original to use the global 'display'
	 * object
	 */
	function fadeIn(opacity)
	{
		if (opacity < = 100)
		{
			setOpacity(opacity);
			opacity += 10;
			window.setTimeout("fadeIn("+opacity+")", 100);
		}
	}

Since it will eventually load all the images into an array, this may not be a good technique to use with large galleries. But for a small one, such as that I was working with there isn’t much to worry about.

UPDATE: I’ve refined this method further and written about it here.

Recommend this post:

It was only a matter of time before libraries emerged to make use of XMLHTTPRequest increasingly transparent to web developers. Jesse Garrett’s coining of the term ‘AJAX’ (Asynchronous JavaScript + XML) seems to have quickly caught on, and last night Anil posted on ProNet about a PHP toolkit called SAJAX.

SAJAX is a nice first generation library. It allows the developer to register functions in their PHP and then produces javascript to allow the resulting page to make use of those functions. It’s lightweight (146 lines) and easy to use. The key thing that’s missing at the moment are a couple of wrappers that would allow it to integrate with templating systems — the only output functions print the javascript directly.

I’m wondering how long it’ll be before we start to see libraries that help build complete UIs based around the AJAX approach; building classes similar to those of DB_DataObject_FormBuilder and automatically enabling AJAX behaviours for the updates. That would certainly allow for rapid development of interesting applications.

UPDATE: I’m told that version 0.6 of SAJAX will offer some wrappers to return the javascript into variables. That version is due on Monday, and will also include a perl module.

Recommend this post:

I’m doing a little work building a page editing tool for a CMS. Each page can have a number of different types of elements and I’ve decided that blocks of text will be controlled using FCKEditor. Rather than having a number of FCKEditor instances on a page I wanted to allow the user to be able to click on a button to instantiate an FCKEditor instance and move the text into it. After a little thought, it turned out to just require a pretty simply bit of javascript:

	function switchElement(div_id, text_area_name) {
		var our_div = document.getElementById(div_id);
		thetext = our_div.firstChild;
		var textarea = document.createElement('textarea');
		textarea.setAttribute("id", text_area_name);
		textarea.setAttribute("name", text_area_name);
		textarea.appendChild(thetext);
		our_div.appendChild(textarea);
		var oFCKeditor = new FCKeditor(text_area_name);
		oFCKeditor.BasePath	= '' ;
		oFCKeditor.ReplaceTextarea();
	}

This will convert a block of text contained within a ‘div’ element with a given ID to be converted into an FCKEditor instance. It’ll be pretty trivial to develop this to create the whole form. The next step will be to use XMLHTTPRequest to allow the editing to take place inline.

In the process I noticed that the FCKEditor manual implies that when instantiating the FCKEditor object with:

var oFCKeditor = new FCKeditor(text_area_name);

the user should specify the textarea’s id attribute, but in fact it requires the element’s name attribute.

NB: Only tested in Firefox.

Recommend this post: