Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>random imgur</title>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script type="text/javascript">
- var Imgur = {
- fetch: function(num) {
- var self=this;
- self.total=num;
- self.done=0;
- self.failures=0;
- self.start=+new Date;
- $('#images').empty();
- for (var x = 0; x < num; x++) {
- self.hunt(function(id) {
- self.done++;
- $('#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>");
- self.update();
- });
- }
- },
- update: function() {
- var interval=new Date-this.start;
- function speed(v) { return (~~(v/interval*1e5))/100; }
- $('#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]");
- },
- hunt: function(cb) {
- var self=this,
- id = self.random(5),
- img = new Image;
- self.update();
- img.src = "http://imgur.com/"+id+"s.png";
- img.onload = function() {
- if (img.width==198 && img.height==160 || img.width==161 && img.height==81) {
- // assume this is an imgur error image, and retry.
- fail();
- } else {
- cb(id);
- }
- }
- img.onerror = fail; // no escape.
- function fail() {
- self.failures++;
- self.update();
- self.hunt(cb);
- }
- },
- random: function(len) {
- var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
- return len?chars.charAt(~~(Math.random()*chars.length))+this.random(len-1):"";
- }
- };
- $(document).ready(function() {
- $('#random').bind('click', function(e) {
- Imgur.fetch(500);
- });
- });
- </script>
- <style>
- body {
- font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
- font-size: .7em;
- margin: 0;
- padding: 0;
- }
- body, ul, ol, li, p, pre, div, a {
- padding: 0;
- margin: 0;
- list-style: none;
- text-decoration: none;
- color: #333;
- }
- #tabs pre {
- color: #333;
- }
- a {
- outline: none;
- font-weight: bold;
- text-shadow: 0 1px 0 #000;
- cursor: pointer;
- }
- #tabs a {
- text-shadow: 0 1px 0 #999;
- }
- #tabs #resources a {
- font-size: 1.3em;
- }
- .tCont {
- font-size: 1em;
- font-family: "Monaco", Helvetica, Arial, sans-serif;
- }
- #wrapper {
- overflow: hidden;
- }
- #head,
- #triggers,
- #actions li,
- #triggers li a,
- #actions li.active,
- #actions li.active a,
- #head h1 a {
- background-image: url(../img/mooshell-frame.sprite.png);
- }
- #head {
- background-position: 0 0;
- background-repeat: repeat-x;
- position: relative;
- height: 30px;
- overflow: hidden;
- }
- #head h1 {
- float: left;
- height: 30px;
- width: 138px;
- margin: 0 0 0 10px;
- }
- #head h1 a {
- float: left;
- height: 30px;
- width: 138px;
- background-position: 100% -112px;
- text-indent: -9999em;
- }
- #actions {
- float: right;
- }
- #actions li {
- float: left;
- height: 30px;
- background-position: 0 -47px;
- background-repeat: no-repeat;
- }
- #actions li a {
- display: block;
- height: 30px;
- line-height: 28px;
- padding: 0 14px;
- color: #fff;
- }
- #actions li.active {
- background-position: 0 -173px;
- }
- #actions li.active a {
- background-position: 100% -173px;
- color: #333;
- text-shadow: none;
- }
- #triggers {
- float: right;
- padding: 0 4px;
- background-position: 0 -47px;
- }
- #triggers li {
- float: left;
- height: 30px;
- background-repeat: no-repeat;
- }
- #triggers li.tRun a {
- background-position: 0 -112px;
- }
- #triggers li.tEdit a {
- background-position: -31px -112px;
- }
- #triggers li a {
- display: block;
- height: 30px;
- text-indent: -9000em;
- width: 31px;
- }
- #tabs {
- background: #fff;
- position: relative;
- }
- #tabs .tCont {
- padding: 10px;
- margin: 0;
- display: none;
- overflow: auto;
- }
- #tabs .active {
- display: block;
- }
- #result iframe {
- width: 100%;
- border: none;
- }
- h1 {
- margin-bottom: 20px;
- }
- #images {
- margin: 20px 0;
- }
- #images li {
- float: left;
- padding: 5px;
- }
- p { clear: both }
- /* ----------------------------- CLEARFIX ----------------------------------- */
- .clearfix:after {
- content: ".";
- display: block;
- height: 0;
- clear: both;
- visibility: hidden;
- }
- .clearfix {display: inline-block;} /* for IE/Mac */
- body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
- margin:0;
- padding:0;
- }
- table {
- border-collapse:collapse;
- border-spacing:0;
- }
- fieldset,img {
- border:0;
- }
- address,caption,cite,code,dfn,em,strong,th,var {
- font-style:normal;
- font-weight:normal;
- }
- ol,ul {
- list-style:none;
- }
- caption,th {
- text-align:left;
- }
- h1,h2,h3,h4,h5,h6 {
- font-size:100%;
- font-weight:normal;
- }
- q:before,q:after {
- content:'';
- }
- abbr,acronym { border:0;}
- </style>
- </head>
- <body>
- <h1>Random Imgur</h1>
- <p id="info"></p>
- <ul id="images"> </ul>
- <p><button id="random">Show me more!</button></p>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement