diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9f11b75 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea/ diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..68a9f86 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/gallery.html b/gallery.html new file mode 100644 index 0000000..c23d7c6 --- /dev/null +++ b/gallery.html @@ -0,0 +1,18 @@ + + + + Image Gallery + + + + + + +
+ + +
+ + + + \ No newline at end of file diff --git a/image-gallery.html b/image-gallery.html new file mode 100644 index 0000000..c573e10 --- /dev/null +++ b/image-gallery.html @@ -0,0 +1,19 @@ +
+

Gallery Title: {{gc.album["gallery-title"]}}

+ + +

Title: {{gc.current.title}}

+

Attribution: {{gc.current.attribution}}

+

Description: {{gc.current.description}}

+ {{gc.current.description}} +
+
+
+ +
\ No newline at end of file diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..15d5290 --- /dev/null +++ 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. +* +* +*/ \ No newline at end of file