JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<div id="slideshow" />
<div id="caption" />

CSS

div#slideshow {
    background-position:    center;
    background-repeat:    no-repeat;
    overflow:        hidden;
    height:            500px;
    width:            500px;
}
div#caption {
    height:            100px;
    width:            500px;
}

JavaScript

// the following values are in milliseconds
var speedOut     = 2200;
var speedIn    = 2200;
var pauseShow    = 6000;
// object ids that you want the content in the slideshow to go into
var imageDestination    = '#slideshow';
var captionDestination    = '#caption';
// the email address that your Picasa album is under, most likely the same account as your Blogger blog
var picasaEmail    = '118148422418795262230';
//var picasaEmail    = '[email protected]';
// the name of the album in Picasa; this works better without any spaces or special characters
var picasaAlbum = '5627780525986993777';
//var picasaAlbum = 'TestPhotos';
// number of images you want returned in your slideshow
var picasaResults = 10;
// largest dimension of your slideshow area
var picasaDimension = 1600;
// set if we want random order, 0 or 1
var randomness    = 1;

$(document).ready(function() {
    //var url = 'http://picasaweb.google.com/data/feed/api/user/' + picasaEmail + '/album/' + picasaAlbum + '?kind=photo&imgmax=' + picasaDimension + '&max-results=' + picasaResults + '&alt=json?authkey=Gv1sRgCK7QwuXw7KCh7AE';
    var url = "https://picasaweb.google.com/data/feed/base/user/118148422418795262230/albumid/5627780525986993777?alt=json&start-index=1&max-results=1000&hl=ko&kind=photo&authkey=Gv1sRgCK7QwuXw7KCh7AE"
    ($.getJSON(url, 'callback=?')).success(function(data){
        var slides     = new Array();
        var counter     = 0;
        
        $(data.feed.entry).each(function(i, entry){
            slides[i]    = new Array(entry.content.src, entry.summary.$t, entry.gphoto$height.$t, entry.gphoto$width.$t);
            // url, caption, height, width
        });
        if (randomness) slides.sort(function() {return 0.5 - Math.random()});
        if(slides){
            var urlValue = 'url(' + slides[counter][0] + ')';
            if (slides[counter][2] > slides[counter][3]){
                $(imageDestination).css('background-size','auto 100%');
            } else...