JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<img src="" id="slide_show_pic" alt="">

JavaScript

//(function(){
    //Refer http://code.google.com/apis/picasaweb/docs/2.0/reference.html

    // Album url can be obtained by getting the rss feed of a Public or Limited album
    var album_url = "https://picasaweb.google.com/data/feed/base/user/104873802064687726116/albumid/5710488196657525265?"+ // The base url
    //Query Parameters 
    "alt=json"+ // Options are json and rss , 
    "&kind=photo"+
    "&authkey=Gv1sRgCIC0zJCjrbqplwE"+//Necessary only because the album's visibility is Limited , link only 
    "&hl=en_GB"+//Language
    "&prettyprint=true"+ // Only enable in Development mode
    "&imgmax=1600"; // Max size of each of the images

    var PicList  = new Array();
    var slide_show_pic = $("#slide_show_pic");

    function _generateRandomImageNumber(){
        // Not for public use
        return Math.floor(Math.random() * PicList.length);
    }

    function getRandomImage(){
        var img = new Image();
        img.src = PicList[_generateRandomImageNumber()];
        return img;
    }

    function paintImage(img){
        // @param : an object of type Image
        img.onload = function(){
            slide_show_pic.fadeOut("",function(){ 
                // Call back function, Called only after fade out completes.
                slide_show_pic.attr("src" , img.src);
                slide_show_pic.fadeIn();
            });
        };
    }

    function paintRandomImage(){
        paintImage(getRandomImage());
    }

    $(document).ready(function(){

        //Get the Feed data from Picasa
        $.getJSON(album_url, function(data) {
            //Push the Url of each image
            $.each(data.feed.entry, function(key, val) {
                PicList.push(val.content.src);
            });
            // Paint on Page and feed loads
            paintRandomImage();
            // Paint new image every x milli seconds
            setInterval(paintRandomImage,1000 * 10 );
        });
    });