Scrolling Photo Gallery

This is a test page for a scolling photogallery

Best viewed with FireFox 2, also compatible with IE 7 and Safari 3

Wait for all thumbnails to populate the gallery before moving cursor over thumbnail and clicking to view its high resolution image (Safari requires mouse button to be held down).

N.B. The high resolution image is only downloaded when it's thumbnail is clicked.

I have re-written Stu Nichols' original CSS file to remove the 24 slide limit for the gallery with a scrolling slide table. The area below the thumbnails is where the associated photo descriptions appear, but the gallery used in this demo only has a couple.

The original Photogallery Howto javascript has been simplified somewhat, as it does not appear to be necessary to put the link to the external CSS file in the webpage's Header! Ootherwise very similar except that the old class name of "photo" has been changed to "gallery" and the the CSS file replaced with the one that can be downloaded here. A full explanation of the code can be found at Photogallery Howto.

Script to be added to start of Page

<script type="text/javascript">

document.write('<link href="ScrollPhotoGal.css" type=text/css rel=StyleSheet>');

function enlarge(obj)
{
//obj.src = obj.src.replace('?imgmax=72', '');
obj.src = obj.src.replace('=72', '=800');
}

function output(data)
{
for (var i = 0; i < data.feed.entry.length; i++)
{
var item = data.feed.entry[i];
var title = item.title.$t;
var imgsrc = item.content.src;//useful for downloading image

var height = parseInt(item.gphoto$height.$t);
var width = parseInt(item.gphoto$width.$t);

var orientation =(height>width ? "vert" : "hor");
var description = item.media$group.media$description.$t;

document.writeln("<li><a href='#' class='"+orientation+"'><img src='" + imgsrc + "?imgmax=72' onmousedown='enlarge(this)' alt='' title='"+title+"'/><b>"+description+"</b></a></li>");

}
}

</script> 

Script to be added where Gallery is to be displayed(amend accordingly for your Picasaweb album)

Any Special Requests?

The Picasa Web Album's API can do a lot more than simply access a user's photo album (see Google Developer Blog). In Picasa you can label Photos with keywords, in Picasa Web Albums they are called Tags. If you only want to populate your gallery with certain photos then you can request photos with a particular Tag, by appending 'tag=tagword' to the Script src. You can even do this across albums by omitting an album name.

e.g. My Photos of Cornwall the Script src is:

and to populate the gallery with only those tagged with 'Eden':

Note how the tag value is all in lowercase despite my tagging the photos with an uppercase character.

If we wanted to search Picasa Web's Communities for photos of the Eden Project and limit it to the first 40 found then I could write:

N.B. Picasaweb Communities are only those Public Galleries to which search permission has been given by the owner  in their Picasaweb Settings.

I leave you to think of other combinations. 

Your Requests

• Personalized styling of the Photogallery
• Display first image in Photogallery without user clicking the  thumbnail
• the solution can be found on Re-Styled Photogallery
  

However, you may have noticed on Google Developer Blog that you can even access geotag information associated with a photo. You don't have to request it, it is there if available, consequently to use it requires a little more code and is the subject of the next tutorial in this series. Geotagged Photogallery