JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id="gallery">What is the Picasa Web Albums Data API?</div>

https://developers.google.com/picasa-web/docs/2.0/reference#Feeds

JavaScript

$(function () {
    var json_Photo_URI = "https://picasaweb.google.com/data/feed/base/user/111727095210955830593/albumid/5420114965919213729?alt=json&fields=entry(title, media:group)&thumbsize=200"
    $.ajax({
        type: 'GET',
        url: json_Photo_URI,
        success: function (data) {

            var photo_URL = "";
            var photo_Thumb_Url = "";

            $.each(data.feed.entry, function (i, item) {
                $.each(item.media$group.media$content, function (i, item) { photo_URL = item.url; });
                $.each(item.media$group.media$thumbnail, function (i, item) { photo_Thumb_URL = item.url; });

                var photo_Description = item.media$group.media$description.$t;

                $('#gallery').append("<a href='" + photo_URL + "' title='" + photo_Description + "'><img src='" + photo_Thumb_URL + "'></a>");
            }); 

            $('#gallery a').lightBox({ txtImage: 'Photo', txtOf: '/' });
        }, dataType: 'jsonp'
    });
});