Picasa web album slideshow – Development guide
I was looking for a application to embed slideshow using pictures from picase web album. I found some plugins which can be used in blog or myspace. Some of them uses the picasa slide show url opened in a iframe or div. Then you will have less control on the slideshow as it is controlled by the slideshow application of picasa. But I required more control on the images from picasa.
I was looking for some application which will fetch/store all the images for an album in picasa and create a slideshow with more control on the images. I found nothing thats suites my requirement. So I started to design an application of such kind. On the basis of functionality I sub devided it into two major part. First is fetch the image related information for an album and store it if required. Second is display the slideshow using those image information.
In picasa you can view the pictures as set or individual but you won’t get actual picture name or its location. So I found now simple way to get the pictures name and their location. While searching more for such option I found there is a RSS feed for each album. The RSS feed provides image names and its location details. It makes my job easier. Now objective became to process the RSS feed to get the image related information. For this purpose I used XML-RSS package from PEAR. Here is snapshot of the code I wrote to process the feed:
-
<?php
-
require_once "XML/RSS.php";
-
//$FeedURL is the URL of the rss feed of an album in picasa
-
$FeedURL = "http://picasaweb.google.com/data/feed/base/user/wce/albumid/5331321673727336541?alt=rss&kind=photo&hl=en_GB";
-
$rss =& new XML_RSS($FeedURL);
-
$rss->parse();
-
$rssArray = $rss->getStructure();
-
for($C=0; $C<count($rssArray); $C++)
-
{
-
if($rssArray[$C][‘type’] == ‘item’)
-
{
-
‘title’ => $rssArray[$C][‘title’],
-
‘image’ => $rssArray[$C][‘enclosures’][0][‘url’],
-
‘link’ => $rssArray[$C][‘link’],
-
‘description’ => $rssArray[$C][‘description’],
-
);
-
}
-
elseif($rssArray[$C][‘type’] == ‘image’)
-
{
-
$AlbumTitle = $rssArray[$C][‘title’];
-
$AlbumPicture = $rssArray[$C][‘url’];
-
$CreateDate = $MetaInfo[‘lastbuilddate’];
-
}
-
}
-
// this $PicasaDataArray contains all the picture related information of an album from picasa web.
-
?>
Now this $PicasaDataArray can be stored in files/database or can be directly used for the slideshow. While processing the feed by this I found the feed contain other information like title, description, link of the album, its last build date etc. So I modified the code a little more to store these information too. So the first part of my application is complete.
Now the second part – slideshow using $PicasaDataArray. For this section I didn’t tried to put my head to develop slide show application as I had already seen some very nice attractive slideshow application. They are also easy to use and configure. One of my favourite is Lightbox JS. Another good slideshow script is Highslide. Both of them are very nice and easy to configure. So I used one of them for my purpose. Here is another snapshot of code
-
<?php
-
require_once "XML/RSS.php";
-
//$FeedURL is the URL of the rss feed of an album in picasa
-
$FeedURL = "http://picasaweb.google.com/data/feed/base/user/wce/albumid/5331321673727336541?alt=rss&kind=photo&hl=en_GB";
-
$rss =& new XML_RSS($FeedURL);
-
$rss->parse();
-
$rssArray = $rss->getStructure();
-
for($C=0; $C<count($rssArray); $C++)
-
{
-
if($rssArray[$C][‘type’] == ‘item’)
-
{
-
‘title’ => $rssArray[$C][‘title’],
-
‘image’ => $rssArray[$C][‘enclosures’][0][‘url’],
-
‘link’ => $rssArray[$C][‘link’],
-
‘description’ => $rssArray[$C][‘description’],
-
);
-
}
-
elseif($rssArray[$C][‘type’] == ‘image’)
-
{
-
$AlbumTitle = $rssArray[$C][‘title’];
-
$AlbumPicture = $rssArray[$C][‘url’];
-
$CreateDate = $MetaInfo[‘lastbuilddate’];
-
}
-
}
-
?>
-
<html>
-
<head>
-
<title>Slide Show :: <?php echo $AlbumTitle;?></title>
-
<script type="text/javascript" src="js/prototype.js"></script>
-
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
-
<script type="text/javascript" src="js/lightbox.js"></script>
-
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
-
</head>
-
<body>
-
<a href="<?php echo $AlbumPicture;?>" rel="lightbox[picasa]"><img src="<?php echo $AlbumPicture;?>" /></a>
-
<div style="display:box;">
-
<?php
-
foreach($PicasaDataArray as $ImageInfo)
-
{
-
echo ‘<a href="’.$ImageInfo[‘image’].‘"’ rel="lightbox[picasa]">‘.$ImageInfo['title'].’</a><br> ‘;
-
}
-
?>
-
</div>
-
</body>
-
</html>
I made this code simple and easy to use. Though I have used xml-rss class from pear but it can be repalced by and standard xml-rss parser class. Experienced developer can modify this code or enhance its feature much more as per their requirement. If like to use this code or if you have any suggestion let me know about it via your comment.
