From 83d95273abef4241208c05e668dcd348951307ba Mon Sep 17 00:00:00 2001 From: xZarisx Date: Tue, 10 Mar 2015 13:16:27 -0600 Subject: [PATCH 1/9] Added 2 Files Add the index for viewing the gallery and the JavaScript that will be my work horse. --- imageGallery.js | 0 index.html | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 imageGallery.js create mode 100644 index.html diff --git a/imageGallery.js b/imageGallery.js new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html new file mode 100644 index 0000000..e69de29 From fe4050f03c303e04641a4f6e6b35483154482eb2 Mon Sep 17 00:00:00 2001 From: xzarisx Date: Tue, 10 Mar 2015 20:10:02 -0600 Subject: [PATCH 2/9] Placed JSON in JS I know that you can import and parse a JSON file but because the browser security issues I decided to put the JSON info into my JavaScript. --- imageGallery.js | 45 +++++++++++++++++++++++++++++++++++++++++++++ index.html | 12 ++++++++++++ 2 files changed, 57 insertions(+) diff --git a/imageGallery.js b/imageGallery.js index e69de29..efa78f0 100644 --- a/imageGallery.js +++ b/imageGallery.js @@ -0,0 +1,45 @@ +/*I know that you can import and parse a JSON file but because the browser security issues I decided to put the JSON info into my JavaScript.*/ +var gallery = { + "gallery-title": "Famous Creatures", + "photos": [{ + "attribution": "Carter Brown", + "creation-data": "2009-01-08T19:20:30+01:00", + "description": "Annoyed at the length of the photo shoot, this otter diva barks at her assistant for another cuppachino.", + "title": "otter", + "src": " img/otter.jpeg" + }, { + "attribution": "Harrision K. B.", + "creation-data": "2011-10-28T16:43:00+04:00", + "description": "Considered a star in the snail community, this little guy can be seen in two shots in Pixar's 'A Bug's Life' and acheived child star status with his premiering role in 'Honey I Shrunk the Kids'. ", + "title": "snail", + "src": " img/snail.jpeg " + }, { + "attribution": "Amber Crockett", + "creation-data": "2007-07-07T13:00:00+01:00", + "description": "In a shameful and desperate attempt for attention, this granddaughter of the once great fox of Fox in Socks fame, claims to have been the inspiration behind the ears on Josie and her Pussycats. Aside from the obvious problem of the band's ears being feline in nature and foxes being of the canine varity, there is also the anachronistic problems, Josie predating this young fox by several decades... Just shameful!", + "title": "Fox", + "src": " img/fox.jpeg" + }, { + "attribution": "Creative Commons", + "description": "Widely roumored to be the site of the elusive Durmstrang school for wizards, made famous (infamous?) in the works of renouned biographer J.K. Rowling's epic seven part expose on one Harry Potter, this lake in northern Russia Baikal region has long been known for it's magical properites and unexplained evnets.", + "src": " img/Northern_Baikal_Russia.jpeg" + }, { + "description": "This gentle giant of the land-based arachnids is a common house pet for a legion of adolesant and pre-adolesant boys.", + "title": "Taranchula", + "src": " img/taranchula.jpeg" + }, { + "attribution": "Creative Commons", + "description": "A plesant picnic in the grass adds some extra color to another beautiful day on the preserve", + "title": "Chimpanzes", + "src": " img/chimps.jpeg" + }, { + "attribution": "Creative Commons", + "title": "African elephants", + "src": " img/African_elephant.jpeg" + }, { + "attribution": "Creative Commons", + "description": "A mysogonist bird makes cat calls at a passing female on his lunch break. The bird was later reported to H.R. and his union rep, but was merely given a slap on the wrist. When questioned about the diminutive punishment, the H.R. rep stated unapologetically, 'birds will be birds.' Of no comfort to the passing female as this was the thrid time this week she had been whistled at in a tone denoting that the male is available for mating", + "title": "Bird is the word", + "src": " img/bird.jpeg" + }] +}; \ No newline at end of file diff --git a/index.html b/index.html index e69de29..1f3c66c 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,12 @@ + + + + Image Gallery + + + +
+ +
+ + From 709fdaf1ff39cbe9d42cede3216c9567333f521c Mon Sep 17 00:00:00 2001 From: xZarisx Date: Wed, 11 Mar 2015 16:13:03 -0600 Subject: [PATCH 3/9] Add for loop --- imageGallery.js | 57 +++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 13 +++++++++++ 2 files changed, 70 insertions(+) diff --git a/imageGallery.js b/imageGallery.js index e69de29..e4a1a96 100644 --- a/imageGallery.js +++ b/imageGallery.js @@ -0,0 +1,57 @@ +/*First we have to get the JSON so that we can parse through it. Instead of doing this I decided it would be easier to just make the JSON a local variable. */ +function initialize(){ + generateGalleryList(); +} +var gallery = { + "gallery-title": "Famous Creatures", + "photos": [{ + "attribution": "Carter Brown", + "creation-data": "2009-01-08T19:20:30+01:00", + "description": "Annoyed at the length of the photo shoot, this otter diva barks at her assistant for another cuppachino.", + "title": "otter", + "src": " img/otter.jpeg" + }, { + "attribution": "Harrision K. B.", + "creation-data": "2011-10-28T16:43:00+04:00", + "description": "Considered a star in the snail community, this little guy can be seen in two shots in Pixar's 'A Bug's Life' and acheived child star status with his premiering role in 'Honey I Shrunk the Kids'. ", + "title": "snail", + "src": " img/snail.jpeg " + }, { + "attribution": "Amber Crockett", + "creation-data": "2007-07-07T13:00:00+01:00", + "description": "In a shameful and desperate attempt for attention, this granddaughter of the once great fox of Fox in Socks fame, claims to have been the inspiration behind the ears on Josie and her Pussycats. Aside from the obvious problem of the band's ears being feline in nature and foxes being of the canine varity, there is also the anachronistic problems, Josie predating this young fox by several decades... Just shameful!", + "title": "Fox", + "src": " img/fox.jpeg" + }, { + "attribution": "Creative Commons", + "description": "Widely roumored to be the site of the elusive Durmstrang school for wizards, made famous (infamous?) in the works of renouned biographer J.K. Rowling's epic seven part expose on one Harry Potter, this lake in northern Russia Baikal region has long been known for it's magical properites and unexplained evnets.", + "src": " img/Northern_Baikal_Russia.jpeg" + }, { + "description": "This gentle giant of the land-based arachnids is a common house pet for a legion of adolesant and pre-adolesant boys.", + "title": "Taranchula", + "src": " img/taranchula.jpeg" + }, { + "attribution": "Creative Commons", + "description": "A plesant picnic in the grass adds some extra color to another beautiful day on the preserve", + "title": "Chimpanzes", + "src": " img/chimps.jpeg" + }, { + "attribution": "Creative Commons", + "title": "African elephants", + "src": " img/African_elephant.jpeg" + }, { + "attribution": "Creative Commons", + "description": "A mysogonist bird makes cat calls at a passing female on his lunch break. The bird was later reported to H.R. and his union rep, but was merely given a slap on the wrist. When questioned about the diminutive punishment, the H.R. rep stated unapologetically, 'birds will be birds.' Of no comfort to the passing female as this was the thrid time this week she had been whistled at in a tone denoting that the male is available for mating", + "title": "Bird is the word", + "src": " img/bird.jpeg" + }] +}; +/*I have two designs that I could go with. 1) I could just have the JS generate an img tag for each item in the JSON or 2) I could have it generate one img tag and two buttons that would be used to cycle through the images.*/ +/*Lets start by generating an img tag for each item.*/ +function generateGalleryList(){ + var imgHTML; + for(x = 0; x < gallery.photos.length; x++){ + imgHTML += (""); + } + document.getElementById("galleryList").innerHTML = imgHTML; +} diff --git a/index.html b/index.html index e69de29..96f2971 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,13 @@ + + + + Simple Gallery + + + + +
+
+ + + \ No newline at end of file From 39ed9291afa3c1e29db9e32b563b7a8b361c501c Mon Sep 17 00:00:00 2001 From: xZarisx Date: Wed, 11 Mar 2015 16:19:35 -0600 Subject: [PATCH 4/9] Fixed src index error --- imageGallery.js | 4 ++-- index.html | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/imageGallery.js b/imageGallery.js index e4a1a96..dbf1ad9 100644 --- a/imageGallery.js +++ b/imageGallery.js @@ -49,9 +49,9 @@ var gallery = { /*I have two designs that I could go with. 1) I could just have the JS generate an img tag for each item in the JSON or 2) I could have it generate one img tag and two buttons that would be used to cycle through the images.*/ /*Lets start by generating an img tag for each item.*/ function generateGalleryList(){ - var imgHTML; + var imgHTML = ""; for(x = 0; x < gallery.photos.length; x++){ - imgHTML += (""); + imgHTML += (""); } document.getElementById("galleryList").innerHTML = imgHTML; } diff --git a/index.html b/index.html index 96f2971..cf39cc5 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,10 @@ Simple Gallery + From d55912f71f2b4d589708944983a7eba4d5df7ac0 Mon Sep 17 00:00:00 2001 From: xZarisx Date: Thu, 12 Mar 2015 13:06:28 -0600 Subject: [PATCH 5/9] Converted to Angular added CSS --- imageGallery.js | 25 ++++++++++++------------- index.html | 18 +++++++++++------- style.css | 17 +++++++++++++++++ 3 files changed, 40 insertions(+), 20 deletions(-) create mode 100644 style.css diff --git a/imageGallery.js b/imageGallery.js index dbf1ad9..db2cf8a 100644 --- a/imageGallery.js +++ b/imageGallery.js @@ -1,8 +1,7 @@ /*First we have to get the JSON so that we can parse through it. Instead of doing this I decided it would be easier to just make the JSON a local variable. */ -function initialize(){ - generateGalleryList(); -} -var gallery = { +function currentImgController($scope){ +$scope.imageIndex = 0; +$scope.gallery = { "gallery-title": "Famous Creatures", "photos": [{ "attribution": "Carter Brown", @@ -45,13 +44,13 @@ var gallery = { "title": "Bird is the word", "src": " img/bird.jpeg" }] -}; -/*I have two designs that I could go with. 1) I could just have the JS generate an img tag for each item in the JSON or 2) I could have it generate one img tag and two buttons that would be used to cycle through the images.*/ -/*Lets start by generating an img tag for each item.*/ -function generateGalleryList(){ - var imgHTML = ""; - for(x = 0; x < gallery.photos.length; x++){ - imgHTML += (""); - } - document.getElementById("galleryList").innerHTML = imgHTML; } +} +/*$scope.imgList = ""; + for(x = 0; x < $scope.gallery.photos.length; x++){ + imgList += ("
"); + } +}*/ +/*I have two designs that I could go with. 1) I could just have the JS generate an img tag for each item in the JSON or 2) I could have it generate one img tag and two buttons that would be used to cycle through the images.*/ +/*Lets start by generating an img tag for each item. I'm not sure if this is the best way to do this but it gets the job done.*/ + diff --git a/index.html b/index.html index cf39cc5..a693ea3 100644 --- a/index.html +++ b/index.html @@ -2,15 +2,19 @@ Simple Gallery - - + + + - - + +
+

+
+
+ +
+
diff --git a/style.css b/style.css new file mode 100644 index 0000000..decefac --- /dev/null +++ b/style.css @@ -0,0 +1,17 @@ +.imageContainer{ + width: 100px; + height: 100px; + float: left; + margin: 5px; + overflow: hidden; + border: 1px solid #000; +} +.imageContainer:hover{ + width: 110px; + height: 110px; + margin: 0px; +} +.imageContainer > img{ + max-width: 160%; + margin-left: -20% +} \ No newline at end of file From 956e2c7a3666fbf07792e55d44cd896fe0f8d44a Mon Sep 17 00:00:00 2001 From: xZarisx Date: Thu, 12 Mar 2015 14:05:06 -0600 Subject: [PATCH 6/9] List is now clickable and will change the main image --- imageGallery.js | 1 - index.html | 8 ++++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/imageGallery.js b/imageGallery.js index db2cf8a..e8e2193 100644 --- a/imageGallery.js +++ b/imageGallery.js @@ -1,6 +1,5 @@ /*First we have to get the JSON so that we can parse through it. Instead of doing this I decided it would be easier to just make the JSON a local variable. */ function currentImgController($scope){ -$scope.imageIndex = 0; $scope.gallery = { "gallery-title": "Famous Creatures", "photos": [{ diff --git a/index.html b/index.html index a693ea3..93cf22b 100644 --- a/index.html +++ b/index.html @@ -7,12 +7,12 @@ -
+

- +
-
- +
+
From ae1165f3895cd26f6ff8c2f1ffd81589d600ed9a Mon Sep 17 00:00:00 2001 From: xzarisx Date: Sat, 14 Mar 2015 15:07:51 -0600 Subject: [PATCH 7/9] Made it look and function good --- imageGallery.js | 16 +--------------- index.html | 49 ++++++++++++++++++++++++------------------------- style.css | 15 +++++++++++++++ 3 files changed, 40 insertions(+), 40 deletions(-) diff --git a/imageGallery.js b/imageGallery.js index a8b40f2..32edd72 100644 --- a/imageGallery.js +++ b/imageGallery.js @@ -1,11 +1,7 @@ -<<<<<<< HEAD /*I know that you can import and parse a JSON file but because the browser security issues I decided to put the JSON info into my JavaScript.*/ -var gallery = { -======= /*First we have to get the JSON so that we can parse through it. Instead of doing this I decided it would be easier to just make the JSON a local variable. */ function currentImgController($scope){ $scope.gallery = { ->>>>>>> origin/master "gallery-title": "Famous Creatures", "photos": [{ "attribution": "Carter Brown", @@ -48,17 +44,7 @@ $scope.gallery = { "title": "Bird is the word", "src": " img/bird.jpeg" }] -<<<<<<< HEAD }; -======= } -} -/*$scope.imgList = ""; - for(x = 0; x < $scope.gallery.photos.length; x++){ - imgList += ("
"); - } -}*/ /*I have two designs that I could go with. 1) I could just have the JS generate an img tag for each item in the JSON or 2) I could have it generate one img tag and two buttons that would be used to cycle through the images.*/ -/*Lets start by generating an img tag for each item. I'm not sure if this is the best way to do this but it gets the job done.*/ - ->>>>>>> origin/master +/*Lets start by generating an img tag for each item. I'm not sure if this is the best way to do this but it gets the job done.*/ \ No newline at end of file diff --git a/index.html b/index.html index c5b5e51..71c186f 100644 --- a/index.html +++ b/index.html @@ -1,33 +1,32 @@ -<<<<<<< HEAD - Image Gallery - - - -
- -
- - -======= - Simple Gallery - - + Image Gallery + + + + + + + + -
-

- -
-
- +
+
+
+

{{gallery.photos[imageIndex].title}}

+

By: {{gallery.photos[imageIndex].attribution}}

+

{{gallery.photos[imageIndex].description}}

+
+
+
+
+ +
+
+
-
-
- - ->>>>>>> origin/master + \ No newline at end of file diff --git a/style.css b/style.css index decefac..d31abe1 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,18 @@ +#content{ + max-width: 850px; + margin: 0 auto; +} +#galleryList{ + margin-top: 10px; +} +#currentImageContent{ + height: 350px; + overflow: hidden; +} +#currentImageContainer{ + height: 350px; + overflow: hidden; +} .imageContainer{ width: 100px; height: 100px; From 936fbf96249d2830e66e8e97e85e9f968ee4c22d Mon Sep 17 00:00:00 2001 From: xzarisx Date: Sat, 14 Mar 2015 15:14:26 -0600 Subject: [PATCH 8/9] fixed the width so content fits --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style.css b/style.css index d31abe1..1384ea8 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,5 @@ #content{ - max-width: 850px; + max-width: 880px; margin: 0 auto; } #galleryList{ From 8f2e1ea0a611397c60668c1b2346502e85b46c08 Mon Sep 17 00:00:00 2001 From: xZarisx Date: Mon, 16 Mar 2015 13:35:40 -0600 Subject: [PATCH 9/9] Added alt Text. Made page look better. --- imageGallery.js | 1 + index.html | 11 ++++++----- style.css | 9 ++++++++- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/imageGallery.js b/imageGallery.js index 32edd72..22ac4a3 100644 --- a/imageGallery.js +++ b/imageGallery.js @@ -1,5 +1,6 @@ /*I know that you can import and parse a JSON file but because the browser security issues I decided to put the JSON info into my JavaScript.*/ /*First we have to get the JSON so that we can parse through it. Instead of doing this I decided it would be easier to just make the JSON a local variable. */ + function currentImgController($scope){ $scope.gallery = { "gallery-title": "Famous Creatures", diff --git a/index.html b/index.html index 71c186f..42ee628 100644 --- a/index.html +++ b/index.html @@ -3,22 +3,23 @@ Image Gallery - + +
-
+
-

{{gallery.photos[imageIndex].title}}

-

By: {{gallery.photos[imageIndex].attribution}}

-

{{gallery.photos[imageIndex].description}}

+

{{gallery.photos[imageIndex].title || "No Title"}}

+

By: {{gallery.photos[imageIndex].attribution || "No Author"}}

+

{{gallery.photos[imageIndex].description || "No Description"}}

diff --git a/style.css b/style.css index 1384ea8..955d132 100644 --- a/style.css +++ b/style.css @@ -1,7 +1,14 @@ +body{ + background-color: gray; +} #content{ - max-width: 880px; + max-width: 950px; margin: 0 auto; } +#contentContainer{ + background-color: white; + padding: 20px; +} #galleryList{ margin-top: 10px; }