diff --git a/README.md b/README.md
index 1d524f3..293f1d9 100644
--- a/README.md
+++ b/README.md
@@ -6,3 +6,17 @@ Clone this repo and create a responsive image gallery using the gallery.json fil
Make sure to document your decision process in your code and elaborate on challenges and solutions in your commit messages and pull requests.
Keep in mind, this is more about problem solving rather than strictly skill with code. Highlight areas you are strong in, but don't sweat any weaker areas too much.
+
+
+#To Run:
+
+Serve files from a local server in order for json to be fetched with angular $http.
+
+e.g.
+
+```
+cd to/location/of/UIDev-substrate
+python -m SimpleHTTPServer 8080
+```
+
+Then in browser go to localhost:8080 and see result
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..5dd5298
--- /dev/null
+++ b/index.html
@@ -0,0 +1,31 @@
+
+
+
+ Photo Gallery
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/controllers/appController.js b/src/controllers/appController.js
new file mode 100644
index 0000000..434e75d
--- /dev/null
+++ b/src/controllers/appController.js
@@ -0,0 +1,11 @@
+galleryApp.controller('appCtrl', function ($http) {
+ var ctrl = this;
+ this.data = [];
+ $http.get('gallery.json')
+ .success(function(data) {
+ ctrl.data = data;
+ })
+ .error(function(error) {
+ console.error(error);
+ });
+});
\ No newline at end of file
diff --git a/src/directives/gallery/gallery.css b/src/directives/gallery/gallery.css
new file mode 100644
index 0000000..d74bfac
--- /dev/null
+++ b/src/directives/gallery/gallery.css
@@ -0,0 +1,73 @@
+/*organized alphabetically where it made sense*/
+.gallery {
+ position: relative;
+}
+.gallery-title {
+ text-align: center;
+}
+.gallery-navs {
+ position: absolute;
+ top: 12em;
+ width: 100%;
+ z-index: 1000;
+}
+.gallery-nav {
+ cursor: pointer;
+ display: inline-block;
+ font-size: 25px;
+ font-weight: bold;
+ height: 100%;
+ width: 20px;
+}
+.gallery-nav.disabled {
+ color: #aaa;
+ cursor: not-allowed;
+}
+
+.main.photo {
+ width: 100%
+}
+.photo {
+ display: inline-block;
+ text-align: center;
+}
+.photo .title {
+ min-height: 19px;
+}
+.photo img {
+ max-width: 248px;
+ max-height: 240px;
+}
+.photo.peripheral {
+ display: none;
+ overflow: hidden;
+ opacity: 0.5;
+}
+.photo.peripheral img{
+ max-width: 240px;
+ max-height: 180px;
+}
+@media (min-width: 768px) {
+ .main img {
+ max-width: 450px;
+ max-height: 310px;
+ }
+}
+@media (min-width: 992px) {
+ .main.photo.col-xs-6 {
+ width: 50%;
+ }
+ .photo.peripheral {
+ display: inline-block;
+ }
+ .photo.peripheral img {
+ max-width: 205px;
+ max-height: 150px;
+ }
+}
+@media (min-width: 1200px) {
+ .photo.peripheral img {
+ max-width: 250px;
+ max-height: 200px;
+ }
+}
\ No newline at end of file
diff --git a/src/directives/gallery/galleryDirective.js b/src/directives/gallery/galleryDirective.js
new file mode 100644
index 0000000..ca9e2a4
--- /dev/null
+++ b/src/directives/gallery/galleryDirective.js
@@ -0,0 +1,83 @@
+
+galleryApp.directive('gallery', function() {
+ return {
+ restrict: 'E',
+ require: ['ngModel', 'gallery'],
+ templateUrl: 'src/directives/gallery/galleryTemplate.html',
+ bindToController: true,
+ scope: {
+ gallery: '=ngModel'
+ },
+ controllerAs: 'galleryCtrl',
+ controller: function() {
+ /*
+ I decided to take the approach of displaying a main image in the gallery
+ with a previous or next photo if available.
+ */
+ this.title = null;
+ this.viewableImages = [];
+ this.previous = [];
+ this.next = [];
+ this.start = 0;
+ this.end = this.start + 1;
+
+ this.setValues = function(gallery) {
+ this.title = gallery['gallery-title'] || 'Untitled Gallery';
+ this.gallery = gallery;
+ if (gallery.photos) {
+ this.setPhotos(gallery.photos);
+ }
+ };
+
+ // This is where the majority of the logic for the gallery takes place.
+ // using arrays for viewableImages, previous, and next allows future me to
+ // display multiple items rather than just one per array.
+ this.setPhotos = function(photos) {
+ if (photos[this.start]) {
+ this.viewableImages = photos.slice(this.start, this.end);
+ }
+
+ if (photos[this.start - 1]) {
+ this.previous = photos.slice(this.start - 1, this.start);
+ } else {
+ this.previous = [];
+ }
+ if (photos[this.end + 1]) {
+ this.next = photos.slice(this.end, this.end + 1);
+ } else if(photos[this.end]) {
+ this.next = photos.slice(this.end);
+ } else {
+ this.next = [];
+ }
+ };
+
+ this.viewPrevious = function() {
+ if (this.start > 0) {
+ this.start--;
+ this.end = this.start + 1;
+ }
+
+ this.setPhotos(this.gallery.photos);
+ };
+
+ this.viewNext = function() {
+ if (this.end < this.gallery.photos.length) {
+ this.start++;
+ this.end = this.start + 1;
+ }
+
+ this.setPhotos(this.gallery.photos);
+ };
+ },
+ link: function(scope, el, attrs, ctrls) {
+ var ngModel = ctrls[0];
+ var galleryCtrl = ctrls[1];
+
+ // allows the gallery model of the galleryCtrl to be set after value is fetched
+ // ngModelController provides a nice way to accomplish this.
+ ngModel.$render = function() {
+ galleryCtrl.setValues(ngModel.$viewValue);
+ }
+ }
+ }
+})
\ No newline at end of file
diff --git a/src/directives/gallery/galleryTemplate.html b/src/directives/gallery/galleryTemplate.html
new file mode 100644
index 0000000..3440ab8
--- /dev/null
+++ b/src/directives/gallery/galleryTemplate.html
@@ -0,0 +1,29 @@
+
+
+
{{galleryCtrl.title}}
+
+
+
+
+
+
+
+
+
+
+
+
{{photo.title || 'Untitled'}}
+
+
+
+ {{photo.attribution}}
+
+
{{photo.description}}
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..af1720d
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1 @@
+var galleryApp = angular.module('galleryApp', []);
\ No newline at end of file