All gifs

diff --git a/public/script.js b/public/script.js
index e177204d4f5154f08a1d6125670b961df8c523f1..f0967d587085675d2d2c3991cffa4d11651ca5ed 100644 (file)
--- a/public/script.js
+++ b/public/script.js
@@ -27,19 +27,28 @@ $(document).ready(function() {
 
         //console.log(thumbs_url);
 
-        $.getJSON('/proxy/?url=' + thumbs_url, function(data) {
+        $.getJSON('/thumbs/?url=' + thumbs_url, function(data) {
+
+          var destElem = '#subcontent .container';
 
           console.log(data);
-          // var items = [];
+          var items = [];
+
+          $('<div/>', {
+            'class' : 'desc',
+            html : '<a target="_blank" href="' + data.url + '"> ' + data.url + ' </a>'
+          }).appendTo(destElem);
+
+          $('<ul/>', {
+            'class': 'thumbs',
+            html: ""
+          }).appendTo(destElem);
 
-          // $.each(data, function(key, val) {
-          //   items.push('<li id="' + key + '">' + val + '</li>');
-          // });
+          $.each(data.links, function(key, thumb) {
+            $('<li><a target="_blank" href="'+thumb.url+'"><img src="' + thumb.img + '"></a></li>')
+              .appendTo('#subcontent .container ul.thumbs')
+          });
 
-          // $('<ul/>', {
-          //   'class': 'my-new-list',
-          //   html: items.join('')
-          // }).appendTo('body');
         });
 
         // $.load("/proxy/?url=" + thumbs_url + ' div.box div ', function(response, status, xhr) {

diff --git a/public/style.css b/public/style.css
index f77e85a0c60e47de13f89c4d20e12fa77da48c90..c29ecf1df92d1b88686fe10ac529b7e76b7f4390 100644 (file)
--- a/public/style.css
+++ b/public/style.css
@@ -12,6 +12,9 @@ ul, li {
     padding:0;
     margin:0;
 }
+a {
+    color:#ff0;
+}
 ul.thumbs li {
     margin:5px;
     display:inline-block;
@@ -25,7 +28,7 @@ ul.thumbs li img {
     background:rgba(0,0,0,0.5);
     width:100%;
     height:100%;
-    position:absolute;
+    position:fixed;
     top:0;
     left:0;
     z-index: 100;
@@ -33,15 +36,21 @@ ul.thumbs li img {
 }
 
 #subcontent {
-    position:absolute;
+    position:fixed;
     z-index:200;
     display:none;
     left: 50%;
+    top:20px;
+    width:75%;
 }
 #subcontent .container {
     position: relative;
     left: -50%;
-    background:#f0f;
-    width:500px;
-    height:500px;
+    background:#444;
+    width:100%;
+    text-align:center;
+}
+#subcontent .container li {
+    display:inline-block;
+    margin:5px;
 }

diff --git a/server_gifs.js b/server_gifs.js
index c0e4895e2b663b3f9aa1f57cd56de74619cf67e7..12835e97da7d806f7527d08d7d9fe3c29167269d 100644 (file)
--- a/server_gifs.js
+++ b/server_gifs.js
@@ -17,21 +17,27 @@ app.get("/", function(req, res) {
   var count = 10;
   for( var i = 0; i < prelinger.clips.length; i++) {
 
-    count--;
-    if (count == 0)
-      break;
+    // count--;
+    // if (count == 0)
+    //   break;
 
     var clip = prelinger.clips[i];
     var t = clip.thumbnail_filename;
     var turl = clip.thumbnails_url;
     var url = clip.url;
-    out.push([
-      '<li id="'+ clip.id +'" data-thumbs-url="' + turl + '">',
-      '<a href="#">',
-      '<img src="prelinger_static/' + t + '">',
-      '</a>',
-      '</li>'].join("")
-      );
+
+    var ext = t.split('.')[1];
+
+
+    if (ext == 'gif') {
+      out.push([
+        '<li id="'+ clip.id +'" data-thumbs-url="' + turl + '">',
+        '<a href="#">',
+        '<img src="prelinger_static/' + t + '">',
+        '</a>',
+        '</li>'].join("")
+        );
+    }
 
   }
   out.push('</ul>');
@@ -48,7 +54,7 @@ app.get("/", function(req, res) {
 
 
 // url proxy
-app.get("/proxy/", function(req, res) {
+app.get("/thumbs/", function(req, res) {
   jsdom.env({
     html : req.query["url"],
     src : [jquery],
@@ -67,34 +73,7 @@ app.get("/proxy/", function(req, res) {
         "links" : thumbs
       }));
     }
-    // function (errors, window) {
-
-    //   //console.log();
-
-    //   //var $ = window.$;
-
-    //   window.$.each("div.box div a", function(key, val) {
-    //     console.log(val);
-    //   })
-
-    //   var thumbs = window.$("div.box div a img").attr('src');
-
-    //   // console.log(thumbs);
-
-    //   res.end(JSON.stringify({
-    //     "test" : "test",
-    //     "thumbs" : ""
-    //   }));
-    //   //console.log("there have been", window.$("a").length, "nodejs releases!");
-    // }
   });
-
-  // request(req.query["url"], function (error, response, body) {
-  // if (!error && response.statusCode == 200) {
-  //   jsdom
-  //   res.end(body);
-  // }
-  // })
 })