diff options
Diffstat (limited to 'share/frontend/imgrid/greatgrids/copy.html')
| -rwxr-xr-x | share/frontend/imgrid/greatgrids/copy.html | 327 |
1 files changed, 0 insertions, 327 deletions
diff --git a/share/frontend/imgrid/greatgrids/copy.html b/share/frontend/imgrid/greatgrids/copy.html deleted file mode 100755 index 9607758..0000000 --- a/share/frontend/imgrid/greatgrids/copy.html +++ /dev/null @@ -1,327 +0,0 @@ -<!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> - |
