Album: Add justified gallery

Search Flickr by geocode
danactive · Sep 15, 2014 · 6752138 · 6752138
1 parent 3b43cd5
commit 6752138
Show file tree

Hide file tree

Showing 9 changed files with 847 additions and 34 deletions.
diff --git a/admin/index.htm b/admin/index.htm
@@ -8,4 +8,5 @@ <h3>Harness</h3>
 <ul>
 	<li><a href="map.htm">Slippy map cycle through pins one at a time</a></li>
 	<li><a href="albumXml.htm">Convert album XML to JSON</a></li>
+	<li><a href="../justifiedGallery.htm?lat=49.25&amp;lon=-123.1">Flickr fully justified gallery</a></li>
 </ul>
diff --git a/js/credentials.js b/js/credentials.js
@@ -0,0 +1,6 @@
+var credentials = {
+	"flickr": {
+		"apiKey": '671aab1520e2cb69e08dd36a5f40213b',
+		"secret": '99a4607019e61826'
+	}
+};
diff --git a/justifiedGallery.htm b/justifiedGallery.htm
@@ -0,0 +1,56 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>justifiedGallery</title>
+    <link rel="stylesheet" href="lib/jquery.justifiedGallery/justifiedGallery.min.css" />
+</head>
+
+<body>
+    <div id="galleryBox"></div>
+
+    <script src="js/global.js"></script>
+    <script src="js/credentials.js"></script>
+    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+    <script src="lib/jquery.justifiedGallery/justifiedGallery.js"></script>
+    <script>
+        var displayPhotos = function (response) {
+                var origPath = "",
+                    $galleryBox = jQuery("#galleryBox"),
+                    html = "",
+                    thumbPath = "";
+
+                jQuery.each(response.photos.photo, function (x, photo) {
+                    origPath = "https://farm" + photo.farm + ".staticflickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_b.jpg";
+                    thumbPath = "https://farm" + photo.farm + ".staticflickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_t.jpg";
+                    html = '<a href="' + origPath + '"><img alt="' + photo.title + '" src="' + thumbPath + '"></a>';
+                    $galleryBox.append(html);
+                });
+                $galleryBox.justifiedGallery();
+            },
+            flickrArgs = {
+                "method": 'flickr.photos.search',
+                "api_key": credentials.flickr.apiKey,
+                "format": 'json'
+            },
+            flickrUrl = "https://api.flickr.com/services/rest/",
+            getPhotos = function (lat, lon) {
+                if (lat === undefined || lon === undefined) {
+                    return;
+                }
+                flickrArgs.lat = lat;
+                flickrArgs.lon = lon;
+
+                $.ajax({
+                    "url": flickrUrl,
+                    "data": flickrArgs,
+                    "dataType": 'jsonp', // tell jQuery our expected response format JSON with padding
+                    "jsonpCallback": "jsonFlickrApi", //execute Flickr function that contains the response JSON
+                    "success": displayPhotos
+                });
+            },
+            qs = util.queryObj();
+        getPhotos(qs["lat"], qs["lon"]);
+    </script>
+</body>
+</html>
diff --git a/lib/jquery.justifiedGallery/justifiedGallery.css b/lib/jquery.justifiedGallery/justifiedGallery.css
@@ -0,0 +1,150 @@
+/*!
+ * Justified Gallery - v3.2.0
+ * http://miromannino.com/projects/justified-gallery/
+ * Copyright (c) 2014 Miro Mannino
+ * Licensed under the MIT license.
+ */
+@-webkit-keyframes justified-gallery-show-caption-animation {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.7;
+  }
+}
+@-moz-keyframes justified-gallery-show-caption-animation {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.7;
+  }
+}
+@-o-keyframes justified-gallery-show-caption-animation {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.7;
+  }
+}
+@keyframes justified-gallery-show-caption-animation {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.7;
+  }
+}
+@-webkit-keyframes justified-gallery-show-entry-animation {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1.0;
+  }
+}
+@-moz-keyframes justified-gallery-show-entry-animation {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1.0;
+  }
+}
+@-o-keyframes justified-gallery-show-entry-animation {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1.0;
+  }
+}
+@keyframes justified-gallery-show-entry-animation {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1.0;
+  }
+}
+.justified-gallery {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.justified-gallery > a,
+.justified-gallery > div {
+  position: absolute;
+  display: inline-block;
+  overflow: hidden;
+  opacity: 0;
+  filter: alpha(opacity=0);
+  /* IE8 or Earlier */
+}
+.justified-gallery > a > img,
+.justified-gallery > div > img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+.justified-gallery > a > .caption,
+.justified-gallery > div > .caption {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  padding: 5px;
+  background-color: #000000;
+  left: 0;
+  right: 0;
+  margin: 0;
+  color: white;
+  font-size: 12px;
+  font-weight: 300;
+  font-family: sans-serif;
+}
+.justified-gallery > a > .caption.caption-visible,
+.justified-gallery > div > .caption.caption-visible {
+  display: initial;
+  opacity: 0.7;
+  filter: "alpha(opacity=70)";
+  /* IE8 or Earlier */
+  -webkit-animation: justified-gallery-show-caption-animation 500ms 0 ease;
+  -moz-animation: justified-gallery-show-caption-animation 500ms 0 ease;
+  -ms-animation: justified-gallery-show-caption-animation 500ms 0 ease;
+}
+.justified-gallery > .entry-visible {
+  opacity: 1.0;
+  filter: alpha(opacity=100);
+  /* IE8 or Earlier */
+  -webkit-animation: justified-gallery-show-entry-animation 300ms 0 ease;
+  -moz-animation: justified-gallery-show-entry-animation 300ms 0 ease;
+  -ms-animation: justified-gallery-show-entry-animation 300ms 0 ease;
+}
+.justified-gallery > .spinner {
+  position: absolute;
+  bottom: 0;
+  margin-left: -24px;
+  padding: 10px 0 10px 0;
+  left: 50%;
+  opacity: initial;
+  filter: initial;
+  overflow: initial;
+}
+.justified-gallery > .spinner > span {
+  display: inline-block;
+  opacity: 0;
+  filter: alpha(opacity=0);
+  /* IE8 or Earlier */
+  width: 8px;
+  height: 8px;
+  margin: 0 4px 0 4px;
+  background-color: #000;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}