JSFiddle - React, Tailwind, and code Playground

by johnlindquist

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/angular-1.0.0rc4.min.js"></script>
<script src="http://code.angularjs.org/angular-resource-1.0.0rc4.min.js"></script>
<!doctype html>
<html lang="en" ng-app="imageGallery">
<head>
  <meta charset="utf-8">
  <title>AngularJS Image Gallery</title>
</head>
<body class="container" ng-controller="GalleryController">
    <img src="http://angularjs.org/img/AngularJS-small.png">
    <div class="imageContainer span12">
        <!-- if the directive is creating an isolate scope, then I would make it an "element" directive in case you have multiple directives -->
    <full-image img-src="selectedImageUrl"></full-image>
    <div>{{selectedImageUrl}}</div>
    <div>
        <img ng-repeat="photo in photos" ng-src="{{photo.thumbUrl}}" ng-click="selectImg(photo)">
    </div>
    </div>
</body>
</html>

CSS

body {
    padding-top: 30px;
    padding-bottom: 40px;
    background: #222;
    color: #fff;
}

.imageThumb {
    width: 75px;
    height: 75px;
    border: 2px solid #000;
    margin: 5px;
}

.image {
    height: 600px;
}

.imageContainer {
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: center;
}

JavaScript

angular.module('imageGallery', ['imageGallery.services', 'imageGallery.directives']);

function GalleryController($scope, PhotoService) {

    $scope.selectedImageUrl = null;

    $scope.photos = PhotoService.query(function(data) {
        var photos = data.photos.photo;
        for (var i = 0; i < photos.length; i++) {
            var photo = photos[i];
            photo.thumbUrl = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_s.jpg"
            photo.fullsizeUrl = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_b.jpg"
        }
        $scope.photos = data.photos.photo;
        $scope.selectedImageUrl = $scope.photos[0].fullsizeUrl;
    });

    $scope.selectImg = function(data) {
        $scope.selectedImageUrl = data.fullsizeUrl;
    };
}

GalleryController.$inject = ['$scope', 'PhotoService'];

angular.module('imageGallery.services', ['ngResource']).
factory('PhotoService', function($resource) {
    return $resource('http://api.flickr.com/services/rest/', {
        api_key: '7617adae70159d09ba78cfec73c13be3',
        format: 'json',
        method: 'flickr.interestingness.getList',
        per_page: 24,
        page: 1,
        jsoncallback: 'JSON_CALLBACK'
    }, {
        query: {
            method: 'JSONP'
        }
    });
});

angular.module('imageGallery.directives', []).directive('fullImage', function() {
    return {
        restrict: 'E',
        scope: {
            //accessor is a preference of mine: @see http://jsfiddle.net/johnlindquist/s8FxV/1/
            imgSrc: 'accessor'
        },
        // The linking function will add behavior to the template
        link: function(scope, element, attrs) {
            scope.$watch("imgSrc()", function(newVal, oldVal) {
                //re-render the template each time "imgSrc()" changes
                element.html('<div>' + '<img src="'+ newVal +'" class="image">' + '</div>');
   ...