Image honey

by abubelinha

HTML

<div class="xc">
</div>
<div id='bajo'></div>

CSS

body {margin:0px;padding:0px;background:url('http://i.imgur.com/rg3Rv.png');}
#bajo {
    background: url("http://i.imgur.com/pJZTn.png") repeat scroll 0 0 transparent;
    padding: 6px 5px 3px 6px;
    width: 100%;
    position:fixed;
    bottom:0;
    
}

#bajo a {display: inline-block;margin:0 5px 4px 0;}

.button {
    border-radius: 4px;
    z-index:555;
    left:8px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: 3px;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    text-decoration: none;
}
.button:active {
}


/* orange */
.orange {
    color: #fef4e9;
    border: solid 1px #da7c0c;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
    color: #fcd3a5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
.xc {margin:2% 0 48px 0;}
#bajo a:first-child{font-weight:bold;}
 .a {
    display: block;
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3);
    width: auto;
    margin: 0 auto;
    max-width: 96%;
    border: 5px solid #fff;
   ...

JavaScript

var Url=location.href;/*var Url = "http://jsfiddle.net/Public/5JmgK/show/?ref=http://myanimegallery.blogspot.com/2012/06/dog-days-wallpaper-3.html&sitio=http://4.bp.blogspot.com/-o_31nU-ptWg/T8m4SWtolKI/AAAAAAAAD2Y/OqDRFhVIeLQ/s0/Dog+Days+Wallpaper+3.jpg";*/
Url = Url.replace(/%20/, " ");
Url = Url.replace(/.*\?(.*?)/, "$1");
Variables = Url.split("&");
for (i = 0; i < Variables.length; i++) {
    Separ = Variables[i].split("=");
    eval('var ' + Separ[0] + '="' + Separ[1] + '"');
}
var sitio0 = sitio.replace("s1600","s0");
var sitio0d = sitio.replace("s1600","s0-d");
/*$('#ref').html("<iframe style='width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px' height='100%' width='100%' scrolling='auto' id='glu' frameborder='0' src="+sitio+" ></iframe>");*/

$('.xc').html("<img class='a' src='"+sitio0+"' />");

var waz = function (imu, size) {
    if(imu.match("blogspot.com")) {
      var ext = sitio.match(/[^\.]+$/gi);
      if(size === 0) {
        var tx = "<img width='10px' src='http://i.imgur.com/Fk3Ek.png'/> Download Original"
      } else {
        var tx = size;
        var imu = imu.replace(/.jpg|.png|.bmp|.gif|.jpeg/gi, "+" + size + "." + ext);
      }
      return "<a class='button orange' href=" + imu.replace(/s[0-9]+(?:\.[0-9]*)?/, "w" + size + "-d") + " >" + tx + "</a>";
    } else if(!imu.match("blogspot.com") && size === 0) return "<a class='button orange' href="+imu+"><img width='10px' src='http://i.imgur.com/Fk3Ek.png'/> Download Original</a>";
  }

$('#bajo')
.append(waz(sitio,0))
.append(waz(sitio,1920))
.append(waz(sitio,1680))
.append(waz(sitio,1600))
.append(waz(sitio,1440))
.append(waz(sitio,1366))
.append(waz(sitio,1280))
.append(waz(sitio,1024))
.append(waz(sitio,800));