uniqname · lsantsan · Sep 11, 2014
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+/HTML5Application/nbproject/private/
diff --git a/HTML5Application/nbproject/project.properties b/HTML5Application/nbproject/project.properties
@@ -0,0 +1,8 @@
+auxiliary.org-netbeans-modules-web-clientproject-api.js_2e_libs_2e_folder=js/libs
+config.folder=${file.reference.HTML5Application-config}
+file.reference.HTML5Application-config=config
+file.reference.HTML5Application-public_html=public_html
+file.reference.HTML5Application-test=test
+files.encoding=UTF-8
+site.root.folder=${file.reference.HTML5Application-public_html}
+test.folder=${file.reference.HTML5Application-test}
diff --git a/HTML5Application/nbproject/project.xml b/HTML5Application/nbproject/project.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://www.netbeans.org/ns/project/1">
+    <type>org.netbeans.modules.web.clientproject</type>
+    <configuration>
+        <data xmlns="http://www.netbeans.org/ns/clientside-project/1">
+            <name>HTML5Application</name>
+        </data>
+    </configuration>
+</project>
diff --git a/HTML5Application/public_html/gallery.json b/HTML5Application/public_html/gallery.json
@@ -0,0 +1,40 @@
+{
+    "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": "The 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": "The 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": "The Fox",
+        "src": " img/fox.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": "The 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": "The Chimpanzee",
+        "src": " img/chimps.jpeg"
+    }, {
+        "attribution": "Creative Commons",
+        "title": "The African elephant",
+        "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": "The Bird",
+        "src": " img/bird.jpeg"
+    }]
+}
diff --git a/HTML5Application/public_html/img/African_elephant.jpeg b/HTML5Application/public_html/img/African_elephant.jpeg
diff --git a/HTML5Application/public_html/img/Northern_Baikal_Russia.jpeg b/HTML5Application/public_html/img/Northern_Baikal_Russia.jpeg
diff --git a/HTML5Application/public_html/img/bird.jpeg b/HTML5Application/public_html/img/bird.jpeg
diff --git a/HTML5Application/public_html/img/chimps.jpeg b/HTML5Application/public_html/img/chimps.jpeg
diff --git a/HTML5Application/public_html/img/fox.jpeg b/HTML5Application/public_html/img/fox.jpeg
diff --git a/HTML5Application/public_html/img/otter.jpeg b/HTML5Application/public_html/img/otter.jpeg
diff --git a/HTML5Application/public_html/img/snail.jpeg b/HTML5Application/public_html/img/snail.jpeg
diff --git a/HTML5Application/public_html/img/taranchula.jpeg b/HTML5Application/public_html/img/taranchula.jpeg
diff --git a/HTML5Application/public_html/index.html b/HTML5Application/public_html/index.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Image Gallery</title>
+        <!--Style definitions-->
+        <style type="text/css">
+            body {
+                color: #665544;
+                background-color: #d4d0c6;                
+                font-family: Georgia, "Times New Roman", serif;
+                text-align: center;}
+            .wrapper { /* Frame for the whole screen*/
+                width: 80%;
+                margin:  auto; }             
+            .entry {   /*Main container of images*/
+                width: 220px;;
+                float: left;
+                margin: 10px;
+                height: auto;                
+            }
+
+            figure {  /*Frame for images */
+                display: block;
+                width: 202px;
+                height: 170px;
+                background-color: #e7e3d8;
+                padding: 9px;
+                text-align: left;}
+
+            figure img { /*Component thas has an image*/
+                width: 200px;
+                height: 150px;
+                border: 1px solid #d6d6d6;}
+
+            figcaption { /*Image´s label*/
+                padding-left: 20px;
+                background-repeat: no-repeat;}
+
+            img.ri /*Component responsible for making image larger considering the screen size*/
+            {
+                position: absolute;
+                max-width: 80%;
+                top: 10%;
+                left: 10%;
+                border-radius: 3px;
+                box-shadow: 0 3px 6px rgba(0,0,0,0.9);
+            }
+            img.ri:empty /*Component responsible for making image larger considering the screen size*/
+            {
+                top: 50%;
+                left: 50%;
+                -webkit-transform: translate(-50%, -50%);
+                -moz-transform: translate(-50%, -50%);
+                -ms-transform: translate(-50%, -50%);
+                -o-transform: translate(-50%, -50%);
+                transform: translate(-50%, -50%);
+            }
+
+            @media screen and (orientation: portrait) {  /*Component responsible for keeping image in different screen position*/     
+                img.ri{
+                    max-width: 70%;
+                }
+            }
+
+            @media screen and (orientation: landscape) {   /*Component responsible for keeping image in different screen position*/                 
+                img.ri{
+                    max-height: 70%;
+                }
+
+            </style>
+
+
+            <script type="text/javascript">
+                //Function responsible for amplyfing an image when user clicks on it 
+                function showLargeImage(imgSRC) {
+                    document.getElementById('largeImg').src = imgSRC; //Set src of the image
+                    document.getElementById('largeImgPanel').style.visibility = 'visible'; //Makes it visible
+                }
+                //Function responsible for hidding a large image
+                function hideIt(obj) {
+                    obj.style.visibility = 'hidden'; //Set image invisible
+                }
+
+            </script>
+        </head>        
+
+        <body>
+            <div class="wrapper" id="main">
+                <header>
+                    <h1>Famous Creatures</h1>
+                </header>
+                <div id="placeholder" >
+                    <!--The script below is responsible for accessing the JSON file and populating image frames-->
+                    <!--The logic of this piece of code is to implement the following structure as many times as the number of pictures in the JSON file:
+                        <div class="entry">
+                        <figure>
+                            <img style="cursor:pointer" src="imageSRCfromJSON" onclick="showLargeImage('imageSRCfromJSON');" />
+                            <figcaption>titleFromJSON</figcaption>
+                        </figure>
+                        </div>
+                    -->
+                    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+                    <script>
+                var imgBegin = "<div class=\"entry\"><figure><img style=\"cursor:pointer\" src=\"";
+                var imgClick = "\" onclick=\"showLargeImage('";
+                var imgEnd = "');\"/>";
+                //Looping to read JSON file
+                $.getJSON('gallery.json', function(gallery) {
+
+                    var galleryEntry = "";
+                    for (var i in gallery.photos) {
+                        galleryEntry += imgBegin + gallery.photos[i].src + imgClick + gallery.photos[i].src + imgEnd
+                                + "<figcaption>" + gallery.photos[i].title
+                                + "</figcaption> </figure></div>";
+                        document.getElementById("placeholder").innerHTML = galleryEntry; //Add the HTML structure found in the varible "galleryEntry" into the HTML body
+                    }
+                });</script>  
+                </div>
+
+                <!--Component responsible for hosting the large image that shows up when user clicks on the small image -->
+                <div id="largeImgPanel" style="cursor:pointer" onclick="hideIt(this);" > <!--When user clicks on the large image, "hideIt" closes it  -->
+                    <img id="largeImg" class="ri" alt=""/> 
+                </div>
+            </div>
+        </body>
+    </html>
diff --git a/gallery.json b/gallery.json
@@ -4,13 +4,13 @@
         "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",
+        "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",
+        "title": "Snail",
         "src": " img/snail.jpeg "
     }, {
         "attribution": "Amber Crockett",
@@ -21,7 +21,8 @@
     }, {
         "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"
+        "title": "Northern Baikal",
+		"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",