uniqname · akendall · Mar 21, 2015 · Mar 21, 2015 · Mar 22, 2015 · Mar 22, 2015
diff --git a/.DS_Store b/.DS_Store
diff --git a/assets/img/blank.gif b/assets/img/blank.gif
diff --git a/assets/img/paddle_next_999.png b/assets/img/paddle_next_999.png
diff --git a/assets/img/paddle_next_fff.png b/assets/img/paddle_next_fff.png
diff --git a/assets/img/paddle_prev_999.png b/assets/img/paddle_prev_999.png
diff --git a/assets/img/paddle_prev_fff.png b/assets/img/paddle_prev_fff.png
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,208 @@
+.author{
+  margin-left: 10px;
+  color:#ffffff;
+  font-size: 16px;
+  z-index: 1000;
+  font-family: cursive;
+}
+
+body {
+    overflow: none;
+    background-color: #000000;
+}
+
+.container{
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-end;
+}
+
+.label-wrapper{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 600px;
+}
+
+.main{
+  display:flex;
+  flex-direction:column;
+  justify-content:center;
+  align-items:center;
+}
+
+.dis-span{
+  color: white;
+  text-align: center;
+  font-size: 16px;
+  line-height: 20px;
+  font-family:Lucida Sans Unicode;
+}
+
+.slider {
+    width: 700px;
+    height: 450px;
+    overflow: hidden;
+    position: relative;
+    margin-top: 20px;
+}
+
+.slide {
+    position: absolute;
+    max-width: 100%;
+    min-width: 100%;
+    top: 0;
+    left: 0;
+}
+
+.arrow {
+    position: absolute;
+    z-index: 1002;
+    display: block;
+    top: 50%;
+    margin-top: -35px;
+    width: 36px;
+    height: 71px;
+    outline: none;
+    cursor: pointer;
+    background: url(../assets/img/blank.gif) no-repeat;
+}
+
+.arrow.prev {
+    opacity: 0.2;
+    left: 20px;
+    background-image: url(../assets/img/paddle_prev_999.png);
+    transition: 0.2s linear all;
+}
+
+.arrow.next {
+    opacity: 0.2;
+    right: 20px;
+    background-image: url(../assets/img/paddle_next_999.png);
+    transition: 0.2s linear all;
+}
+
+.arrow.prev:hover {
+    opacity: 1;
+    background-image: url(../assets/img/paddle_prev_fff.png);
+}
+
+.arrow.next:hover {
+    opacity: 1;
+    background-image: url(../assets/img/paddle_next_fff.png);
+}
+
+
+
+/*---------------------------------------------------------
+NAV
+---------------------------------------------------------*/
+
+.nav {
+    text-align: center;
+    display: block;
+    position: absolute;
+    z-index: 1002;
+    left: 0;
+    bottom: -4px;
+    right: 0;
+    height: 48px;
+}
+
+.nonDraggableImage{
+    -webkit-user-drag: none;
+}
+
+.nav .wrapper {
+    margin: 0 auto;
+    width: 100%;
+    padding: 1em 0 .8em;
+}
+
+.nav ul {
+    margin: 0;
+    width: 100%;
+}
+
+.nav .dot, .nav .dot a {
+    display: inline-block;
+    zoom: 1;
+}
+
+.dots .dot {
+    position: relative;
+    margin: 0 8px;
+    width: 12px;
+    height: 12px;
+}
+
+.dots .dot a {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 6px;
+    height: 6px;
+    text-indent: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    background: #FFF;
+    border: 1px solid transparent;
+    outline: none;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    border-radius: 50%;
+    -webkit-transition: background-color 0.25s, border-color 0.25s;
+    -moz-transition: background-color 0.25s, border-color 0.25s;
+    transition: background-color 0.25s, border-color 0.25s;
+}
+
+.dots .dot a.active {
+    border-color: #FFF;
+    background-color: transparent;
+}
+
+@media (max-width: 1050px) {
+  .slider{
+    width:600px;
+    height:400px;
+  }
+}
+@media (max-width: 850px) {
+  .slider{
+    width:600px;
+  }
+}
+@media (max-width: 680px) {
+  .slider{
+    width:400px;
+    height:305px;
+  }
+  .label-wrapper{
+    width:400px;
+  }
+@media (max-width: 480px) {
+  .slider{
+    width:300px;
+    height:200px;
+  }
+  .label-wrapper{
+    width:300px;
+  }
+  .author{
+    font-size: 10px;
+  }
+}
+@media (max-width: 360px) {
+  .slider{
+    width:300px;
+    height:200px;
+  }
+  .label-wrapper{
+    width:300px;
+  }
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html ng-app="website">
+<head>
+    <meta charset="utf-8">
+    <title>AngularJS Animate Slider</title>
+
+    <!-- <link href="css/bootstrap.css" rel="stylesheet"> -->
+    <link rel="stylesheet" href="css/styles.css">
+</head>
+
+<body ng-controller="MainCtrl">
+
+<div class="main">
+  <div class="container slider">
+      <img ng-repeat="slide in slides" class="slide slide-animation nonDraggableImage"
+           ng-swipe-right="nextSlide()" ng-swipe-left="prevSlide()"
+           ng-hide="!isCurrentSlideIndex($index)" ng-src="{{slide.src}}"/>
+           <!-- the imgages are too big for the slider currently and some are smaller -->
+
+      <a class="arrow prev" href="#" ng-click="nextSlide()"></a>
+      <a class="arrow next" href="#" ng-click="prevSlide()"></a>
+      <nav class="nav">
+          <div class="wrapper">
+              <ul class="dots">
+                  <li class="dot" ng-repeat="slide in slides">
+                      <a href="#" ng-class="{'active':isCurrentSlideIndex($index)}"
+                         ng-click="setCurrentSlideIndex($index);">{{slide.title}}</a></li>
+              </ul>
+          </div>
+      </nav>
+      <p class="author">{{currentSlide.attribution}}</p>
+  </div>
+  <div class="label-wrapper"><p type=text class="dis-span">{{currentSlide.description}}</p></div>
+</div>
+
+<script src="libs/jquery.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-animate.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-touch.min.js"></script>
+<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
+
+<script src="js/app.js"></script>
+
+</body>
+</html>
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,108 @@
+var ngModule = angular.module('website', ['ngAnimate', 'ngTouch']);
+
+  ngModule.controller('MainCtrl', function ($document, $scope, $http, $timeout) {
+      // some difficulty implementing the json fiile into the scope
+      // $scope.slides = [];
+      // picInfo.success(function(data) {
+      //   debugger
+      //   $scope.foo = "Hello "+data.contentItem[0].username;
+      // });
+      $http.get('gallery.json').success(function(data) {
+        $scope.currentSlide = data.photos[0];
+        $scope.slides = data.photos;
+      });
+      // $.getJSON("gallery.json", function( data ) {
+        // gives cross origin because I am running from htlm, I will
+        // come back to this if I can't fix it in a different way
+        // I like the http.get better so I am using that but to get over
+        // the cross origin problem I npm installed http-services and ran the app
+        // through there.
+      // });
+
+        $scope.direction = 'left';
+        $scope.currentIndex = 0;
+
+        $scope.setCurrentSlide = function(index){
+          $scope.currentSlide = $scope.slides[index];
+          // sliderFunc();
+        }
+
+        $scope.setCurrentSlideIndex = function (index) {
+          $scope.direction = (index > $scope.currentIndex) ? 'left' : 'right';
+          $scope.currentIndex = index;
+          $scope.setCurrentSlide(index);
+        };
+
+        $scope.isCurrentSlideIndex = function (index) {
+          return $scope.currentIndex === index;
+        };
+
+        $scope.prevSlide = function () {
+          $scope.direction = 'left';
+          $scope.currentIndex = ($scope.currentIndex < $scope.slides.length - 1) ? ++$scope.currentIndex : 0;
+          $scope.setCurrentSlide($scope.currentIndex);
+        };
+
+        $scope.nextSlide = function () {
+          $scope.direction = 'right';
+          $scope.currentIndex = ($scope.currentIndex > 0) ? --$scope.currentIndex : $scope.slides.length - 1;
+          $scope.setCurrentSlide($scope.currentIndex);
+        };
+
+        // Adding timeout function so that the slider will auto scroll
+        var timer;
+
+        var sliderFunc=function(){
+    			timer=$timeout(function(){
+    				$scope.prevSlide();
+    				timer=$timeout(sliderFunc,2000);
+    			},4000);
+    		};
+
+    		sliderFunc();
+
+        $($document).bind('mouseup',stopTimeout);
+
+        function stopTimeout(){
+          $timeout.cancel(timer);
+        }
+
+    		$scope.$on('$destroy',function(){
+    			$timeout.cancel(timer);
+    		});
+    });
+    ngModule.animation('.slide-animation', function () {
+        return {
+            beforeAddClass: function (element, className, done) {
+                var scope = element.scope();
+
+                if (className == 'ng-hide') {
+                    var finishPoint = element.parent().width();
+                    if(scope.direction !== 'right') {
+                        finishPoint = -finishPoint;
+                    }
+                    TweenMax.to(element, 0.5, {left: finishPoint, onComplete: done });
+                }
+                else {
+                    done();
+                }
+            },
+            removeClass: function (element, className, done) {
+                var scope = element.scope();
+
+                if (className == 'ng-hide') {
+                    element.removeClass('ng-hide');
+
+                    var startPoint = element.parent().width();
+                    if(scope.direction === 'right') {
+                        startPoint = -startPoint;
+                    }
+
+                    TweenMax.fromTo(element, 0.5, { left: startPoint }, {left: 0, onComplete: done });
+                }
+                else {
+                    done();
+                }
+            }
+        };
+    });
diff --git a/libs/TweenMax.min.js b/libs/TweenMax.min.js
diff --git a/libs/angular-animate.min.js b/libs/angular-animate.min.js