uniqname · mdt610 · Mar 19, 2015
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.idea/
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,154 @@
+body {
+    text-align:center;
+}
+
+p {
+    display:block;
+    width: 500px;
+    text-align: center;
+    margin: auto;
+    padding-bottom: 15px;
+}
+
+#thmbs {
+    width: 450px;
+    margin:0 auto;
+    overflow: auto;
+}
+
+img.thmb {
+    width: auto;
+    height: 80px;
+}
+
+img.active {
+    width: auto;
+    height: 300px;
+}
+ .ng-enter{
+     transition:0.75s;
+     opacity: 0;
+ }
+ .ng-enter-active{
+     opacity:1;
+ }
+ .ng-leave{
+     transition:0.75s;
+     opacity:1;
+ }
+ .ng-leave-active{
+     opactiy:0;
+ }
+
+ #thmbList {
+     white-space: nowrap;
+     margin: 0;
+ }
+
+ #thmbList li {
+     display: inline !important;
+     list-style-type: none;
+     padding-right:2px;
+     cursor: pointer;
+ }
+
+ #thmbList li:hover {
+     opacity: 0.75;
+ }
+
+ #thmbList li a {
+     padding: 0;
+     border: none;
+ }
+
+ #thmbList li a img {
+     display: inline;
+     padding: 0;
+ }
+
+ /*ngAnimate for ng-repeat */
+.repeat-animation.ng-enter,
+.repeat-animation.ng-leave,
+.repeat-animation.ng-move {
+  -webkit-transition: all linear 1s;
+  -moz-transition: all linear 1s;
+  -o-transition: all linear 1s;
+  transition: all linear 1s;
+
+  position:relative;
+  left:5px;
+}
+.repeat-animation.ng-enter {
+  opacity: 0;
+}
+.repeat-animation.ng-enter.ng-enter-active {
+  opacity: 1;
+}
+.repeat-animation.ng-leave {
+  opacity: 1;
+}
+.repeat-animation.ng-leave.ng-leave-active {
+  opacity: 0;
+}
+.repeat-animation.ng-move {
+  left:2px;
+  opacity: 0.5;
+}
+.repeat-animation.ng-move.ng-move-active {
+  left:0;
+  opacity: 1;
+}
+
+ /*ngAnimate for ng-view */
+.view-slide-in.ng-enter {
+  transition: all 1s ease;
+  -webkit-transition:all 1s ease;
+  -moz-transition: all 1s ease;
+  -o-transition: all 1s ease;
+
+  opacity:0.5;
+  position:relative;
+  opacity:0;
+  top:10px;
+  left:20px;
+}
+.view-slide-in.ng-enter {
+  opacity: 0;
+}
+.view-slide-in.ng-enter.ng-enter-active {
+  top:0;
+  left:0;
+  opacity: 1;
+}
+.view-slide-in.ng-leave.ng-leave-active{
+  top:5px;
+  left:5px;
+  opacity:1;
+}
+.view-slide-in.ng-leave{
+  top:0;
+  left:0;
+  opacity:0;
+}
+
+
+.show-setup {
+-webkit-transition: 1s linear all; /* Safari/Chrome */
+-moz-transition: 1s linear all; /* Firefox */
+-ms-transition: 1s linear all; /* IE10 */
+-o-transition: 1s linear all; /* Opera */
+transition: 1s linear all; /* Future Browsers */
+
+/* The animation preparation code */
+opacity: 0;
+}
+
+/*
+Keep in mind that you want to combine both CSS
+classes together to avoid any CSS-specificity
+conflicts
+*/
+.show-setup.show-start {
+/* The animation code itself */
+opacity: 1;
+}
diff --git a/gallery.html b/gallery.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html data-ng-app="gallery" data-ng-csp>
+<head>
+    <title>Image Gallery</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/style.css">
+    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
+    <script src="http://code.angularjs.org/1.2.9/angular-animate.min.js"></script>
+</head>
+<body>
+    <div data-ng-controller="GalleryController as gc" class="">
+        <image-gallery></image-gallery>
+        <!-- <image-gallery></image-gallery> I can now insert the image gallery anywhere on my site! -->
+    </div>
+
+<script type="text/javascript" src="js/app.js"></script>
+</body>
+</html>
diff --git a/image-gallery.html b/image-gallery.html
@@ -0,0 +1,19 @@
+<div class="view-slide-in" data-ng-view="">
+    <h1>Gallery Title: {{gc.album["gallery-title"]}}</h1>
+    <!-- Main Image or Active Image -->
+
+        <h4 data-ng-show="gc.current.title"><strong>Title: {{gc.current.title}}</strong></h4>
+        <h3 data-ng-show="gc.current.attribution"><strong>Attribution: {{gc.current.attribution}}</strong></h3>
+        <p data-ng-show="gc.current.description">Description: {{gc.current.description}}</p>
+        <img class="active center-block" data-ng-src="{{gc.current.src}}" alt="{{gc.current.description}}"/>
+</div>
+        <hr/>
+<div id="thmbs">
+    <ul id="thmbList">
+        <li data-ng-repeat="photo in gc.album.photos" >
+            <a href="#" data-ng-click="gc.setCurrent(photo)">
+                <img class="thmb center-block" data-ng-src="{{photo.src}}" alt="{{photo.description}}" />
+            </a>
+        </li>
+    </ul>
+</div>
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,35 @@
+(function(){
+    var app = angular.module('gallery', ['ngAnimate']);
+
+    app.controller('GalleryController', [ '$http', function($http){
+
+        var gallery = this;
+        gallery.album = [];
+        $http.get('gallery.json').success(function(data){
+            gallery.album = data;
+            gallery.current = gallery.album.photos[0];
+        });
+
+        this.setCurrent = function(photoObject){
+            return this.current = photoObject;
+        };
+    }]);
+
+    app.directive('imageGallery', function(){  // my own custom directive so I can insert the image gallery anywhere
+        return {
+            restrict: 'E',
+            templateUrl: 'image-gallery.html'
+        };
+    });
+})();
+
+/*
+* One challenge I came across was trying to get the json data from gallery.json.  It was easy when I just
+* set the json to a variable within this file.
+* After I was able to get the data through the $http angular service, I had to debug line 10.  I wanted to set the
+* default image for the "current" image in the gallery but I was placing the code outside of the .success promise and it
+* kept breaking my application.  Once I figured that out, I spent the rest of my time beautifying the gallery with css
+* and creating the custom directive so my html would be more expressive.
+*
+* 
+*/