JSFiddle - React, Tailwind, and code Playground

jQuery flickFeed for my templates

by chrisallenmoore

HTML

<div class="widget flickrFeed">
     <h5>Flickr Feed</h5>

    <div id="flickrImages"></div>
</div>

SCSS

/* The images styling is needed to turn the <ul> into a 3x3 grid */
 #flickrImages {
    padding: 0px;
    margin: 0 auto;
    height: 230px;
    width: 200px;
    overflow: hidden;
    ul {
        list-style: none;
        float: left;
        padding: 0px;
        margin: 0px;
        li {
            display: inline;
            img {
                border: none;
                padding: 0 5px 5px 0;
                width: 50px;
                height: 50px;
                opacity: 0.8;
                -moz-opacity: 0.8;
                -webkit-transition: all .25s ease;
                -moz-transition: all .25s ease;
                -ms-transition: all .25s ease-in;
                -o-transition: all .25s ease-in;
                transition: all .25s ease-in;
                &:hover {
                    opacity: 1;
                    -moz-opacity: 1;
                }
            }
        }
    }
}

JavaScript

// Our very special jQuery JSON fucntion call to Flickr, gets details of the most recent 20 images
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=28514311@N00&lang=en-us&format=json&jsoncallback=?", displayImages);

function displayImages(data) {
    // Randomly choose where to start. A random number between 0 and the number of photos we grabbed (20) minus 9 (we are displaying 9 photos).
    var iStart = Math.floor(Math.random() * (11));

    // Reset our counter to 0
    var iCount = 0;

    // Start putting together the HTML string
    var htmlString = "<ul>";

    // Now start cycling through our array of Flickr photo details
    $.each(data.items, function (i, item) {

        // Let's only display 9 photos (a 3x3 grid), starting from a random point in the feed
        if (iCount > iStart && iCount < (iStart + 18)) { /*was 10*/

            // I only want the ickle square thumbnails
            var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");

            // Here's where we piece together the HTML
            htmlString += '<li><a href="' + item.link + '" target="_blank">';
            htmlString += '<img src="' + sourceSquare + '" alt="' + item.title + '" title="' + item.title + '"/>';
            htmlString += '</a></li>';
        }
        // Increase our counter by 1
        iCount++;
    });

    // Pop our HTML in the #images DIV
    $('#flickrImages').html(htmlString + "</ul>");

    // Close down the JSON function call
}

// The end of our jQuery function