tophermiller.com

Photo Album Teaser

As an extension to my photo album application, I wanted a way to highlight a new set of photos on my home page. The idea was to build a widget I could embed with a single line of HTML that would show a mini "slide show" of sorts, with a link to the album.

So, here's the HTML:
<div class="albumteaser" id="teakandbaker"

	title="Teak and Baker Portait Session"

	teaserContentURL="/tophermiller/albumteaser.tmc?album=/content/photoalbum/Pets/2010-06 Teak and Baker Portrait Session/Chosen ones"

	albumLaunch="/?page=/pages/photoalbum/photoalbum.jsp&root=/content/photoalbum&start=/content/photoalbum/Pets/2010-06 Teak and Baker Portrait Session/Chosen ones')"

	numTeaserPhotos="5"></div>



The most important parameter above is the "teaserContentURL", which points to a servlet that provides the JSon data containing thumbnail image URLs to show in the teaser. Here is what the JSon looks like.

Here is the result:


The real work is done with jQuery in the module albumteaser.js, with minor css treatments provided by albumteaser.css.

The whole thing is invoked with a simple call to loadAllTeasers() as follows:
	<script language="javascript">
		$(document).ready(function() {
			loadAllTeasers();
		})
	</script>



tophermiller.com | admin