Add gallery

public/js/app.js

@@ -0,0 +1,65 @@
+var sliderApp=angular.module('sliderApp',['ngAnimate']);
+
+sliderApp.controller('SliderController', function($scope, $http) {
+  console.log("controller fired");
+  $scope.images = [];
+  $http.get('/api/images/list').success(function(data) {
+    data.forEach(function(image){
+      $scope.images.push({src:image.upload_name, title: image.timestamp});
+      console.log($scope.images);
+    })
+
+  })
+});
+
+sliderApp.directive('slider', function ($timeout) {
+  return {
+    restrict: 'AE',
+  replace: true,
+  scope:{
+    images: '='
+  },
+    link: function (scope, elem, attrs) {
+
+    scope.currentIndex=0;
+
+    scope.next=function(){
+      scope.currentIndex<scope.images.length-1?scope.currentIndex++:scope.currentIndex=0;
+    };
+
+    scope.prev=function(){
+      scope.currentIndex>0?scope.currentIndex--:scope.currentIndex=scope.images.length-1;
+    };
+
+    scope.$watch('currentIndex+images',function(){
+      scope.images.forEach(function(image){
+        // console.log(image);
+        image.visible=false;
+      });
+      console.log(scope.currentIndex, scope.images);
+      scope.images[scope.currentIndex].visible=true;
+    });
+
+    /* Start: For Automatic slideshow*/
+
+    var timer;
+
+    var sliderFunc=function(){
+      timer=$timeout(function(){
+        scope.next();
+        timer=$timeout(sliderFunc,10000);
+      },10000);
+    };
+
+    sliderFunc();
+
+    scope.$on('$destroy',function(){
+      $timeout.cancel(timer);
+    });
+
+    /* End : For Automatic slideshow*/
+
+    },
+  templateUrl:'templates/slider.html'
+  }
+});

public/stylesheets/style.css

@@ -20,6 +20,17 @@ paper-ripple{
 	color: #fff;
 }
 
+.slider{
+  position: relative;
+  left: 10%;
+}
+.slide{
+  position:absolute;
+  top:0;
+  left:0;
+  box-shadow: 0px 0px 15px #999;
+}
+
 .paper-header{
 	background-color: #2980b9;
 	height: 60px;

public/templates/slider.html

@@ -0,0 +1,8 @@
+<div class="slider">
+  <div class="slide" ng-repeat="image in images" ng-show="image.visible">
+    <img ng-src="img/{{image.src}}"/>
+  </div>
+  <div class="arrows">
+    <a href="#" ng-click="prev()"><img src="img/left-arrow.png"/></a> <a href="#" ng-click="next()"><img src="img/right-arrow.png"/></a>
+  </div>
+</div>

routes/index.js

@@ -8,6 +8,10 @@ router.get('/', function(req, res, next) {
   res.render('index', { title: 'Express' });
 });
 
+router.get('/gallery', function(req, res, next) {
+  res.render('gallery');
+});
+
 router.get('/files', function(req, res){
 	res.render('file', { title : 'File Upload'});
 });

views/gallery.jade

@@ -0,0 +1,4 @@
+extends layout
+
+block content
+  slider(images='images')

views/layout.jade

@@ -1,12 +1,12 @@
 doctype html
-html
+html(ng-app="sliderApp")
   head
     title= title
 
     script(src='/webcomponentsjs/webcomponents-lite.min.js')
     meta(name='viewport', content='width=device-width', initial_scale='1')
 
-    link(href='https://fonts.googleapis.com/css?family=Roboto', rel='stylesheet', type='text/css')    
+    link(href='https://fonts.googleapis.com/css?family=Roboto', rel='stylesheet', type='text/css')
     link(rel='import', href='/polymer/polymer.html')
     link(rel='import', href='/paper-button/paper-button.html')
     link(rel='import', href='/paper-card/paper-card.html')
@@ -16,5 +16,10 @@ html
     link(rel='import', href='/elements/ripple-card-element.html')
     link(rel='stylesheet', href='/stylesheets/style.css')
 
-  body(fullbleed unresolved layout vertical)
+    link(href='http://fonts.googleapis.com/css?family=Open+Sans', rel='stylesheet', type='text/css')
+    script(src='http://code.angularjs.org/1.2.9/angular.min.js', type='text/javascript')
+    script(src='http://code.angularjs.org/1.2.9/angular-animate.min.js')
+    script(src='/js/app.js')
+
+  body(fullbleed unresolved layout vertical ng-controller='SliderController')
     block content

views/slider.jade

@@ -0,0 +1,10 @@
+.slider
+    .slide(ng-repeat='image in images', ng-show='image.visible')
+        img(ng-src='img/{{image.src}}')
+      | 	
+      .arrows
+        a(href='#', ng-click='prev()')
+          img(src='img/left-arrow.png')
+        |  
+        a(href='#', ng-click='next()')
+          img(src='img/right-arrow.png')