About Picasa Web Albums
Picasa Web Albums allow the common web user to post and share photos with relative ease. You can organize your photos into albums and albums within albums. »Read more
About Lightbox
Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers. »Read more
Posting pictures to your website using Picasa and Lightbox
Why not use the Picasa engine to power your website’s photo gallery, project portfolio or work examples? Levanta has helped many a client embed their Picasa Web Album in their website.
Step 1: Embed the Lightbox Framework
<link rel="stylesheet" href="js/lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/lightbox/prototype.js"></script>
<script type="text/javascript" src="js/lightbox/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox/lightbox.js"></script>
Step 2: Add CSS Styling
<style>
#pa_images {width:auto;}
#pa_images h2 {font-weight:bold;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:1.5em;color:#3E8CA8;width:auto;text-align:center;}
#pa_images ul {float: left;list-style:none;}
#pa_images li {float: left;width: 96px;height: 96px;margin: 10px;border: 1px solid #999;}
#pa_images li a {display: block;text-decoration:none;width: 96px;height: 96px;}
</style>
Step 3: Add the PHP code and add your Picasa username
<div id="pa_images">
<?php
// PICASA URL
$picasa_url = "http://picasaweb.google.com/data/feed/base/user/";
// ENTER YOUR PICASA USERNAME
$picasa_username = "";
// GET VARIABLES
if (isset($_GET["ft"])) $ft = $_GET["ft"];
else $ft = 0;
if (isset($_GET["albumid"])) $albumid = $_GET["albumid"];
else $albumid = 0;
if ($ft>0) echo('<p><a href="'.$_SERVER['PHP_SELF'].'">return to all albums</a></p>');
switch ($ft) {
case 0:
$file = $picasa_url . $picasa_username . '?alt=rss&kind=album&hl=en_US&access=public';
break;
case 1:
$file = $picasa_url . . $picasa_username . '/albumid/'.$albumid.'?alt=rss&hl=en_US';
break;
}
$insideitem = false;
$insidetitle = false;
$tag = "";
$album_title = "";
$title = "";
$link = "";
$guid="";
$rssfeed="";
$url="";
$fullimage = "";
$smallimage = "";
$tdcount=0;
$imageheight=0;
$imagewidth=0;
$thumbcount=0;
if ($ft==0) echo("<table align=\"center\" cellpadding=\"0\" cellspacing=\"25\">");
else echo("<div id=\"pa_images\">");
$xml_parser = xml_parser_create();
xml_set_element_handler($xml_parser, "startElement", "endElement");
xml_set_character_data_handler($xml_parser, "characterData");
if (!($fp = fopen($file,"r"))) {
die ("could not open RSS for input");
}
while ($data = fread($fp, 4096)) {
if (!xml_parse($xml_parser, $data, feof($fp))) {
die(sprintf("XML error: %s at line %d",
xml_error_string(xml_get_error_code($xml_parser)),
xml_get_current_line_number($xml_parser)));
}
}
xml_parser_free($xml_parser);
if ($ft==0&&$tdcount>0) echo("</tr>");
if ($ft==0) echo("</table>");
else echo("</ul></div>");
?>
</div>
Step 4: Include XML parsing functions at the bottom of the page
<?php
function startElement($parser, $tagName, $attrs) {
global $insideitem, $insidetitle, $tag, $fullimage, $smallimage, $imageheight,
$imagewidth, $ft, $thumbcount;
if ($tagName=="MEDIA:CONTENT") {//$ft>0&&
$fullimage = $attrs["URL"];
}
if ($tagName=="MEDIA:THUMBNAIL") {
if (($ft>0&&$thumbcount==1)||$ft==0) {
$smallimage=$attrs["URL"];
$imageheight=$attrs["HEIGHT"];
$imagewidth=$attrs["WIDTH"];
}
$thumbcount+=1;
}
if ($insideitem) {
$tag = $tagName;
} elseif ($tagName == "ITEM") {
$insideitem = true;
} elseif ($tagName == "TITLE") {
$insidetitle = true;
}
}
function characterData($parser, $data) {
global $insideitem, $insidetitle, $tag, $title, $album_title, $link, $rssfeed, $url;
if ($insideitem) {
switch ($tag) {
case "GUID":
$rssfeed.=$data;
break;
case "TITLE":
$title .= $data;
break;
case "LINK":
$link .= $data;
break;
case "URL":
$url .= $data;
break;
}
}elseif($insidetitle&&$album_title==""){
$album_title = $data;
$insidetitle=false;
}
}
function endElement($parser, $tagName) {
global $insideitem, $tag, $title, $album_title, $link, $rssfeed, $ft, $url,
$fullimage, $smallimage, $tdcount, $imageheight, $imagewidth,$thumbcount,
$picasa_username,$picasa_url;
if ($tagName=="ITEM") {
$albumid=$rssfeed;
$albumid=str_replace("?alt=rss&hl=en_US","",$albumid);
$albumid=str_replace($picasa_url . $picasa_username."/albumid/","",$albumid);
switch ($ft) {
case 0:
$link = $_SERVER["PHP_SELF"]."?albumid=".$albumid."&ft=1";
if ($tdcount==0) echo("<tr>");
echo("<td align=\"center\">");
echo("<a href=\"".trim($link)."\"><img src=\"".htmlspecialchars($smallimage)."\" border=\"0\" /></a><br>");
echo("<a class=\"redlink\" href=\"".trim($link)."\">".$title."</a>");
echo("</td>");
$tdcount+=1;
if ($tdcount==3) {
echo("</tr>");
$tdcount=0;
}
break;
case 1:
if ($tdcount==0) echo("<h2>$album_title</h2><ul>");
echo("<li style=\"background:url('$smallimage') center center no-repeat;\">");
echo("<a rel=\"lightbox[group]\" href=\"".str_replace('/s144', '/s800',
$smallimage)."\"> </a>");
echo("</li>");
$tdcount+=1;
break;
}
$rssfeed="";
$title = "";
$description = "";
$link = "";
$url="";
$thumbcount=0;
$insideitem=false;
}
}
?>