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')"
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: