diff options
Diffstat (limited to 'frontend/imgrid/greatgrids/copy.html')
| -rwxr-xr-x | frontend/imgrid/greatgrids/copy.html | 327 |
1 files changed, 327 insertions, 0 deletions
diff --git a/frontend/imgrid/greatgrids/copy.html b/frontend/imgrid/greatgrids/copy.html new file mode 100755 index 0000000..9607758 --- /dev/null +++ b/frontend/imgrid/greatgrids/copy.html @@ -0,0 +1,327 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> +<title>the difference - interactive DHTML</title> +<meta http-equiv="imagetoolbar" content="no"> +<link href='http://fonts.googleapis.com/css?family=Tienne:400,700' rel='stylesheet' type='text/css'> +<style type="text/css"> + html { + overflow: hidden; + } + body { + margin: 0px; + padding: 0px; + background: aqua; + position: absolute; + width: 100%; + height: 100%; + } + #screen { + position:absolute; + left: 00%; + top: 0%; + width: 100%; + height: 100%; + background: aqua; + overflow: hidden; + } + #screen img { + position: absolute; + cursor: pointer; + left: -4000px; + filter: fliph flipv; + -ms-interpolation-mode:nearest-neighbor; + } + #screen canvas { + position: absolute; + cursor: pointer; + width: 0px; + border-style:outset; + border-width:8px; + border-color:black; + } + #b1 + { + position:absolute; + width:100%; + height:10%; + background-color:red; + background-image:url(http://ghghgh.us/timb/pepper3.gif); + } + #b2 + { + position:absolute; + top:100px; + width:100%; + font-family: 'Tienne', serif; + color:#8B8B7A; + text-shadow: 0px -15px 0 bisque; + text-shadow: 20px 30px 11px #CDC5BF; + font-size:40px; + padding-top:20px; + padding-bottom:20px; + text-align:center; + height:100px; + background-color:whitesmoke; + bottom:0px; + } + #b3 + { + position:fixed: + top:1000px; + height:1000px; + width:100%; + text-align:center; + font-style:georgia; + font-size:20px; + color:black; + text-transform:uppercase; + background-color:azure; + background-image:url(http://ghghgh.us/timb/pepper2.gif); + } + img + { + background-color:whitesmoke; + } + a {text-decoration: none;color:#333;} + a:hover {text-decoration: none;background:#ff8000;color:#fff;} + a:visited {text-decoration: none;color:#333;} + a:visited:hover {text-decoration: none;background:#ff8000;color:#fff;} +</style> +<!--special thanks to Gerard Ferrandez at http://www.dhteumeuleu.com for his image rolodex script--> + +<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> +<script type="text/javascript"> +var car = { + scr : 0, + img : 0, + xm : 0, + ym : 0, + xmb : 0, + ymb : 0, + drag : false, + cosY : 0, + cosX : 0, + sinY : 0, + sinX : 0, + xd : 0, + yd : -10, +// arr : [], + run : function () { + /* ==== rotation speed ==== */ + var Ay = car.xd / (car.scr.offsetWidth * .2); + var Ax = car.yd / (car.scr.offsetHeight * .2); + /* ==== vertical / horizontal friction ==== */ + if(!car.drag){ + if(Math.abs(car.xd) > Math.abs(car.yd)){ + car.xd *= .99; + car.yd *= .95; + } else { + car.xd *= .95; + car.yd *= .99; + } + } + /* ==== rotation angles ==== */ + car.cosY = Math.cos(Ay); + car.cosX = Math.cos(Ax); + car.sinY = Math.sin(Ay); + car.sinX = Math.sin(Ax); + /* ==== animate images ==== */ + for(var i = 0; i < 8; i++) + { + car.img[i].rotate() + }; + /* ==== loop ==== */ + setTimeout(car.run, 16); + }, + + /* ==== mouse mov ==== */ + mouse : function (e) { + this.xm = e.clientX; + this.ym = -e.clientY; + if(this.drag){ + var homeboy = this.img + this.xd = this.xm - this.xmb; + this.yd = this.ym - this.ymb; + } + this.xmb = this.xm; + this.ymb = this.ym; + }, + + /* ==== dim screen ==== */ + resize : function () { + car.nw = car.scr.offsetWidth; + car.nh = car.scr.offsetHeight; + }, + + /* ==== init script ==== */ + init : function () { + /* ==== window mousemove event ==== */ + document.onmousemove = function (e) { + if (window.event) e = window.event; + car.mouse(e); + // $('#error').append('x'); + } + /* ==== window onresize event ==== */ + onresize = car.resize; + /* ==== init images ==== */ + this.scr = document.getElementById('screen'); + var img = this.scr.getElementsByClassName('images'); + this.img = []; + car.resize(); + var k = 0; + + for(var xi = -1; xi <= 1; xi+=2) { + for(var yi = -1; yi <= 1; yi+=2) { + for(var zi = -1; zi <= 1; zi+=2) { + var o = img[k++] + /* ==== replace images by canvas ==== */ + if (document.createElement("canvas").getContext) { + var src = o; + o = document.createElement("canvas"); + if (k<=8){ + o.id = img[k-1].getAttribute('src')} + o.canvas = true; + /* ==== flip function ==== */ + o.flip = function (fx, fy) { + var context = this.getContext("2d"); + context.translate(fx<0?this.w:0, fy<0?this.h:0); + context.scale(fx, fy); + context.drawImage(this.img, 0, 0, this.w, this.h); + } + o.img = src; + this.scr.appendChild(o); + } + /* ==== HTML Objects ==== */ + this.img.push(o); + o.css = o.style; + o.x3d = xi; + o.y3d = yi; + o.z3d = zi; + o.py = 0; + o.px = 0; + o.onselectstart = function () { return false; } + o.ondrag = function () { return false; } + o.onmousedown = function () { + car.drag = true; + car.xd = 0; + car.yd = 0; + this.css.cursor = "move"; + // if(reference) + // { + // $('#'+reference.toString()).css('border-color','purple'); + // } + $('canvas').css('border-color','black') + document.getElementById('error').innerHTML = this.getAttribute('id').toString() + $(this).css('border-color','red'); + //reference = this.getAttribute('id').toString(); + //$('#error').append(reference); + // car.arr.push(reference) + // var thelast = car.arr[car.arr.length-2] + if (thelast) + { + $('#error').append('#'+thelast) + } + // $('#'+thelast).css('border-color','purple') + $('#error').click(function(){$('#error').html("<img src='"+reference.toString()+"'></img>")}); +// $('#error').click(function(){$('#b2').append("<img src='"+reference+"'></img>")}); + return false; + + } + o.onmouseout = function () {car.drag = false; this.css.cursor = "pointer"; return false; } + o.onmouseup = function () {car.drag = false; this.css.cursor = "pointer"; return false; } + o.rotate = function () { + /* ==== trigo ==== */ + var tz = this.z3d * car.cosY - this.x3d * car.sinY; + this.x3d = this.z3d * car.sinY + this.x3d * car.cosY; + this.z3d = this.y3d * car.sinX + tz * car.cosX; + this.y3d = this.y3d * car.cosX - tz * car.sinX; + var zf = 1 / (this.z3d / 10 + 1); + var x2d = this.x3d * zf * car.nw * .2; + var y2d = this.y3d * zf * car.nh * .2; + var w2d = Math.abs(x2d * 1.6); + var h2d = Math.abs(y2d * 1.6); + if (this.loaded) { + /* ==== HTML animation ==== */ + this.css.left = Math.round(car.nw * .5 - x2d - w2d * .5) + 'px'; + this.css.top = Math.round(car.nh * .5 - y2d - h2d * .5) + 'px'; + this.css.width = Math.round(w2d) + 'px'; + this.css.height = Math.round(h2d) + 'px'; + this.css.zIndex = Math.round(zf * 100); + /* $('body').click(function() + { + // $(this).attr('img'); + bill = 'howdy' + $('#error').html(bill); + });*/ + // $('#error').append(this.img); + /* ==== flipv ==== */ + if ((y2d < 0) != this.py) { + this.py = (y2d < 0); + if (this.canvas) + this.flip(1, -1); + else if (this.filters) + this.filters[1].enabled = (y2d < 0) ? "true" : "false"; + } + /* ==== fliph ==== */ + if ((x2d < 0) != this.px) { + this.px = (x2d < 0); + if (this.canvas) + this.flip(-1, 1); + else if (this.filters) + this.filters[0].enabled = (x2d < 0) ? "true" : "false"; + } + } else { + /* ==== load image ==== */ + if ((this.canvas && this.img.complete) || this.complete) { + this.loaded = true; + if (this.canvas) { + this.w = this.img.width; + this.h = this.img.height; + this.width = this.w; + this.height = this.h; + var context = this.getContext("2d"); + context.drawImage(this.img, 0, 0, this.w, this.h); + } + } + } + } + } + } + } + this.run(); + } +} +</script> +</head> + +<body> + +<div id="screen"> + <div id="b1"></div> + <div id="b2">WELCOME TO THE PHOTOBLASTER GREAT GRIDS GALLERY...THESE ARE RECENT GRIDS CREATED BY PEOPLE USING HTTP://ASDF.US/IMGRID</div> + <div id="b3"> + <br> + </div> + <img class='images' alt="by Jeremy Matthew Daly" src="images/gg1.png"> + <img class='images' alt="by Jeremy Matthew Daly" src="images/gg2.png"> + <img class='images' alt="by Jeremy Matthew Daly" src="images/gg3.png"> + <img class='images' alt="by Jeremy Matthew Daly" src="images/gg4.png"> + <img class='images' alt="by Jeremy Matthew Daly" src="images/gg5.png"> + <img class='images' alt="by Jeremy Matthew Daly" src="images/gg6.png"> + <img class='images' alt="by Pepper" src="images/gg7.png"> + <img class='images' alt="" src="images/gg6.png"> +</div> +<div id='error' style='border-style:solid; border-width:10px; border-color:green; background-color:red; height:100px;width100px;position:fixed;left:100px; top:20px;'>hello</div> +<script type="text/javascript"> + /* ==== start ==== */ + setTimeout(function() { + car.init(); + }, 1000); +</script> + +<script type='text/javascript'> +</script> +</body> +</html> + |