Flikr

by Bretto

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">
    <div class="fullImage" img-src="{{selectedImageUrl}}"></div>
    <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: 'C',
            // This HTML will replace the zippy directive.
            replace: true,
            transclude: true,
            scope: { imgSrc: 'bind'},
            template: '<div>' +
                '<img src="{{imgSrc}}" class="image">' +
                '</div>',
            // The linking function will add behavior to the template
            link: function(scope, element, attrs) {

            }
        }
    });