With a vast number of WordPress plugins available, it’s easy to download one, then plug and play while not having to get involved with any code. Although convenient, sometimes it’s intersting to know what’s going on under the bonnet. Here, I’ll be looking at the Flickr API thanks in large part to an interesting chapter from Sitepoint’s ‘The Art and Science of Javascript’. Where they mashed up Flickr with Google maps, I’ll merely download a Flickr gallery to a site, integrating it with the famous ‘lightbox’ image viewer so users can view an enlarged images without having to go to Flickr.
Assuming you have a Flickr account complete with images, you’ll need to retrieve your Flickr ID. Log into profile and look at the URL; for me it’s this one:
http://www.flickr.com/photos/36013535@N03/
The user ID is the group of characters following the end slash after ‘photos’. With that copy and pasted, it’s time to insert it into the Flickr API URL:
<script type="text/javascript" src="http://api.flickr.com/services/feeds/photos_public.gne?id=36013535@N03&lang=en-us&format=json">
If an RSS feed was required, we’d substitute the ‘format=json’ for ‘format=rss_200, but in this case it isn’t. Once load, the JSON (Javascript Object Notation) object (the feed returned from Flickr the account) is assigned to a global variable by way of the following callback function:
function jsonFlickrFeed(json) {
// Assign to a global variable
window.jsonFromFlickr = json;
}
Where the window.jsonFromFlickr gives the data global scope (as an aside and beyond the scope of this tutorial, the jsonFlickrFeed function is defined to avoid the cross domain restriction problem http://en.wikipedia.org/wiki/Same_origin_policy). To recap, once the data is loaded, it’s assigned to a function which stores the output in a global variable for later manipulation, and follows courtesy of the following two functions:
function makePhoto(photo) {
var li = document.createElement('li');
var a = document.createElement('a');
a.href = photo.link;
a.target = "_blank";
var img = document.createElement('img');
img.src = photo.media.m.replace('_m', '_s');
img.title = photo.title;
img.alt = photo.alt;
a.appendChild(img);
li.appendChild(a);
return li;
}
function showPhotos() {
if (!jsonFromFlickr) {
alert('Flickr photos failed to load');
}
// 'Empty' the ul by removing all of its children
var ul = document.getElementById('myPhotos');
while (ul.hasChildNodes()) {
ul.removeChild(ul.firstChild);
}
// Loop over the photos and display them all
for (var i = 0; i <= 9; i++) {
photo = jsonFromFlickr.items[i];
ul.appendChild(makePhoto(photo));
}
}
window.onload = showPhotos;
<!--HTML that's inserted within the body tags and renders the gallery-->
<ul id="myPhotos">
<li><a href="http://www.flickr.com/photos/myFlickrID/">ZorinWeb's Flickr Gallery</a></li>
</ul>
The first one, makePhoto(photo), is more or less a utility function used to construct the HTML from the JSON, triggered by the second function,showPhotos(). Firstly, showPhotos(), executed upon page load, checks to see if the global variable is present; if not, an alert box is thrown. Next, the function navigates the DOM to find the myPhotos <ul> node (this is where the images will rendered, in an unordered list) and remove the child nodes ready for re-population. Finally, showPhotos() loops over the JSON feed to generate the gallery in an unordered list. In the loop, variable ‘photo’ is assigned ith item from the feed, which is passed to the makePhoto() function. When returned as an <li> element, DOM method ‘appendChild’ is used to populate the unordered list.
Function makePhoto(photo) is quite self explanatory; an <li> is generated, before the hyperlink from the JSON feed (photo.link) is assigned to the newly created a.href. For img.src. ‘photo.media.m.replace’ replaces the ‘_m’ with an ‘_s’ in the src string to get a 75 * 75 pixel thumbnail. Title and alt attributes are built into the image which is then appended to the link. Lastly, the link is embedded within the list item before being returned to theshowPhotos() function. The showPhotos() loop completes leaving the <ul> populated on the page.
The thumbnails are now on the page, but in its present state can’t use the Lighbox gallery. When clicked, the user will be taken to Flickr which isn’t the idea; we want them to remain on the site, hence using Lightbox, or any other Lightbox effect. To achieve this, themakePhoto(photo) function is amended as follows:
function makePhoto(photo) {
var li = document.createElement('li');
var a = document.createElement('a');
//a.href = photo.link;
a.href = photo.media.m.replace('_m', '');
a.rel = 'lightbox[Zorin]';
a.title = photo.title;
var img = document.createElement('img');
img.src = photo.media.m.replace('_m', '_s');
img.title = photo.title;
img.alt = photo.alt;
a.appendChild(img);
li.appendChild(a);
return li;
}
The a.href is replaced with the link of the actual image (with neither the _m or _s, just the full size image) as opposed to the page. Furthermore, to make Lightbox function, a.rel has been added in and set to ‘lightbox[Zorin]‘; ‘Zorin’ has been included to allow navigation through a gallery within Lightbox. That’s it; here’s how the code should appear in the <head> of the document:
<head>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript">
function jsonFlickrFeed(json) {
// Assign to a global variable
window.jsonFromFlickr = json;
}
</script>
<script type="text/javascript" src="http://api.flickr.com/services/feeds/photos_public.gne?id=YOUR-FLICKR-ID&lang=en-us&format=json">
</script>
<script type="text/javascript">
function makePhoto(photo) {
var li = document.createElement('li');
var a = document.createElement('a');
//a.href = photo.link;
a.href = photo.media.m.replace('_m', '');
a.rel = 'lightbox[Zorin]';
a.title = photo.title;
var img = document.createElement('img');
img.src = photo.media.m.replace('_m', '_s');
img.title = photo.title;
img.alt = photo.alt;
a.appendChild(img);
li.appendChild(a);
return li;
}
function showPhotos() {
if (!jsonFromFlickr) {
alert('Flickr photos failed to load');
}
// 'Empty' the ul by removing all of its children
var ul = document.getElementById('photos');
while (ul.hasChildNodes()) {
ul.removeChild(ul.firstChild);
}
// Loop over the photos and display them all
for (var i = 0; i <= 9; i++) {
photo = jsonFromFlickr.items[i];
ul.appendChild(makePhoto(photo));
}
}
window.onload = showPhotos;
</script>
<!--the following three scripts are required for Lightbox-->
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</head>
Lastly, pop the following into the body of the page:
<ul id="myPhotos">
<li><a href="http://www.flickr.com/photos/myFlickrID/">ZorinWeb's Flickr Gallery</a></li>
</ul>
If the global variable isn’t generated, you’ll be left with a link to your Flickr page, so it degrades gracefully…….kind of. For a demo, please see Misiek’s site.
This tutorial’s largely based on the abovementioned Sitepoint chapter, with the exception of the Lightbox effect added in by myself.
Excellent. Thanks so much for the post. -Kate