Flickrush is a jQuery plugin designed to make it quick and easy to add your flickr photo stream to any web page with minimal effort. Fully customisable you can choose the number of photos, randomise the ordering and style to fit in with any blog or web page. Click on the demo below to see it in action.
Usage
To use flickrush simply create an empty div and apply an ID or class of your choice, like so:
<div id="flickrImages"> </div>
You will need to call in the jquery framework before you call in jquery.flickrush.js like so:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.flickrush.js"></script>
Getting your flickr ID
In order to display your flickr photo stream you will need your flickr user_id, Yahoo have put together a great website to help you find out what it is. To initiate the plugin simply call it on your ID like so:
$(function(){
$('#flickrImages').flickrush({id:'44499772@N06' });
});Extra options for Flickrush
There are a few extra parameters you can pass into flickrush in order to customise your flickr photostream, like so:
$(function(){
$('#flickrImages').flickrush({
id: '44499772@N06', // the ID of your flickr username
limit: 6, // the number of photos to display
random: true // randomly select photos to be displayed
});
});Demo
You can view this jQuery plugin in action here. I have successfully tested the plugin in Firefox, safari, and IE 6 browsers with everything working fine, but if you can see any way to improve the plugin or any beneficial features, please feel free to try comment, any constructive criticism is welcome.
Version History
20/02/2010 – Version 1.0
February 15th, 2010
Did you check the name? It is already used by a Flickr App: http://flickrate.gasteroprod.com/ …
« Reply
philipbeel Reply:
February 17th, 2010 at 7:35 pm
@Nicolas Hoizey, Thanks for the heads up. I must have overlooked that one completely. I have renamed my plugin ‘flickrush’. Hope you like it!
« Reply
Nicolas Hoizey Reply:
February 18th, 2010 at 9:16 am
@philipbeel, Yeah, it’s a nice new name!
« Reply
February 20th, 2010
Very nice plugin! Thanks for your work
« Reply
March 18th, 2010
cool. thanks for taking the time to share this plugin!
« Reply
March 24th, 2010
Hey! Great plugin!
I’d like to use it, but a question first – what other control can we have over the image size, and linking? Is it possible to include this?
Thanks so much!!
« Reply
philipbeel Reply:
March 24th, 2010 at 4:20 pm
@Michael Caputo, Sure, you are more than welcome to modify the plugin. I may add functionality moving forward, thanks for the suggestions.
« Reply
April 25th, 2010
awesome!
could you um, add function like display based on sets ?
« Reply
philipbeel Reply:
April 25th, 2010 at 12:06 pm
@st, I would need a bit more detail on what the core functionality woud need to be, although from the outset this does sound like quite a bespoke request. You are more than welcome to take my base code and develop as required.
« Reply
May 4th, 2010
Good one! Simple with a good taste. Is it possible to add links to the actual photos on Flickr??
Thanks,
Iryna
« Reply
philipbeel Reply:
May 4th, 2010 at 10:46 pm
@Iryna Mologoko, thankyou for the kind words. The plugin does not currently have that functionality, although it is worthwhile feedback and something I would certainly consider for future releases of the plugin.
In the meantime please feel free to pick at the code and add this yourslef if you wish.
« Reply
June 20th, 2010
real quick, how can I make this pull the thumbnails rather than the medium sized images?
« Reply
philipbeel Reply:
June 21st, 2010 at 9:10 am
@chris, you should be able to change the sizes of the images in the CSS if you want to adjust the sizing.
« Reply
August 18th, 2010
awesome script. fyi, it looks like the width setter is missing if random = false. Added width: defaults.width in that block (line 44 of the unpacked version)
« Reply
philipbeel Reply:
August 18th, 2010 at 4:02 pm
@david, Cheers for the heads up I will get that fixed soon!
« Reply
November 8th, 2010
It seems the default on this is for the images to be quite small. When CSS is used to make the images larger (640 x 480) it causes the images to get pixellated.
Is there a way to call the images from the photostream in a larger size format. Possibly using the _z suffix, like what is discussed here http://www.flickr.com/services/api/misc.urls.html?
Thanks
« Reply
philipbeel Reply:
November 9th, 2010 at 8:56 am
@Rob, I am sure something like this should be possible. I will experiment and see what can be done. When I get this plugin into github, please feel free to fork the code
« Reply
November 24th, 2010
Great little plugin thanks. I needed something quick and simple for a project where I didn’t need the user to go through API sign up and all that.
Was wondering if you had this code up on github maybe? I am adding some features to your code to handle a little more stuff I needed such as a callback function, list creation and links.
-Ryan
« Reply
March 18th, 2011
Hi Philip,
Firstly, great little plugin. I’m hoping to build it into mysite when I work a few things out.
I require to use sets. For example there will be three different random selections, each from different sets.
I’ve tried to modify the plugin (if the modifications are any use i’m happy for them to be reused of course) using other examples of code available on flickr and other sets. Here is what i’ve came up with:
html:
$(function() {
$(‘div#flickrImages’).flickrush({
limit:3,
id:’44499772@N06′,
random:true,
photoset_id:’72157623069967604′,
size: ‘m’
});
});
javascript:
(function($){
$.fn.flickrush=function(options){
var defaults={
limit:3,
random:false,
id:’yourUserId’,
photoset_id: ”,
size: ‘s’
};
var options=$.extend(defaults,options);
return this.each(function(options){
var act=$(this);
var url=”http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=yourAPIkey&photoset_id=”+defaults.photoset_id+”=&format=json&jsoncallback=?”;
$.getJSON(url, function(data){
var num = 0; //get a random integer
var imageArray = new Array(); //store used images in here
while( num <= defaults.limit-1) {
if(defaults.random == true) {
var randomiser = Math.floor(Math.random()*20);
}
$.each(data.photoset.photo, function(i,item){
if(defaults.random == true) {
if( ( i == randomiser ) && (!imageArray.in_array(randomiser) ) ) {
var imgUrl ='http://farm'+item.farm+'.static.flickr.com/'+item.server+'/'+item.id+'_'+item.secret+'_'+defaults.size+'.jpg';
var newImage = $("”).attr({
src: imgUrl
});
$(act).append(newImage);
}
} else {
if( ( i <= defaults.limit-1 ) && (!imageArray.in_array(defaults.limit-1) ) ) {
var imgUrl ='http://farm'+item.farm+'.static.flickr.com/'+item.server+'/'+item.id+'_'+item.secret+'_'+defaults.size+'.jpg';
var newImage = $("”).attr({
src: imgUrl
});
$(act).append(newImage);
}
}
});
if(defaults.random == true) {
if ( imageArray.in_array(randomiser) ) {
defaults.limit++;
}
//strore our image number
imageArray.push(randomiser);
} else {
imageArray.push(defaults.limit-1);
}
num++;
}
});
//function to check in an array
Array.prototype.in_array = function(p_val) {
for(var i = 0, l = this.length; i < l; i++) {
if(this[i] == p_val) {
return true;
}
}
return false;
}
});
}
})(jQuery);
The problem with this is that the random just doesn't want to work. It either gives me one random photo or none or sometimes two, but rarely three. And i'm not sure they are random..
Could anyone comment on the problem here?
David
« Reply