JSFiddle - React, Tailwind, and code Playground

by yuezhizizhang

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flickr Album</title>

<link rel="stylesheet" href="css/style.css">

<!--[if IE]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>

<header>
    <div class="ui-header-bar"></div>
    <div class="ui-logo"></div>
</header>

<section class="ui-body">
    <div class="ui-photo-gallery ui-photo-border">
        <img id="photo" title="Tree" alt="Tree" src="https://lh4.googleusercontent.com/-Hm1SRQlDoOg/UFBY4O4fDJI/AAAAAAAAAvg/hepttL9t4vA/s800/photo-holder.png">
        <p id="photoTitle" class="ui-photo-title">Tree</p>

        <a id="photoPrevBtn" href="#" title="Prev" class="ui-photo-prev-btn">
            <span class="ui-photo-prev-inner"></span>
        </a>

        <a id="photoNextBtn" href="#" title="Next" class="ui-photo-next-btn">
            <span class="ui-photo-next-inner"></span>
        </a>
    </div>

    <div class="ui-slide-strip">
        <a id="slidePrevBtn" href="#" title="Prev" class="ui-slide-prev-btn ui-disabled">
            <span class="ui-slide-prev-inner"></span>
        </a>

        <div class="ui-carousel-container">
            <ul id="carousel" class="ui-carousel">
                <li class="ui-thumbnail">
                    <a href="#" class="ui-photo-border">
                        <img alt="thumb1" src="https://lh3.googleusercontent.com/-2hMHqHSBEJo/UFBY5AZOBaI/AAAAAAAAAvo/g9KvHectYg8/s150/thumbnail-holder.png">
                    </a>
                </li>
                <li class="ui-thumbnail ui-photo-gap">
                    <a href="#" class="ui-photo-border">
                        <img alt="thumb2" src="https://lh3.googleusercontent.com/-2hMHqHSBEJo/UFBY5AZOBaI/AAAAAAAAAvo/g9KvHectYg8/s150/thumbnail-holder.png">
                    </a>
                </li>
                <li class="ui-thumbnail ui-photo-gap">
                    <a href="#" class="ui-photo-border">
                        <img alt="thumb3"...

CSS

html,
body {
    height: 100%;
}

body {
    font-family: Helvetica, Arial, "Trebuchet MS", Tahoma, sans-serif;
    font-size: 100%;
    color: #333;
    margin: 0;
    background-color: #dddacf;
    background: url(../resources/icons/bg-texture.png) repeat;
}

p {
    margin: 0;
}

a, 
a span,
ul, 
li {
    display: inline-block;
}

.ui-header-bar {
    height: 40px;
    background: url(https://lh5.googleusercontent.com/-BCEyRJqtWI8/UFBY0dh28_I/AAAAAAAAAvI/ExKqRYG3h2A/s230/header-bar.png) repeat-x;
}

.ui-logo {
    position: relative;
    top: -30px;
    width: 800px;
    height: 185px;
    margin: 0 auto;
    background: url(https://lh3.googleusercontent.com/-wqwH7m3grlk/UFBY1oQw-TI/AAAAAAAAAvQ/PT0sr6dR5ZM/s800/logo-bar.png) no-repeat;
    z-index: 10;
}

.ui-body {
    margin-top: -70px;
    padding-bottom: 50px;
}

.ui-photo-border {
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    box-shadow: 0 5px 5px #ccc;
    -webkit-box-shadow: 0 5px 5px #ccc;
    -moz-box-shadow: 0 5px 5px #ccc;
}

.ui-photo-gallery {
    position: relative;
    margin: 0 auto;
    width: 800px;
    background: #fff;
    border: 10px solid #fff;
}

.ui-photo-prev-btn {
    position: absolute;
    top: 244px;
    left: -30px;
}

.ui-photo-prev-inner,
.ui-photo-next-inner,
.ui-slide-prev-inner,
.ui-slide-next-inner {
    background-image: url(https://lh4.googleusercontent.com/-GUVGpNqiOXQ/UFBY29sEH7I/AAAAAAAAAvY/8e2xXHL3S1M/s130/nav-btn.png);
}

.ui-photo-prev-inner,
.ui-photo-next-inner {
    width: 60px;
    height: 65px;
}

.ui-photo-prev-inner {
    background-position: 0 0;
}

.ui-photo-next-btn {
    position: absolute;
    top: 244px;
    right: -35px;
}

.ui-photo-next-inner {
    background-position: -65px 0;
}

.ui-slide-strip {
    margin: 40px auto 0 auto;
    width: 800px;
    text-align: center;
}

.ui-slide-prev-btn,
.ui-slide-next-btn {
    position: relative;
    top: -50px;
}

.ui-slide-prev-inner,
.ui-slide-next-inner {
   ...

JavaScript

/*
* Flickr Album
* http://ifiona2012.blogspot.com/
*
* Dual licensed under the MIT or GPL Version 2 licenses.
* Email: [email protected]
*
*/
function FlickrUtil() {
    "use strict";
}

(function() {
    "use strict";

    // Flickr rest service address
    FlickrUtil.prototype.DOMAIN = "http://api.flickr.com/services/rest/";

    /*
     * Cross-domain ajax request.
     *
     * @param url             AJAX request URL.
     * @param successCallback AJAX success callback function.
     */ 
    var ajax = function( url, successCallback ) {
        $.ajax({
            url : url,
            type : "GET",
            dataType : "jsonp",          // JSONP cross-domain request
            crossDomain : true,
            async : true,
            cache : true,
            jsonp : "jsoncallback",      // Callback function is called 'jsoncallback'.
            success : successCallback
        });
    };

    /*
     * Append query string to the GET URL.
     *
     * @param params An object of parameters to serialize
     * @param url    URL appended to.
     */ 
    var appendQuery = function( params, url ) {
        var // Serialize params object into a URL query string
            p = $.param(params),
            s;

        url = url || FlickrUtil.prototype.DOMAIN;
        s = url.indexOf('?') < 0 ? "?" : "&";
        
        return url + s + p;
    };

    /*
     * Get a list of public photos for the given user.
     * 
     * @param userId          The NSID of the user who's photos to return.
     * @param apiKey          Flickr API application key. See http://www.flickr.com/services/api/misc.api_keys.html for more details.
     * @param perPage         Number of photos to return per page.
     * @param page            The page of results to return.
     * @param successCallback AJAX success callback function.
     */ 
    FlickrUtil.prototype.getPublicPhotos = function( userId, apiKey, perPage, page, successCallback ) {
        var method =...