singleimage

Show Flickr photos in Awkward Showcase slideshow

by on September 16, 2011 with 51 Comments in General

Always wanted to show y0ur 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.

DemoDownload

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 and Awkward plugin between the <head> tags:


<script type="text/javascript">
 $(document).ready(function(){
 // Our very special jQuery JSON fucntion call to Flickr, gets details
 // of the most recent 20 images
 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. */
 });
 }
 $.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>
246 days ago by in General | You can follow any responses to this entry through the RSS feed. You can leave a response, or trackback from your own site.
About the

Erik is a graduate IT manager who spent years involved with the web programming both front-end and back-end, as a hobby. Since 2008 he knew he didn't want to start a job in the IT business, but more in the web business. So since the end of summer 2010 he studies digital communications at a university in Utrecht, which is called "Hogeschool Utrecht". Since the summer of 2011 he started his own company, where he works part-time after school. The company is called "Only Media" and is specialized in creating websites with Wordpress, front-end programming (also html5, css3 and jQuery) and back-end programming like PHP in combination with or without SQL.

Related Posts

  • subscribers
    100

  • &

Most viewed
Popular posts
Recent Comments