changed to images with sources

evanw · Jun 14, 2011 · 0efd0f6 · 0efd0f6
1 parent de13631
commit 0efd0f6
Show file tree

Hide file tree

Showing 18 changed files with 36 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,3 @@
-![](https://github.com/evanw/webgl-filter/raw/master/filters.png)
-
 # WebGL Filter
 
 ### [View Live Demo](http://evanw.github.com/webgl-filter/)
@@ -9,3 +7,7 @@ This is an image editor written using WebGL that allows you to transform your im
 # Running
 
 While you can just open `www/index.html`, you won't be able to save because of the security protection on `file://` URLs. Instead, run `cd www && python -m SimpleHTTPServer` and visit `http://localhost:8000`.
+
+# Screenshot
+
+![](https://github.com/evanw/webgl-filter/raw/master/screenshot.png)
diff --git a/filters.png b/filters.png
diff --git a/screenshot.png b/screenshot.png
diff --git a/www/samples/Bryce.jpg b/www/samples/Bryce.jpg
diff --git a/www/samples/Copenhagen.jpg b/www/samples/Copenhagen.jpg
diff --git a/www/samples/Flowers.jpg b/www/samples/Flowers.jpg
diff --git a/www/samples/Wolf.jpg b/www/samples/Wolf.jpg
diff --git a/www/samples/cat.jpg b/www/samples/cat.jpg
diff --git a/www/samples/face.jpg b/www/samples/face.jpg
diff --git a/www/samples/greyhound.jpg b/www/samples/greyhound.jpg
diff --git a/www/samples/leaf.jpg b/www/samples/leaf.jpg
diff --git a/www/samples/image.jpg → www/samples/mountain.jpg b/www/samples/image.jpg → www/samples/mountain.jpg
diff --git a/www/samples/orange.jpg b/www/samples/orange.jpg
diff --git a/www/samples/perspective.jpg b/www/samples/perspective.jpg
diff --git a/www/samples/smoke.jpg b/www/samples/smoke.jpg
diff --git a/www/samples/sunset.jpg b/www/samples/sunset.jpg
diff --git a/www/script.js b/www/script.js
@@ -189,14 +189,25 @@ $(window).load(function() {
 
     // Hook up toolbar buttons
     $('#load').click(function() {
-        $('#dialog').html('<div class="contents">Pick one of the sample images below or upload an image of your own:<br><br>' +
+        $('#dialog').html('<div class="contents">Pick one of the sample images below or upload an image of your own:<div class="images">' +
-            '<img class="loader" src="samples/orange.jpg" height="100">' +
+            '<img class="loader" src="samples/mountain.jpg" height="100">' +
-            '<img class="loader" src="samples/image.jpg" height="100">' +
+            '<img class="loader" src="samples/smoke.jpg" height="100">' +
-            '<img class="loader" src="samples/Wolf.jpg" height="100">' +
+            '<img class="loader" src="samples/face.jpg" height="100">' +
-            '<img class="loader" src="samples/Flowers.jpg" height="100">' +
+            '<img class="loader" src="samples/cat.jpg" height="100">' +
-            '<img class="loader" src="samples/Bryce.jpg" height="100">' +
+            '<img class="loader" src="samples/greyhound.jpg" height="100">' +
-            '<img class="loader" src="samples/Copenhagen.jpg" height="100">' +
+            '<img class="loader" src="samples/sunset.jpg" height="100">' +
-            '</div>' +
+            '<img class="loader" src="samples/leaf.jpg" height="100">' +
+            '<img class="loader" src="samples/perspective.jpg" height="100">' +
+            '</div><div class="credits">Flickr image credits in order: ' +
+            '<a href="http://www.flickr.com/photos/matthigh/2125630879/">matthigh</a>, ' +
+            '<a href="http://www.flickr.com/photos/delosj/5816379127/">delosj</a>, ' +
+            '<a href="http://www.flickr.com/photos/stuckincustoms/219537913/">stuckincustoms</a>, ' +
+            '<a href="http://www.flickr.com/photos/pasma/580401331/">pasma</a>, ' +
+            '<a href="http://www.flickr.com/photos/delosj/5546225759/">delosj</a>, ' +
+            '<a href="http://www.flickr.com/photos/seriousbri/3736154699/">seriousbri</a>, ' +
+            '<a href="http://www.flickr.com/photos/melisande-origami/157818928/">melisande-origami</a>, and ' +
+            '<a href="http://www.flickr.com/photos/stuckincustoms/4669163231/">stuckincustoms</a>' +
+            '</div></div>' +
             '<div class="button"><input type="file" class="upload">Upload File...</div>' +
             '<div class="button closedialog">Cancel</div>');
         showDialog();
@@ -227,7 +238,7 @@ $(window).load(function() {
     });
 
     // Start loading the first image
-    loadImage('samples/image.jpg');
+    loadImage('samples/mountain.jpg');
 });
 
 ////////////////////////////////////////////////////////////////////////////////

diff --git a/www/style.css b/www/style.css
@@ -225,8 +225,8 @@ body {
     position: absolute;
     left: 50%;
     top: 0;
-    width: 500px;
+    width: 650px;
-    margin-left: -250px;
+    margin-left: -325px;
     padding: 20px;
     background: #32302D;
     border: 1px solid black;
@@ -239,6 +239,16 @@ body {
     line-height: 16px;
 }
 
+#dialog .contents .images {
+    padding: 15px 0 8px 0;
+}
+
+#dialog .contents .credits, #dialog .contents .credits a {
+    font-style: italic;
+    font-size: 10px;
+    color: #777;
+}
+
 #dialog .contents img {
     margin: 0 7px 7px 0;
     border: 1px solid black;