Adding the JavaScript

In the last tutorial we actually got our template to look the same as in our original design so all that remains to be done appearance-wise is to start substituting for our placeholder text and images. We'll get to that later though because first we need to sort out how we want the page to behave by adding some JavaScript.

The way we currently have the page coded clicking on any of the thumbnail images will open the larger image as a replacement page. What we really want is for those larger images to open within the current web page as an overlay to the page content. This isn't a tutorial on actually writing JavaScript (particularly since the behaviour you want to add to your template is unlikely to be the same as the behaviour I want to add to mine). For this example I am using a JavaScript that I wrote myself so that I know that it will actually work properly if inserted into the template.js file that we created way back at the start (this particular one would also work if inserted into the head of the page). What you do want to get in order to avoid messing up your nice clean HTML template with JavaScript is an unobtrusive script that is specifically designed to be inserted into just one spot in the page - at the end of either the head or body of the page. Those designed to go at the end of the head should also work when placed at the end of the body with the added advantage of having the rest of the page load before the script rather than after.

My script also requires an additional image and several extra lines of CSS.

#mbox{background-color:#eee; padding:8px; border:2px outset #666;cursor:pointer;}
#oly{background-image: url(overlay.png);}
* html #oly{background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");}

Now the template page not only looks like we want, it acts like we want as well. For those with JavaScript enabled clicking on an image will result in the larger version of the appropriate image opening in front of the web page with a semi-transparent overlay behind it partly concealing the page until the mouse is clicked on the larger image to return to the original page. For those without JavaScript the page will still function as it did before this last change with the larger images opening as separate pages. Since the script tag is at the very end of the content the page still appears to load just as quickly with the script there as it did before we added it.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow