Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

Random Imgur Pictures

By: a guest on May 25th, 2012  |  syntax: None  |  size: 5.60 KB  |  views: 542  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>random imgur</title>
  5.   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  6.   <script type="text/javascript">
  7.     var Imgur = {
  8.         fetch: function(num) {
  9.             var self=this;
  10.             self.total=num;
  11.             self.done=0;
  12.             self.failures=0;
  13.             self.start=+new Date;
  14.  
  15.             $('#images').empty();
  16.             for (var x = 0; x < num; x++) {
  17.                 self.hunt(function(id) {
  18.                     self.done++;
  19.                     $('#images').prepend("<li><a href='http://imgur.com/" + id + "' target=_blank><img src='http://i.imgur.com/" + id + "s.png' height='200' width='200' /></a></li>");
  20.                     self.update();
  21.                 });
  22.             }
  23.         },
  24.         update: function() {
  25.             var interval=new Date-this.start;
  26.             function speed(v) { return (~~(v/interval*1e5))/100; }
  27.             $('#info').html((this.done<this.total?"Loading.. "+this.done+"/"+this.total+" ("+this.failures+" failures"+") ":"Done. ")+"["+speed(this.failures+this.done)+" req/s - "+speed(this.done)+" img/s]");
  28.         },
  29.  
  30.         hunt: function(cb) {
  31.             var self=this,
  32.                 id = self.random(5),
  33.                 img = new Image;
  34.             self.update();
  35.             img.src = "http://imgur.com/"+id+"s.png";
  36.             img.onload = function() {
  37.                 if (img.width==198 && img.height==160 || img.width==161 && img.height==81) {
  38.                     // assume this is an imgur error image, and retry.
  39.                     fail();
  40.                 } else {
  41.                     cb(id);
  42.                 }
  43.             }
  44.             img.onerror = fail; // no escape.
  45.             function fail() {
  46.                 self.failures++;
  47.                 self.update();
  48.                 self.hunt(cb);
  49.             }
  50.         },
  51.  
  52.         random: function(len) {
  53.             var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
  54.             return len?chars.charAt(~~(Math.random()*chars.length))+this.random(len-1):"";
  55.         }
  56.     };
  57.  
  58.     $(document).ready(function() {
  59.       $('#random').bind('click', function(e) {
  60.           Imgur.fetch(500);
  61.       });
  62.     });
  63.   </script>
  64.  
  65.   <style>
  66. body {
  67.         font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
  68.         font-size: .7em;
  69.         margin: 0;
  70.         padding: 0;
  71. }
  72.  
  73. body, ul, ol, li, p, pre, div, a {
  74.         padding: 0;
  75.         margin: 0;
  76.         list-style: none;
  77.         text-decoration: none;
  78.         color: #333;
  79. }
  80.  
  81. #tabs pre {
  82.     color: #333;
  83. }
  84.  
  85. a {
  86.         outline: none;
  87.         font-weight: bold;
  88.         text-shadow: 0 1px 0 #000;
  89.         cursor: pointer;
  90. }
  91.  
  92. #tabs a {
  93.         text-shadow: 0 1px 0 #999;
  94. }
  95. #tabs #resources a {
  96.         font-size: 1.3em;
  97. }
  98.  
  99. .tCont {
  100.         font-size: 1em;
  101.         font-family: "Monaco", Helvetica, Arial, sans-serif;
  102. }
  103.  
  104. #wrapper {
  105.         overflow: hidden;
  106. }
  107.  
  108. #head,
  109. #triggers,
  110. #actions li,
  111. #triggers li a,
  112. #actions li.active,
  113. #actions li.active a,
  114. #head h1 a {
  115.         background-image: url(../img/mooshell-frame.sprite.png);
  116. }
  117.  
  118. #head {
  119.         background-position: 0 0;
  120.         background-repeat: repeat-x;
  121.         position: relative;
  122.         height: 30px;
  123.         overflow: hidden;
  124. }
  125.  
  126.         #head h1 {
  127.                 float: left;
  128.                 height: 30px;
  129.                 width: 138px;
  130.                 margin: 0 0 0 10px;
  131.         }
  132.        
  133.                 #head h1 a {
  134.                         float: left;
  135.                         height: 30px;
  136.                         width: 138px;
  137.                         background-position: 100% -112px;
  138.                         text-indent: -9999em;
  139.                 }
  140.  
  141. #actions {
  142.         float: right;  
  143. }
  144.  
  145.         #actions li {
  146.                 float: left;
  147.                 height: 30px;
  148.                 background-position: 0 -47px;
  149.                 background-repeat: no-repeat;
  150.         }
  151.        
  152.                 #actions li a {
  153.                         display: block;
  154.                         height: 30px;
  155.                         line-height: 28px;
  156.                         padding: 0 14px;
  157.                         color: #fff;
  158.                 }
  159.                
  160.         #actions li.active {
  161.                 background-position: 0 -173px;
  162.         }
  163.  
  164.                 #actions li.active a {
  165.                         background-position: 100% -173px;
  166.                         color: #333;
  167.                         text-shadow: none;
  168.                        
  169.                 }
  170.  
  171. #triggers {
  172.         float: right;
  173.         padding: 0 4px;
  174.         background-position: 0 -47px;
  175. }
  176.  
  177.         #triggers li {
  178.                 float: left;
  179.                 height: 30px;
  180.                 background-repeat: no-repeat;
  181.         }
  182.  
  183.         #triggers li.tRun a {
  184.                 background-position: 0 -112px;
  185.         }
  186.  
  187.         #triggers li.tEdit a {
  188.                 background-position: -31px -112px;
  189.         }
  190.  
  191.                 #triggers li a {
  192.                         display: block;
  193.                         height: 30px;
  194.                         text-indent: -9000em;
  195.                         width: 31px;
  196.                 }
  197.                
  198. #tabs {
  199.         background: #fff;
  200.         position: relative;
  201. }
  202.  
  203.         #tabs .tCont {
  204.                 padding: 10px;
  205.                 margin: 0;
  206.                 display: none;
  207.                 overflow: auto;
  208.         }
  209.        
  210.         #tabs .active {
  211.                 display: block;
  212.         }
  213.  
  214. #result iframe {
  215.         width: 100%;
  216.         border: none;
  217. }
  218.  
  219.     h1 {
  220.         margin-bottom: 20px;
  221.     }
  222.     #images {
  223.         margin: 20px 0;
  224.     }
  225.     #images li {
  226.         float: left;
  227.         padding: 5px;
  228.     }
  229.  
  230.     p { clear: both }
  231. /* ----------------------------- CLEARFIX ----------------------------------- */
  232.  
  233. .clearfix:after {
  234.         content: ".";
  235.         display: block;
  236.         height: 0;
  237.         clear: both;
  238.         visibility: hidden;
  239. }
  240.  
  241. .clearfix {display: inline-block;}  /* for IE/Mac */
  242.  
  243. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
  244.         margin:0;
  245.         padding:0;
  246. }
  247. table {
  248.         border-collapse:collapse;
  249.         border-spacing:0;
  250. }
  251. fieldset,img {
  252.         border:0;
  253. }
  254. address,caption,cite,code,dfn,em,strong,th,var {
  255.         font-style:normal;
  256.         font-weight:normal;
  257. }
  258. ol,ul {
  259.         list-style:none;
  260. }
  261. caption,th {
  262.         text-align:left;
  263. }
  264. h1,h2,h3,h4,h5,h6 {
  265.         font-size:100%;
  266.         font-weight:normal;
  267. }
  268. q:before,q:after {
  269.         content:'';
  270. }
  271. abbr,acronym { border:0;}
  272.  
  273.  
  274.   </style>
  275. </head>
  276. <body>
  277.   <h1>Random Imgur</h1>
  278.  
  279.   <p id="info"></p>
  280.  
  281.   <ul id="images"> </ul>
  282.  
  283.   <p><button id="random">Show me more!</button></p>
  284. </body>
  285. </html>