The title says it all and that's just we're going to do. We're going to create an Ajax enabled Flickr slideshow using the phpFlickr class.
You'll want to have a look at this article: Using phpFlickr to Intergrate Flickr Photos on Your Own Site because this hack builds off of the referenced article.
See the working example here.
How It Works
This works by sending 2 URL parameters of action=slideshow and setid=[SELECTED_SETID] to a switch case which in turn calls the php function flickrSlideShow. The flickrSlideShow function gets the photos based on the setid using the phpFlickr function photosets_getPhotos. Once we've got some photos we step into a foreach loop where we will build an HTML Table (I know how 1998-ish but divs are not fun for this type of stuff) with 3 rows and 3 columns and find the primary photo. Once we get the primary photo we'll exit the loop because we have all the info we need.
At this point what we need is the main photo and the next photo since we are at the beginning of the SLideshow. We cn achieve this by calling the phpFlicker functionphotos_getContext($photo['id']) and pass it the primary photoid. This return a nice little 2 item array of the Previous Photo and the Next Photo. Once we've got the 3 photos (primary, next & previous) we are goung to place thsn in the middle row's 3 columns. This is where th ajax magic comes in.
The problem is that when generation html elements dynamicaly Javascript has can have a hard time finding them if they do not exist when the Javascript event is invoked. So to get around this I have inserted a Script block that will be run the first time the Slideshow page is rendered. What this does is it invokes the Ajax functions that will run the photos_getContext($photo['id']) each time either the previous or next photo is clicked (or the thumbnails at the bottom). It seams a bit redundant but we run photos_getContext($photo['id']) once when the page is loaded and then again in our external Ajax function page.
Putting It All Together
Place this code in the index.php page below all of the other main functions but before the Javascript block:
-
function flickrSlideShow($f,$setid) {
-
$photosSetInfo = $f->photosets_getInfo($setid);
-
$heading = "Photos: ".$photosSetInfo['title'];
-
$photos = $f->photosets_getPhotos($setid, NULL, NULL);
-
-
$html .= "<table height=400 width=600 cellpadding=1 bgcolor='#ffffff'>";
-
$html .= "<tr><td><strong>".$heading."</strong></td></tr>";
-
$html .= "<tr valign=middle height=400>";
-
$html .= "<td width=400 id='mainphotodivTH'>";
-
-
foreach ($photos['photo'] as $photo) {
-
if($photo['isprimary'] == 1) {
-
$prenext = $f->photos_getContext($photo['id']);
-
$prev = $prenext['prevphoto'];
-
$next = $prenext['nextphoto'];
-
$html .= "<table height=400 width=600 cellpadding=1>";
-
$html .= "<tr valign=top>";
-
-
$html .= "<td valign=middle width='15%' id='nextphotoSS'>";
-
$html .= "</td>";
-
-
$html .= "<td align=center width='70%' id='mainphotoSS'>";
-
$html .= "</td>";
-
-
$html .= "<td valign=middle width='15%' id='prevphotoSS'>";
-
$html .= "</td>";
-
-
$html .= "</tr>";
-
-
$html .= "</table>";
-
$html .= "<script>SlideShow(".$photo['id'].");</script>";
-
-
break;
-
}
-
}
-
$html .= "</td>";
-
$html .= "</tr>";
-
$html .= "<tr>";
-
$html .= "<td align=center>";
-
$i = 0;
-
foreach ($photos['photo'] as $photo) {
-
-
$html .= "<a href='#' title='".$photo['title']."' onclick='SlideShow(".$photo['id'].",".$_GET['setid'].");return false;'><img border='0' alt='$photo[description]' src='".$f->buildPhotoURL($photo, "Square")."' id='photo_".$photo['id']."' width='50' height='50'></a>";
-
$i++;
-
if ($i % 7 == 0) {
-
$html .= "<br>";
-
}
-
-
}
-
$html .= "</td>";
-
$html .= "</tr>";
-
$html .= "</table>";
-
echo $html;
-
-
}
This code will render a UI just like this one.
Now add the Ajax functions to the Script block:
-
///SlideShow
-
var handlerSlideShow = function SlideShow_Callback(str) {
-
-
document.getElementById('mainphotoSS').innerHTML = str.responseText;
-
}
-
-
///PrevPhoto
-
var handlerPrevPhoto = function PrevPhoto_Callback(str) {
-
document.getElementById('prevphotoSS').innerHTML = str.responseText;
-
}
-
-
///NextPhoto
-
var handlerNextPhoto = function NextPhoto_Callback(str) {
-
document.getElementById('nextphotoSS').innerHTML = str.responseText;
-
}
-
-
function SlideShow(pid)
-
{
-
document.getElementById('mainphotoSS').innerHTML = '<img src=images/loading.gif>';
-
document.getElementById('nextphotoSS').innerHTML = '<img src=images/loading.gif>';
-
document.getElementById('prevphotoSS').innerHTML = '<img src=images/loading.gif>';
-
new Ajax.Updater('mainphotoSS','ajaxSlideshow.php?action=main&pid='+pid+'', { method:'get', asynchronous:true, onSuccess:handlerSlideShow });
-
-
new Ajax.Updater('nextphotoSS','ajaxSlideshow.php?action=next&pid='+pid+'', { method:'get', asynchronous:true, onSuccess:handlerNextPhoto });
-
-
new Ajax.Updater('prevphotoSS','ajaxSlideshow.php?action=prev&pid='+pid+'', { method:'get', asynchronous:true, onSuccess:handlerPrevPhoto });
-
}
This code will update and manage the three photos.
Lastly create a new file nemed ajaxSlideshow.php and plade this code in it:
-
include_once('config.php');
-
-
$photo = $f->photos_getInfo($_GET['pid']);
-
$prenext = $f->photos_getContext ($_GET['pid']);
-
$prev = $prenext['prevphoto'];
-
$next = $prenext['nextphoto'];
-
$action = $_GET['action'];
-
-
$photoURL = '';
-
-
if($action == 'main') {
-
-
$photoURL .= "<a href='" . $f->buildPhotoURL($photo, "original") . "' target='_blank'> <img border='0' title='$photo[title]' src='" . $f->buildPhotoURL($photo, "medium") . "'></a>";
-
} else if($action == 'prev') {
-
$photoURL="<a href'#' title='$prev[title]' onclick='SlideShow(".$prev['id'].");return false;'> <img border='0' alt='$next[description]' src='".$f->buildPhotoURL($prev, "thumbnail")."' ></a>";
-
} else if($action == 'next') {
-
$photoURL="<a href'#' title='$next[title]' onclick='SlideShow(".$next['id'].");return false;'><img border='0' alt='$next[description]' src='".$f->buildPhotoURL($next, "thumbnail")."' onclick='SlideShow(".$next['id'].");'></a>";
-
} else {
-
$photoURL='';
-
}
-
-
echo $photoURL;
This page will be called by the Ajax functions and will return a img element based on the action parameter.
Try It Out
Now upload everything and try it out by creating a link in the function returnPhotos like this:
-
$html .= "<p id='photoTools'>";
-
$html .= "<a href='index.php?action=detailview&setid=".$photos['id']."'>Detail View</a><br>";
-
$html .= "<a href='index.php?action=slideshow&setid=".$photos['id']."'>Slideshow</a><br>";
-
$html .= "</p>";
Responses to “Using phpFlickr to Create a Ajax Enabled Flickr Slideshow”