JSFiddle - React, Tailwind, and code Playground

by Daff

HTML

<script src="https://rawgit.com/daffl/breezy/v0.1.0/dist/breezy.js"></script>
<script src="https://rawgit.com/Polymer/observe-js/master/src/observe.js"></script>
<div id="application" class="container">
    <h1 class="page-header">{{heading}}</h1>
    <p show-if-not="selection">Click on an image to select it</p>
    <p show-if="selection">
        You have selected: 
        <a with="selection" href="{{link}}" target="_blank">{{title}}</a>
    </p>
    <div class="row">
        <div for-each="images" class="col-xs-4">
            <a href="#" class="thumbnail {{equal selection $this ? 'active'}}">
                <img src="{{image}}" alt="{{title}}" />
            </a>
        </div>
    </div>
</div>

CSS

.thumbnail a {
    text-align: center;
    display: block;
}

JavaScript

var data = {
    heading: 'My image gallery',
    selection: null,
    equal: function (obj, other) {
        return obj === other;
    },
    images: [{
        "title": "First light",
            "link": "http://www.flickr.com/photos/37374750@N03/16032244980/",
            "image": "http://farm8.staticflickr.com/7525/16032244980_4052521ab6_m.jpg"
    }, {
        "title": "Yellow Daisy",
            "link": "http://www.flickr.com/photos/110649234@N07/16218828372/",
            "image": "http://farm8.staticflickr.com/7471/16218828372_5bc20dda73_m.jpg"
    }, {
        "title": "Striped Leaves",
            "link": "http://www.flickr.com/photos/110649234@N07/16033840027/",
            "image":
            "http://farm8.staticflickr.com/7538/16033840027_cd93d683e3_m.jpg"
    }]
};

// Use event delegation (since .thumbnail is not on the page yet)
$(document).on('click', '.thumbnail', function () {
    // Get the context for the image we clicked on
    var image = breezy.context(this);
    // Update the selection
    data.selection = image;
});

// Render the application with our data
breezy.render(document.getElementById('application'), data);