Today we will be developing a jQuery plugin that will make it easy to create slideshows, product guides or presentations from your Flickr photo sets. The plugin will be using Flickr’s APIs and YQL to fetch the photos in the sets, after which it will create the markup of the slideshow and listen for events.

The HTML

Before starting with jqFlick (the name of our plugin), lest first lay down the HTML structure of the underlying document. I am including the plugin’s CSS stylesheet – jqFlick.css, which we will be creating in the next step, and the plugin’s js file – jqFlick.js.

index.html

jqFlick - Flickr Micro Slider Plugin | Tutorialzine Demo Flickr Powered Micro Slider


More demos: Presentation Example Photo Slideshow Product Shots (small)


Additionally, we have styles.css, which styles the page itself, and script.js, which calls the plugin. Also, we have a select element with demos of three different configurations of the plugin. We will come back to this in a moment.

The other important element in the fragment above is the #flickrSlider div, which is going to be populated with the slider’s HTML by the jqFlick plugin:

Generated Code




The #flickrSlider div is assigned a class name – .flickrSliderHolder, a width and a height. Inside it we have an unordered list with the slides, an arrow div holder with previous and next arrows, and a span for the captions. The unordered list is set to be wide enough to accommodate the LIs side by side. The slide animation is achieved by animating the left property of the UL.

Flickr Slideshow jQuery Plugin


The CSS

We need to provide the plugin with its own stylesheet, so it is easier to include into a website. This stylesheet must only affect the markup generated by the plugin, and we have to make sure it does not corrupt any other elements on the page. To achieve this, we are going to prefix the styles with the .flickrSliderHolder class name, assigned to the slideshow holder by the plugin.

jqFlick.css

.flickrSliderHolder{ position:relative; overflow:hidden;}.flickrSliderHolder ul{ position:absolute; height:100%; list-style:none;}.flickrSliderHolder ul li{ float:left; height:100%; background-repeat:no-repeat; background-position:center center;}.flickrSliderHolder .arrows{ position:absolute; right:0; bottom:0;}.flickrSliderHolder .arrows a{ width:22px; height:22px; float:left; background:url('arrows.png') no-repeat top left; text-decoration:none; outline:none; border:none;}.flickrSliderHolder a.previous:hover{ background-position:left bottom;}.flickrSliderHolder a.next{ margin-left:-1px; background-position:top right;}.flickrSliderHolder a.next:hover{ background-position:bottom right;}.flickrSliderHolder .caption{ font-size:13px; line-height: 22px; position:absolute; bottom:0; left:0;}Once called, jqFlick assigns the .flickrSliderHolder class to the slider holder div, and generates the markup that we saw in the previous step. The code above styles the arrows, caption, unordered list and the container.

Perfect for Slideshows, Product Guides and Presentations


The jQuery Code

Starting with the jQuery section, lets first see what a response from the Flickr API looks like:

Sample YQL Response

{ "query": { "count": 3, "created": "2011-02-19T20:11:18Z", "lang": "en-US", "results": { "photo": [{ "farm": "6", "id": "5456788328", "isprimary": "1", "secret": "e9eddccf8e", "server": "5213", "title": "The title of the image becomes an optional caption." }, { "farm": "6", "id": "5456179165", "isprimary": "0", "secret": "28bae85307", "server": "5216", "title": "There are no limits really." }, { "farm": "6", "id": "5456179233", "isprimary": "0", "secret": "e05287691f", "server": "5018", "title": "What more do you need.." }] } }}Here I’ve selected the photos that are contained in this photoset. The response contains useful information about the images. We are going to use the farm, id, secret, and server properties of these objects to put together the URL at which the photos are located, while the title properties are going to be used as captions.

You can find your photos at the following address, by replacing the keywords with the objects’ values:

http://farm{FARM}.static.flickr.com/{SERVER}/{ID}_{SECRET}.jpgIn our plugin, we will be using Flickr’s API method for listing photos in a photoset. However, to communicate with Flickr’s APIs directly, we would need to register for an API key. Luckily for us, Flickr provides its own tables in YQL, where API keys are not required.

For more info on the various Flickr APIs you can go to their documentation page. If you would like to know more about the URL addresses of their photos (including info on how to fetch different image sizes) see here. You can also read more about YQL in our previous YQL tutorials.
Now we are ready to write the jQuery code. As you know, encapsulating jQuery functionality in a plugin has many benefits, as you can read from our jQuery plugin tutorial. Lets see what jqFlick.js, the main plugin file, looks like:

jqFlick.js

(function($){ $.fn.jqFlick = function(options){ // Default options: options = $.extend({ width:500, height:500, maxFetch:50, captions:false, autoAdvance:false, advancePeriod:5000 },options); // Using YQL and the flickr.photosets.photos table to query the Flickr API. var YQL = 'http://query.yahooapis.com/v1/public/yql?q={QUERY}&format=json&callback=?', query = "SELECT * FROM flickr.photosets.photos({MAX}) WHERE photoset_id='{PHOTOSET}'"; // Replacing the "{EXAMPLE}" keywords from the strings: YQL = templateReplace(YQL,{ "query": encodeURIComponent( templateReplace(query,{ photoset : options.photosetID, max : options.maxFetch } )) }); // Template for building Flickr's image URLs: var flickrSRC = 'http://farm{FARM}.static.flickr.com/{SERVER}/{ID}_{SECRET}.jpg', flickrSlider = this; flickrSlider.trigger('jqFlickRemove'); // Fetching the images using Flickr's API: $.getJSON(YQL,function(r){ if(!r || !r.query || !r.query.count){ throw "There is no such photoset!"; } var currentPos = 1, cnt = r.query.count; var caption = $('<span>',{ className: 'caption' }).appendTo(flickrSlider); var ul = $('<ul>',{ css:{ width: options.width*r.query.count, height:options.height } }); // Looping through the photo results: $.each(r.query.results.photo,function(){ data = this; // Creating a new LI element with the photo as its // centered background image: $('',{ css : { backgroundImage: 'url('+templateReplace(flickrSRC,data)+')', width: options.width } }).appendTo(ul); }); flickrSlider.addClass('flickrSliderHolder') .width(options.width) .height(options.height+25) .append(ul); // Binding a custom "slide" event. // You can then flickrSlider.trigger("slide",2) // to go to the second slide: flickrSlider.bind('slide',function(e,slide){ if(slide < 1 || slide > cnt || ul.is(':animated')){ return false; } ul.animate({ left:-(slide-1)*options.width },{ easing: 'easeInOutCirc', duration: 300 }); if(options.captions){ // Animating the transition between // the captions (if enabled): caption.fadeOut(150,function(){ caption.html(r.query.results.photo[slide-1].title); }).fadeIn(150); } currentPos = slide; }); var arrows = $('<div>',{ className: 'arrows' }); // Creating the previous / next arrows, and // binding event listeners for the click events: var arrowPrev = $('',{ className: 'previous', href: '#', click : function(){ var toShow = currentPos - 1; if(toShow < 1){ toShow = cnt; } flickrSlider.trigger('slide',[toShow]); return false; } }).appendTo(arrows); var arrowNext = $('',{ className: 'next', href: '#', click : function(){ var toShow = currentPos + 1; if(toShow > cnt){ toShow = 1; } flickrSlider.trigger('slide',[toShow]); return false; } }).appendTo(arrows); arrows.appendTo(flickrSlider); // Showing the first slide by default: flickrSlider.trigger('slide',[1]); if(options.autoAdvance){ // If auto advance is enabled, listen for // the load event and schedule a periodic slide change. // // Read more here: // http://tutorialzine.com/2011/01/how-...ng-slideshows/ $(window).load(function(){ $.fn.jqFlick.timeOut = null; arrowPrev.add(arrowNext).click(function(e,simulated){ if(!simulated){ clearTimeout($.fn.jqFlick.timeOut); } }); (function autoAdvance(){ if($.fn.jqFlick.timeOut){ arrowNext.trigger('click',[true]); } $.fn.jqFlick.timeOut = setTimeout(autoAdvance,options.advancePeriod); })(); }); } }); // This custom event removes all event listeners, // and empties the slider holder: flickrSlider.bind('jqFlickRemove',function(){ if($.fn.jqFlick.timeOut){ clearTimeout($.fn.jqFlick.timeOut); } flickrSlider.empty().unbind('jqFlickRemove slide'); }); return flickrSlider; }; // Helper function for replacing "{KEYWORD}" with // the respectful values of an object: function templateReplace(template,data){ return template.replace(/{([^}]+)}/g,function(match,group){ return data[group.toLowerCase()]; }); } // A custom easing functon. For more info visit: // http://gsgd.co.uk/sandbox/jquery/easing/ $.easing.easeInOutCirc = function (x, t, b, c, d) { if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; };})(jQuery);jqFlick takes an options object as its only parameter. You are required to specify the id of the photoset (the photosetID property), which you can easily copy from the address bar of your web browser while viewing the photoset. Only public photosets can be shown by the jqFlick.

Now lets see how the plugin is called:

js/script.js

$(document).ready(function(){ // Creating a flickr slider. This is // how you would probably use the plugin. $('#flickrSlider').jqFlick({ photosetID: '72157625956932639', width:500, height:320, autoAdvance:true }); // Creating different flickr sliders, // depending on the select element value. $('select').change(function(){ var options = {}; switch(this.value){ case '1': options = { photosetID: '72157625956932639', width:500, height:320, captions:true, autoAdvance:true }; break; case '2': options = { photosetID:'42296', width:500, height:500, captions:true, autoAdvance:true }; break; case '3': options = { photosetID:'72157625961099915', width:200, height:150 } } $('#flickrSlider').jqFlick(options); });});In the switch statement above, I am listening for the change event of the select dropdown. There, depending on the value of the select, I assign different options objects, which are then passed to the plugin. This demonstrates the different options that are available without taking much screen space.

With this our Flickr-powered Slideshow is complete!

Conclusion

You can use this plugin to build slideshows, product guides or presentations. To use the plugin you just need to drop the jqFlickr folder to your website root and include jqFlick.css and jqFlick.js in your HTML documents.




Read more (locally) ...


Partner : Tutorialzine


--------------------------------------------------

LOGECT Publisher Network™ (beta) is a Service that allows others to publish their syndicated content by RSS Feeds.

موضوعات مشابه: