SimplePie & jQuery Flickr Photostream

If you want to display a number of photos on your website, jQuery Infinite Carousel is a very good option. This carousel works really well when you have a list of images on your page, but it threw up a number of problems when calling images dynamically on page load (I.e. your latest Flickr Photostream).

After making some of my own tweaks, and combining the carousel with SimplePie RSS feed parsing, I’ve now got a very nice carousel slider that works well across most (modern) browsers.

The following code uses SimplePie to parse the Flickr feed, cache the images into a folder, and then dynamically pull the images into the HTML on page load.

I also setup a cronjob to automatically update the cache on a weekly basis (I don’t update my Flickr account anymore than that).

This fixed the issue with the carousel and sped up page loads because the images are called from a cache folder rather than being downloaded each time from the Flickr API.

It’s important that the cronjob is in place; otherwise SimplePie will parse the Flickr feed on each load (or however often you set the cache to expire). I covered this in a previous post regarding parsing of Google Reader shared items.

jQuery Carousel
See demo here →

How to do it

1. Download carousel.js from here and upload to a folder on your server (I.e. www.example.com/js/carousel.js)

2. Download SimplePie here and follow the instructions for installing SimplePie on your server.

3. Create a PHP page made up of the following elements (I’ve commented within the code with some specific instructions) and upload it to your server:

PHP: Place this code at start of HTML page

<?php
// Change the path below to the location of simplepie.inc on your server
require '/home/username/public_html/simplepie.inc';

// Change the URL below to the feed URL for your Flickr Photostream or a specific set
$url = 'http://api.flickr.com/services/feeds/photoset.gne?set=72157621912224879&nsid=39505387@N02&lang=en-us';
$feed = new SimplePie();
$feed->set_feed_url($url);

// This allows the cronjob to handle image caching rather than slow page loads as SimplePie parses the feed each time
$feed->set_cache_duration(999999999);
$feed->set_timeout(-1);

// Change the location below to where you have placed your cache folder and CHMOD the cache folder to 755 or 777
$feed->set_cache_location($_SERVER['DOCUMENT_ROOT'] . '/folder/cache');
$feed->init();

$feed->handle_content_type();

function image_from_description($data) {
preg_match_all('/<img src="([^"]*)"([^>]*)>/i', $data, $matches);
return $matches[1][0];
}

function select_image($img, $size) {
$img = explode('/', $img);
$filename = array_pop($img);

$s = array(
'_s.', // square
'_t.', // thumb
'_m.', // small
'.', // medium
'_b.' // large
);

$img[] = preg_replace('/(_(s|t|m|b))?\./i', $s[$size], $filename);
return implode('/', $img);
}
?>

HTML/PHP: The rest of the HTML page looks like this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SimplePie and Infinite Carousel Example</title>
<script src="http://www.example.com/css/style.css" type="text/css"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://www.example.com/js/carousel.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){$('.infiniteCarousel').infiniteCarousel();});
</script>
</head>
<body>
<h1>SimplePie and Infinite Carousel Example</h1>
<div class="infiniteCarousel">
<div id="flickrgallery">
<ul>
<?php foreach ($feed->get_items() as $item): ?>
<li><?php
if ($enclosure = $item->get_enclosure()) {
$img = image_from_description($item->get_description());

/* Choose image size you want to link to (full_url) and display in carousel (thumb_url)
$full_url = select_image($img, 3);
$thumb_url = select_image($img, 0);
echo '<a href="' . $full_url . '" title="' . $enclosure->get_title() . '"><img src="' . $thumb_url . '" alt=" " /></a>'."\n";
}
?></li>
<?php endforeach; ?>
</ul>
</div>
</div>
</body>
</html>

CSS: Create an external stylesheet like this

.infiniteCarousel {
width:533px;
position:relative
}
.infiniteCarousel #flickrgallery {
/* .infiniteCarousel width - (.wrapper margin-left +
.wrapper margin-right) */
width:465px;
overflow:auto;
height:110px;
margin:0 34px;
position:absolute;
top:0
}
.infiniteCarousel ul a img {
border:5px solid #fff;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px
}
.infiniteCarousel #flickrgallery ul {
width:840px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
position:absolute;
top:0
}
.infiniteCarousel ul li {
display:block;
float:left;
padding:0 10px 0 0;
height:85px;
width:85px
}
.infiniteCarousel ul li img {
-moz-transition:border-color 400ms;
-webkit-transition:border-color 400ms;
transition:border-color 400ms;
}
.infiniteCarousel ul:hover li img {
border-color:#fff
}
.infiniteCarousel ul:hover li:hover img {
border-color:#fff
}
.infiniteCarousel ul li a img {
display:block
}
.infiniteCarousel .arrowflickr {
display:block;
height:85px;
width:30px;
/* Add images for forward/back arrows & use negative text-indent
to hide arrow characters - uncomment CSS below as necessary */
/*background:url("http://www.yourwebsite.com/images/arrows.png") no-repeat;
text-indent:-9999px;*/
position:absolute;
top:0;
cursor:pointer;
outline:0;
border:0
}
.infiniteCarousel .forward {
background-position:-830px -1020px;
right:0
}
.infiniteCarousel .back {
background-position:-830px -1128px;
left:0
}
.infiniteCarousel .forward:hover,
.infiniteCarousel .back:hover {
background-color:#fff
}

4. Create the following cronjob PHP file which will tell SimplePie to parse the feed at the time(s) you specify (For a discussion of cronjob see previous post):

<?php
// Change the path below to the location of simplepie.inc on your server
require '/home/folder/public_html/simplepie.inc';

// Change the URL below to the feed URL for your Flickr Photostream or a specific set
$url = 'http://api.flickr.com/services/feeds/photoset.gne?set=72157621912224879&nsid=39505387@N02&lang=en-us';
$feed = new SimplePie();
$feed->set_feed_url($url);

// Tells SimplePie to update cache every time PHP file is loaded. Cronjob handles specific times that this page is loaded
$feed->set_cache_duration(0);
$feed->set_timeout(5);

// Change the location below to where you have placed your cache folder and CHMOD the cache folder to 755 or 777
$feed->set_cache_location($_SERVER['DOCUMENT_ROOT'] . '/folder/cache');
$feed->init();
$feed->handle_content_type();
function image_from_description($data) {
preg_match_all('/<img src="([^"]*)"([^>]*)>/i', $data, $matches);
return $matches[1][0];
}
function select_image($img, $size) {
$img = explode('/', $img);
$filename = array_pop($img);
$s = array(
'_s.', // square
'_t.', // thumb
'_m.', // small
'.', // medium
'_b.' // large
);
$img[] = preg_replace('/(_(s|t|m|b))?\./i', $s[$size], $filename);
return implode('/', $img);
}
?>

5. Upload PHP file to your server and setup a cronjob to automatically load the file at set time(s).