mBlog

Article | Use JavaScript To Dynamically Display Images | May 2009 | M.McKennedy

JavaScript can be used to dynamically display images on a single web page based on the anchor tag in the URL.  Why? Because I didn’t feel like creating a separate page for each image – especially since I post 1 image every single day (and have been doing this since January of 2008).  Sure it would have been simple to create a template and then find/replace certain elements of the page to account for the date change but that’s not as much fun as trying to figure it out using JavaScript.  And yes, I do understand that some users will not have their browser set to use JavaScript that’s why there is a default ‘error’ message.  And no, I do not claim to be an expert of JavaScript.

My Good Friend JavaScript

I wanted to be able to post links to my “Things I Saw” photographs on such social networking sites as Twitter and FaceBook.  The previous method was to post a link such as this http://www.mckennedy.org/photo-galleries/things-i-saw/2009/05/20.jpg the problem here is that all you see is the image, no navigation, no Google Ads, in otherwords there isn’t much of a chance that visitors will explore the other parts of McKennedy.org.   The solution, use JavaScript!

My photographs are stored in directories using this convention: yyyy/mm/dd.jpg (as seen in the URL above).  The .html page I created to hold these images and the JavaScript is called things-i-saw.html.  The new link format is http://www.mckennedy.org/things-i-saw.html#yyyy/mm/dd – (see it in action here).

Step 01: I needed a way to grab the anchor tag (the part that starts with #) from the URL.  Here’s how:

    var urlHash = window.location.hash;
    var imageDate = urlHash.match(/\#(.+)/i); // grab the anchor and everything after
    // from the url

Step 02: Create the image tag url beginning and store it

    var base="<img src='http://www.mckennedy.org/photo-galleries/things-i-saw/";

Step 03: Create the image tag url ending and store it

    var end=".jpg' alt='Things I Saw by Michael McKennedy' />"

Step 04: Remove the # sign from the anchor tag and only use the characters that are needed

    var temp=str.substr(12,10); // grab the image date starting at character 12 and
    // continue 10 characters

Step 05: Capture the date values

    var tempMonth=temp.substr(5,2); // grab the month

    var tempYear=temp.substr(0,4); // grab the year

    var tempDay=temp.substr(8,2); // grab the day

Step 06: Create a page element to hold the image

    <div id="imageHolder"></div>

Step 07: Write the dynamically created image to imageHolder

    document.getElementById('imageHolder').innerHTML = base + temp + end;

Step 08: I wanted to be able to display the correct image date above imageHolder, and have the month display in string form (and test to see if it’s a valid month)

    if (tempMonth == '01') {
	month='January';
    }
    else if (tempMonth == '02') {
	month='February';
    }
    else if (tempMonth == '03') {
	month='March';
    }
    else if (tempMonth == '04') {
	month='April';
    }
    else if (tempMonth == '05') {
	month='May';
    }
    else if (tempMonth == '06') {
	month='June';
    }
    else if (tempMonth == '07') {
	month='July';
    }
    else if (tempMonth == '08') {
        month='August';
    }
    else if (tempMonth == '09') {
        month='September';
    }
    else if (tempMonth == '10') {
        month='October';
    }
    else if (tempMonth == '11') {
	month='November';
    }
    else if (tempMonth == '12') {
	month='December';
    }
    else {
        month='The URL did not contain a valid month';
    }

Step 09: Create a page element to display the newly formatted date

    <span id="date"></span>

Step 10: Write the newly formated date to ‘date’

    fullDate = month + ' ' + tempDay + ',' + ' ' + tempYear; // format the date
    document.getElementById('date').innerHTML = fullDate; // write to 'date'

Step 11: If the URL does not contain an anchor tag, show some default verbiage explaining how the page works.  This was accomplished by entering text into “imageHolder” (which gets overwritten if the anchor tag has a valid date).

    <div id="imageHolder">Default text here</div>

Step 12: Call the JavaScript function as the page is loaded

    <body onLoad="showPhoto();";>

Here is the complete JavaScript function:

<script language="javascript" type="text/javascript">
<!--
function showPhoto()
{
		var month='';
		var year='';
		var day='';
		var fullDate='';
		var urlHash=0;
		var base="<img src='http://www.mckennedy.org/photo-galleries/things-i-saw/";
		var end=".jpg' alt='Things I Saw by Michael McKennedy' />"
		var imageDate=0;
		var urlHash = window.location.hash;
 		var imageDate = urlHash.match(/\#(.+)/i); //grabs the anchor from the url
		var str=imageDate.toString(); // convert to string
		var temp=str.substr(12,10); // grab the image date
		var tempMonth=temp.substr(5,2); // grab the month
		var tempYear=temp.substr(0,4); // grab the year
		var tempDay=temp.substr(8,2); // grab the day
		if (tempMonth == '01') {
			month='January';
		}
		else if (tempMonth == '02') {
			month='February';
		}
		else if (tempMonth == '03') {
			month='March';
		}
		else if (tempMonth == '04') {
			month='April';
		}
		else if (tempMonth == '05') {
			month='May';
		}
		else if (tempMonth == '06') {
			month='June';
		}
		else if (tempMonth == '07') {
			month='July';
		}
		else if (tempMonth == '08') {
			month='August';
		}
		else if (tempMonth == '09') {
			month='September';
		}
		else if (tempMonth == '10') {
			month='October';
		}
		else if (tempMonth == '11') {
			month='November';
		}
		else if (tempMonth == '12') {
			month='December';
		}
		else {
			month='The URL did not contain a valid month';
		}
		fullDate = month + ' ' + tempDay + ',' + ' ' + tempYear;
		document.getElementById('date').innerHTML = fullDate;
 		document.getElementById('imageHolder').innerHTML = base + temp + end;
}
//-->
</script>

One minor issue with this is that if a user visits the URL and they want to view another photograph from a different date they have to edit the URL to use the new date, then refresh the page to view the new image.  I am ok with this since this page is not meant as a way to view all of the “Things I Saw” Photo Gallery images, as there is a gallery page to do that already.

Here is a working example of things-i-saw.html in action

Here is an example without the anchor tag in the URL

Right click and ‘view page source’ to see how this works.

This code has been testing in FireFox 3.0.10, Internet Explorer 8, Google Chrome 1.0.154.65, Safari (for Windows) 3.2.2 and Opera 9.5.1

Footnote: I am sure that there are other ways to accomplish this same thing, maybe even better ways but I have not figured them out yet.  I am sort of a JavaScript beginner and do not claim by any means to be an expert in the subject but I sure do have fun playing with JavaScript.

Be Sociable, Share!

•