all posts

Add a Flickr widget to any web site with jQuery

Published to Blog on 20 Jan 2010

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](http://richardshepherd.com))

\* for more info visit
\* [http://www.richardshepherd.com/how-to-use-jquery-with-a-json-flickr-feed-to-display-photos/](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.

Dan Hounshell
Web geek, nerd, amateur maker. Likes: apis, node, motorcycles, sports, chickens, watches, food, Nashville, Savannah, Cincinnati and family.
Dan Hounshell on Twitter