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);
<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>