flickr set thumbs - JSON

pull flickr set thumbs of first six sets in a collection using pure js, flickr API and JSON

by vincentieo

HTML

<div style="width:500px;">
     <h3>Albums</h3>

    <div id="galleryNav">
        <div id="menu">_</div>
    </div>
</div>

CSS

#galleryNav a {
    display:block;
    margin:5px;
    float:left;
    padding:20;px;
    width:150px;
    border:1px solid #ccc;
    text-decoration: none;
    color: #000;
    opacity: 0.85;
    /* IE 8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    /* IE 5-7 */
    filter: alpha(opacity=100);
    -ms-transition: all 0.2s ease-out;
    /* IE10? */
    transition: all 0.2s ease-out;
    /* Netscape */
    -moz-transition: all 0.2s ease-out;
    /* Opera */
    -o-transition: all 0.2s ease-out;
    /* Safari 1.x and Chrome*/
    -webkit-transition: all 0.2s ease-out;
    -khtml-transition: all 0.2s ease-out;
}
#galleryNav a:hover {
    display:block;
    margin:0px;
    float:left;
    padding:5px;
    width:150px;
    border:1px solid #ccc;
    color: #336699;
    opacity: 1;
    /* IE 8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    /* IE 5-7 */
    filter: alpha(opacity=100);
    -ms-transition: all 0.2s ease-out;
    /* IE10? */
    transition: all 0.2s ease-out;
    /* Netscape */
    -moz-transition: all 0.2s ease-out;
    /* Opera */
    -o-transition: all 0.2s ease-out;
    /* Safari 1.x and Chrome*/
    -webkit-transition: all 0.2s ease-out;
    -khtml-transition: all 0.2s ease-out;
}

JavaScript

function ajax_get_json() {
    var thumbURL = new XMLHttpRequest();
    thumbURL.open("GET", "http://api.flickr.com/services/rest/?&method=flickr.photosets.getList&api_key=797507e576c902b2ffb0c8494fb368ab&user_id=37003559@N03&format=json&jsoncallback=process", true);
    thumbURL.onreadystatechange = function () {
        if (thumbURL.readyState == 4 && thumbURL.status == 200) {
            eval(thumbURL.responseText);
        }
    }
    thumbURL.send(null);
    menu.innerHTML = "<img style=\"margin-left:230px;margin-top:165px;\" src=\"http://timgodwinphotography.co.uk/cms/plugins/set_thumbs/loader.gif\" />";
};

function process(data) {
    var menu = document.getElementById("menu");
    menu.innerHTML = "";
    var sets = data.photosets.photoset;

    for (var i = 0; i < 6; i++) {
        menu.innerHTML += "<div class=\"menuItem\"><a target=\"_blank\" href=\"http://timgodwinphotography.co.uk/gallery/albums\/album" + [i] + ".php\"><img src=" + "http://farm" + sets[i].farm + ".staticflickr.com/" + sets[i].server + "/" + sets[i].primary + "_" + sets[i].secret + "_q.jpg" + "><p>" + sets[i].title._content + "</p></a></div>";
    };
};

ajax_get_json();