English
Loading ...Always wanted to show your Flickr photos in a slideshow? Without requesting a Flickr API code? In this tutorial I will show you how to do that, by making use of the Awkward Showcase jQuery slideshow plugin and some jQuery code. Click on the demo button to watch the demo. If you don’t want to create your own slideshow by following this tutorial, you can also download the source files by clicking on the download button.
The first thing you have to do is downloading the jQuery library an dthe Awkward Showcase plugin. If you’re using WordPress, there’s a big chance you don’t have to include jQuery. You can just try it without including the jQuery library. If the slideshow isn’t working, you can always include the jQuery library anyway.
Include the jQuery library, the Awkward plugin and the slideshow css between the <head> tags:
<link rel="stylesheet" type="text/css" href="slideshow.css"/> <link rel="stylesheet" type="text/css" href="style.css"/> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.aw-showcase.js"></script>
After you have included the files which are necessary for the operation of the slideshow, you can include the code below, which creates the slideshow and loads the Flickr photos into the Awkward Showcase slideshow.
<script type="text/javascript">
$(document).ready(function(){
function callback() {
$("#showcase").awShowcase({
width: 500,
height: 312,
auto: true,
interval: 5000,
continuous: true,
loading: true,
tooltip_width: 200,
tooltip_icon_width: 32,
tooltip_icon_height: 32,
tooltip_offsetx: 18,
tooltip_offsety: 0,
arrows: true,
buttons: false,
btn_numbers: false,
keybord_keys: false,
mousetrace: false,
pauseonover: false,
transition: 'hslide', /* vslide/hslide/fade */
transition_speed: 500,
show_caption: 'onload', /* onload/onhover/show */
thumbnails: true,
thumbnails_position: 'outside-first', /* outside-last/outside-first/inside-last/inside-first */
thumbnails_direction: 'vertical', /* vertical/horizontal */
thumbnails_slidex: 0 /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
});
}
// Our very special jQuery JSON fucntion call to Flickr, gets details
// of the most recent images
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=66790267@N03&lang=en-us&format=json&jsoncallback=?", displayImages);
function displayImages(data){
// Start putting together the HTML string
var htmlString = "";
// Now start cycling through our array of Flickr photo details
$.each(data.items, function(i,item){
// I only want the ickle square thumbnails
var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");
var bigImage = (item.media.m).replace("_m.jpg", "_b.jpg");
// Here's where we piece together the HTML
htmlString += '<div><div>' + item.title + '</div>';
htmlString += '<a target="_blank" href="' + item.link + '"><img width="500px" src="' + bigImage + '" alt="' + item.title + '" /></a>';
htmlString += '<div>';
htmlString += '<img width="80px" src="' + sourceSquare + '" alt="' + item.title + '" />';
htmlString += '<div></div>';
htmlString += '</div></div>';
});
// Pop our HTML in the #images DIV
$('#showcase').html(htmlString);
// Close down the JSON function call
// now we are calling our own callback function
if(typeof(callback)==='function'){
callback.call(this);
}
}
});
</script>
And last but not least, you have to decide where you want to place the slideshow. On that page you should place the code as shown below.
<div id="media">
<div id="showcase">
</div>
</div>
Let’s rip the code into pieces
I’ll start explaining the code by ripping it into pieces. Let’s start with the JavaScript code between the head tags. The code below creates the Awkward Showcase slideshow. We put these code in a callback function, because it should not be executed before the Flickr photos are loaded. Else you may get trouble with loading the slideshow.
function callback() {
$("#showcase").awShowcase({
width: 500,
height: 312,
auto: true,
interval: 5000,
continuous: true,
loading: true,
tooltip_width: 200,
tooltip_icon_width: 32,
tooltip_icon_height: 32,
tooltip_offsetx: 18,
tooltip_offsety: 0,
arrows: true,
buttons: false,
btn_numbers: false,
keybord_keys: false,
mousetrace: false,
pauseonover: false,
transition: 'hslide', /* vslide/hslide/fade */
transition_speed: 500,
show_caption: 'onload', /* onload/onhover/show */
thumbnails: true,
thumbnails_position: 'outside-first', /* outside-last/outside-first/inside-last/inside-first */
thumbnails_direction: 'vertical', /* vertical/horizontal */
thumbnails_slidex: 0 /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
});
}
As you can see in the code below, we have to replace the 66790267@N03 ID with your own ID. If you do that, the slideshow will show the flickr photos from your own Flickr account.
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=66790267@N03&lang=en-us&format=json&jsoncallback=?", displayImages);
The code below places the photos from the getJSON data into the showcase div. First it puts the small and big images from the JSON data into variables and then into the htmlString variable. Once all Flickr data is in the htmlString variable, the contents of the variable will be putted into the Awkward Showcase div.
function displayImages(data){
// Start putting together the HTML string
var htmlString = "";
// Now start cycling through our array of Flickr photo details
$.each(data.items, function(i,item){
// Puts the thumbnail and big image into variables
var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");
var bigImage = (item.media.m).replace("_m.jpg", "_b.jpg");
// Here's where we piece together the HTML
htmlString += '<div><div>' + item.title + '</div>';
htmlString += '<a target="_blank" href="' + item.link + '"><img width="500px" src="' + bigImage + '" alt="' + item.title + '" /></a>';
htmlString += '<div>';
htmlString += '<img width="80px" src="' + sourceSquare + '" alt="' + item.title + '" />';
htmlString += '<div></div>';
htmlString += '</div></div>';
});
And finally the code below runs the callback function, after the Flickr photos are loaded.
// Pop our HTML in the #images DIV
$('#showcase').html(htmlString);
// Close down the JSON function call
// now we are calling our own callback function
if(typeof(callback)==='function'){
callback.call(this);
}
So now we’re finally done. If this post didn’t help you out or you still have problems with the Awkward Slideshow plugin, don’t hesitate to put your question in a comment below, then I’ll try to help you out.
