January 20, 2010

Add a Flickr widget to any web site with jQuery

One of the new additions to the home page of my blog is the “My Latest Photos” widget. It pulls in the 12 most recent pictures that I’ve uploaded to Flickr. It also gives a nice large preview of the image when you mouseover a thumbnail.

CropperCapture[53]

Like the Twitter widget that I blogged about yesterday, the Flickr widget is done completely with client-side code. It uses some jQuery to make a request to get a Flickr feed formatted as json and and a little bit more JavaScript to output the images to the page. The code that I’m using is based on the code in the article “How to use jQuery with a JSON Flickr feed to display photos” by Richard Shepherd.

/* Flickr Gallery script 
* powered by jQuery (http://www.jquery.com)

* written by Richard Shepherd (http://richardshepherd.com)

* for more info visit 
* http://www.richardshepherd.com/how-to-use-jquery-with-a-json-flickr-feed-to-display-photos/ */

function getFlickr(userid, target, numberToDisplay) {

var url = http://api.flickr.com/services/feeds/photos_public.gne?id=
+ userid + "&lang=en-us&format=json&jsoncallback=?";

$.getJSON(url, displayImages);

function displayImages(data) {
var htmlString = "";

var ctr = 0;
$.each(data.items, function(i, item) {

if (ctr < numberToDisplay) {
var sourceSquare =
                    (item.media.m).replace("_m.jpg", "_s.jpg");
var sourceOrig =
                    (item.media.m).replace("_m.jpg", ".jpg");

htmlString += '<a href="' + sourceOrig +
                    '" class="preview" title="' + item.title +
                    '" target="_blank" style="opacity: 1;">';
htmlString += '<img title="' + item.title +
                    '" src="' + sourceSquare + '" ';
htmlString += 'alt="' + item.title +
                    '" style="opacity: 1;" />';
htmlString += '</a>';
ctr = ctr + 1
}
});

$('#' + target).append(htmlString);

//update image preview so we get
//the nice popup mouseovers on the images
//Note: this uses the Image Preview Script,
//if not using it remove the below line.



imagePreview();
}
}

For the popup image preview I used code based on the article “Easiest Tooltip and Image Preview using jQuery” on CSSGlobe.com.

/* Image preview script 
 * powered by jQuery (http://www.jquery.com)

 * written by Alen Grakalic (http://cssglobe.com)

 * for more info visit 
 * http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery */
 
this.imagePreview = function(){    
    /* CONFIG */
    xOffset = -20;
    yOffset = -100;
        
    // these 2 variable determine popup's distance from the cursor
    // you might want to adjust to get the right result
        
    /* END CONFIG */
    $("a.preview").hover(function(e){
        this.t = this.title;
        this.title = "";    
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='preview'><img src='"+ 
            this.href +"' alt='Image preview' />"+ c +"</p>");                                 
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");                        
    },
    function(){
        this.title = this.t;    
        $("#preview").remove();
    });    
    $("a.preview").mousemove(function(e){
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });            
};


// starting the script on page load
$(document).ready(function(){
    imagePreview();
});

I put the JavaScript needed for the Flickr feed into a file named “jquery.flickr.js” and the preview image code into a file named “jquery.imagepreview.js”. I added script references to the two files, along with a script reference to jQuery, to the bottom of the page. After that all that is needed is to add a container to hold the images that the script creates, a line of JavaScript to wire everything up, and some CSS updates to format the output as desired.

<script type="text/javascript" src="jquery.flickr.js"></script>
<script type="text/javascript" src="jquery.imagepreview.js"></script><div id="flickrphotos"></div>
<script type='text/javascript'>
     $(document).ready( function() {
         getFlickr(‘yourFlickrIdGoesHere’, 'flickrphotos', 12);
     });
</script>

There you go – a simple Flickr widget implemented with nothing more than a little JavaScript. Happy hacking.

Comments,

  • Trackbacks,
  • and Pingbacks
blog comments powered by Disqus

 

Trackbacks and Pingbacks


  1. Pingback from Dew Drop – January 21, 2009 | Alvin Ashcraft's Morning Dew

  2. Another new addition to the home page of my blog is the �Latest Videos� widget. It pulls in the 6

  3. This is my next to last blog post about the new widgets on my home page.&#160; The “Lastest Music” widget pulls data from my Last.fm account. Currently I’m displaying the 12 artists/albums that I’ve listened to the most on Last.fm over the last week.

  4. Another new addition to the home page of my blog is the &ldquo;Latest Videos&rdquo; widget. It pulls in the 6 most recent videos that I have tagged as favorites on YouTube. It also has the option to pull in only videos that I have uploaded, but since

Shortcuts

Where is Dan?


My Blog
My Blog
Twitter
Twitter
Facebook
Facebook
LinkedIn
LinkedIn
Flickr
Flickr
YouTube
YouTube
Delicious
Delicious
Foursquare
Foursquare
Pinterest
Pinterest
GetGlue
GetGlue
Pintley
Pintley
XBOX Live
XBOX Live
Last.fm
Last.fm
Windows Live
Windows Live
Telligent.com
Telligent
Graffiti CMS on CodePlex
Graffiti CMS
Popular

Recent Posts