flickr set thumbs - JSON

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

by zovjunice89

HTML

<div class="twothird">
     <h3>Albums</h3>

    <div id="galleryNav">
        <div id="menu">_</div>
    </div>
    <script type="text/javascript">
      
    </script>
</div>

CSS

#galleryNav a {
    display:block;
    margin:5px;
    float:left;
    padding:5px;
    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:5px;
    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(number) {
    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; height:50px;widht:50px\" src=\"https://edilekce.tbmm.gov.tr/App_Themes/Ayar/images/GridViews/progressBar.gif\" />";
};

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

    for (var i = 0; i < 100; i++) {
     console.log(i);    
        if(sets[i])
        {
        menu.innerHTML += "<div class=\"menuItem\"><a href=\"/gallery/albums/album" + [i] + ".php#gallery\"><img src=" + "http://farm" + sets[i].farm + ".staticflickr.com/" + sets[i].server + "/" + sets[i].primary + "_" + sets[i].secret + "_q.jpg" + "><p></p></a></div>";
           
        }
        else
        {
            i=100;
        }
      

        };
    

};
ajax_get_json();