Houston Web Design Blog » Web Programming http://blog.levantainteractive.com A blog regarding web design, search engine optimization, web programming, online marketing and website development for the Houston, TX area. Wed, 13 Jan 2010 17:25:45 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Embed Picasa web album using PHP and Lightbox http://blog.levantainteractive.com/web-programming/embed-picasa-web-album-using-php-and-lightbox/ http://blog.levantainteractive.com/web-programming/embed-picasa-web-album-using-php-and-lightbox/#comments Tue, 06 Oct 2009 16:17:05 +0000 Jack Arnold http://blog.levantainteractive.com/?p=52

Joy Yoga Center Photo AlbumAbout 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;
}
}
?>

]]> http://blog.levantainteractive.com/web-programming/embed-picasa-web-album-using-php-and-lightbox/feed/ 0