|
|
| Line 1: |
Line 1: |
| | <html> | | <html> |
| | <head> | | <head> |
| | + | <title> </title> |
| | | | |
| - | <style> | + | <style type="text/css"> |
| - | #p-logo {
| + | |
| - | display:none;
| + | |
| - | }
| + | |
| | | | |
| - | body {
| + | #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { |
| - | background-color:#fff;
| + | display:none;} |
| - | //background-image:url("https://static.igem.org/mediawiki/2011/3/3a/Bg.png"); | + | |
| - | } | + | |
| | | | |
| | #top-section { | | #top-section { |
| - | height:18px;
| + | width: 965px; |
| - | border:none;
| + | height: 0; |
| - | border-bottom:1px solid black;
| + | margin: 0 auto; |
| - | padding:0px;
| + | padding: 0; |
| - | } | + | border: none;} |
| | | | |
| - | h1.firstHeading {
| + | #content { |
| - | display:none;
| + | border: none; |
| | + | position: absolute; |
| | + | overflow: hidden; |
| | + | display: block; |
| | + | left: -10px; |
| | + | width: 1000px; |
| | } | | } |
| - | h3#siteSub {
| |
| - | display:none;
| |
| - | }
| |
| - | #contentSub {
| |
| - | display:none;
| |
| - | }
| |
| - | #search-controls
| |
| - | {
| |
| - | display:none;
| |
| - | }
| |
| - | .header {
| |
| - | padding:0px;
| |
| - | }
| |
| - | </style>
| |
| - |
| |
| - | </head>
| |
| - | </html>
| |
| - | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
| |
| - | <html>
| |
| - | <head>
| |
| - |
| |
| - | <title>Photo</title>
| |
| - | <style type="text/css">
| |
| - | html {
| |
| - | overflow: hidden;
| |
| - | }
| |
| - | body {
| |
| - | position: absolute;
| |
| - | margin: 0px;
| |
| - | padding: 0px;
| |
| - | background: #111;
| |
| - | width: 100%;
| |
| - | height: 100%;
| |
| - | }
| |
| - | #screen {
| |
| - | position: absolute;
| |
| - | left: 10%;
| |
| - | top: 10%;
| |
| - | width: 80%;
| |
| - | height: 80%;
| |
| - | background: #000;
| |
| - | }
| |
| - | #screen img {
| |
| - | position: absolute;
| |
| - | cursor: pointer;
| |
| - | visibility: hidden;
| |
| - | width: 0px;
| |
| - | height: 0px;
| |
| - | }
| |
| - | #screen .tvover {
| |
| - | border: solid #876;
| |
| - | opacity: 1;
| |
| - | filter: alpha(opacity=100);
| |
| - | }
| |
| - | #screen .tvout {
| |
| - | border: solid #fff;
| |
| - | opacity: 0.7;
| |
| - | }
| |
| - | #bankImages {
| |
| - | display: none;
| |
| - | }
| |
| - | </style>
| |
| - |
| |
| - | <script type="text/javascript">
| |
| - | var Library = {};
| |
| - | Library.ease = function () {
| |
| - | this.target = 0;
| |
| - | this.position = 0;
| |
| - | this.move = function (target, speed)
| |
| - | {
| |
| - | this.position += (target - this.position) * speed;
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | var tv = {
| |
| - | /* ==== variables ==== */
| |
| - | O : [],
| |
| - | screen : {},
| |
| - | grid : {
| |
| - | size : 4, // 4x4 grid
| |
| - | borderSize : 6, // borders size
| |
| - | zoomed : false
| |
| - | },
| |
| - | angle : {
| |
| - | x : new Library.ease(),
| |
| - | y : new Library.ease()
| |
| - | },
| |
| - | camera : {
| |
| - | x : new Library.ease(),
| |
| - | y : new Library.ease(),
| |
| - | zoom : new Library.ease(),
| |
| - | focalLength : 750 // camera Focal Length
| |
| - | },
| |
| - |
| |
| - | /* ==== init script ==== */
| |
| - | init : function ()
| |
| - | {
| |
| - | this.screen.obj = document.getElementById('screen');
| |
| - | var img = document.getElementById('bankImages').getElementsByTagName('img');
| |
| - | this.screen.obj.onselectstart = function () { return false; }
| |
| - | this.screen.obj.ondrag = function () { return false; }
| |
| - | /* ==== create images grid ==== */
| |
| - | var ni = 0;
| |
| - | var n = (tv.grid.size / 2) - .5;
| |
| - | for (var y = -n; y <= n; y++)
| |
| - | {
| |
| - | for (var x = -n; x <= n; x++)
| |
| - | {
| |
| - | /* ==== create HTML image element ==== */
| |
| - | var o = document.createElement('img');
| |
| - | var i = img[(ni++) % img.length];
| |
| - | o.className = 'tvout';
| |
| - | o.src = i.src;
| |
| - | tv.screen.obj.appendChild(o);
| |
| - | /* ==== 3D coordinates ==== */
| |
| - | o.point3D = {
| |
| - | x : x,
| |
| - | y : y,
| |
| - | z : new Library.ease()
| |
| - | };
| |
| - | /* ==== push object ==== */
| |
| - | o.point2D = {};
| |
| - | o.ratioImage = 1;
| |
| - | tv.O.push(o);
| |
| - | /* ==== on mouse over event ==== */
| |
| - | o.onmouseover = function ()
| |
| - | {
| |
| - | if (!tv.grid.zoomed)
| |
| - | {
| |
| - | if (tv.o)
| |
| - | {
| |
| - | /* ==== mouse out ==== */
| |
| - | tv.o.point3D.z.target = 0;
| |
| - | tv.o.className = 'tvout';
| |
| - | }
| |
| - | /* ==== mouse over ==== */
| |
| - | this.className = 'tvover';
| |
| - | this.point3D.z.target = -.5;
| |
| - | tv.o = this;
| |
| - | }
| |
| - | }
| |
| - | /* ==== on click event ==== */
| |
| - | o.onclick = function ()
| |
| - | {
| |
| - | if (!tv.grid.zoomed)
| |
| - | {
| |
| - | /* ==== zoom in ==== */
| |
| - | tv.camera.x.target = this.point3D.x;
| |
| - | tv.camera.y.target = this.point3D.y;
| |
| - | tv.camera.zoom.target = tv.screen.w * 1.25;
| |
| - | tv.grid.zoomed = this;
| |
| - | } else {
| |
| - | if (this == tv.grid.zoomed){
| |
| - | /* ==== zoom out ==== */
| |
| - | tv.camera.x.target = 0;
| |
| - | tv.camera.y.target = 0;
| |
| - | tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
| |
| - | tv.grid.zoomed = false;
| |
| - | }
| |
| - | }
| |
| - | }
| |
| - | /* ==== 3D transform function ==== */
| |
| - | o.calc = function ()
| |
| - | {
| |
| - | /* ==== ease mouseover ==== */
| |
| - | this.point3D.z.move(this.point3D.z.target, .5);
| |
| - | /* ==== assign 3D coords ==== */
| |
| - | var x = (this.point3D.x - tv.camera.x.position) * tv.camera.zoom.position;
| |
| - | var y = (this.point3D.y - tv.camera.y.position) * tv.camera.zoom.position;
| |
| - | var z = this.point3D.z.position * tv.camera.zoom.position;
| |
| - | /* ==== perform rotations ==== */
| |
| - | var xy = tv.angle.cx * y - tv.angle.sx * z;
| |
| - | var xz = tv.angle.sx * y + tv.angle.cx * z;
| |
| - | var yz = tv.angle.cy * xz - tv.angle.sy * x;
| |
| - | var yx = tv.angle.sy * xz + tv.angle.cy * x;
| |
| - | /* ==== 2D transformation ==== */
| |
| - | this.point2D.scale = tv.camera.focalLength / (tv.camera.focalLength + yz);
| |
| - | this.point2D.x = yx * this.point2D.scale;
| |
| - | this.point2D.y = xy * this.point2D.scale;
| |
| - | this.point2D.w = Math.round(
| |
| - | Math.max(
| |
| - | 0,
| |
| - | this.point2D.scale * tv.camera.zoom.position * .8
| |
| - | )
| |
| - | );
| |
| - | /* ==== image size ratio ==== */
| |
| - | if (this.ratioImage > 1)
| |
| - | this.point2D.h = Math.round(this.point2D.w / this.ratioImage);
| |
| - | else
| |
| - | {
| |
| - | this.point2D.h = this.point2D.w;
| |
| - | this.point2D.w = Math.round(this.point2D.h * this.ratioImage);
| |
| - | }
| |
| - | }
| |
| - | /* ==== rendering ==== */
| |
| - | o.draw = function ()
| |
| - | {
| |
| - | if (this.complete)
| |
| - | {
| |
| - | /* ==== paranoid image load ==== */
| |
| - | if (!this.loaded)
| |
| - | {
| |
| - | if (!this.img)
| |
| - | {
| |
| - | /* ==== create internal image ==== */
| |
| - | this.img = new Image();
| |
| - | this.img.src = this.src;
| |
| - | }
| |
| - | if (this.img.complete)
| |
| - | {
| |
| - | /* ==== get width / height ratio ==== */
| |
| - | this.style.visibility = 'visible';
| |
| - | this.ratioImage = this.img.width / this.img.height;
| |
| - | this.loaded = true;
| |
| - | this.img = false;
| |
| - | }
| |
| - | }
| |
| - | /* ==== HTML rendering ==== */
| |
| - | this.style.left = Math.round(
| |
| - | this.point2D.x * this.point2D.scale +
| |
| - | tv.screen.w - this.point2D.w * .5
| |
| - | ) + 'px';
| |
| - | this.style.top = Math.round(
| |
| - | this.point2D.y * this.point2D.scale +
| |
| - | tv.screen.h - this.point2D.h * .5
| |
| - | ) + 'px';
| |
| - | this.style.width = this.point2D.w + 'px';
| |
| - | this.style.height = this.point2D.h + 'px';
| |
| - | this.style.borderWidth = Math.round(
| |
| - | Math.max(
| |
| - | this.point2D.w,
| |
| - | this.point2D.h
| |
| - | ) * tv.grid.borderSize * .01
| |
| - | ) + 'px';
| |
| - | this.style.zIndex = Math.floor(this.point2D.scale * 100);
| |
| - | }
| |
| - | }
| |
| - | }
| |
| - | }
| |
| - | /* ==== start script ==== */
| |
| - | tv.resize();
| |
| - | mouse.y = tv.screen.y + tv.screen.h;
| |
| - | mouse.x = tv.screen.x + tv.screen.w;
| |
| - | tv.run();
| |
| - | },
| |
| - |
| |
| - | /* ==== resize window ==== */
| |
| - | resize : function ()
| |
| - | {
| |
| - | var o = tv.screen.obj;
| |
| - | tv.screen.w = o.offsetWidth / 2;
| |
| - | tv.screen.h = o.offsetHeight / 2;
| |
| - | tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
| |
| - | for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent)
| |
| - | {
| |
| - | tv.screen.x += o.offsetLeft;
| |
| - | tv.screen.y += o.offsetTop;
| |
| - | }
| |
| - | },
| |
| - |
| |
| - | /* ==== main loop ==== */
| |
| - | run : function ()
| |
| - | {
| |
| - | /* ==== motion ease ==== */
| |
| - | tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * .0025, .1);
| |
| - | tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * .0025, .1);
| |
| - | tv.camera.x.move(tv.camera.x.target, tv.grid.zoomed ? .25 : .025);
| |
| - | tv.camera.y.move(tv.camera.y.target, tv.grid.zoomed ? .25 : .025);
| |
| - | tv.camera.zoom.move(tv.camera.zoom.target, .05);
| |
| - | /* ==== angles sin and cos ==== */
| |
| - | tv.angle.cx = Math.cos(tv.angle.x.position);
| |
| - | tv.angle.sx = Math.sin(tv.angle.x.position);
| |
| - | tv.angle.cy = Math.cos(tv.angle.y.position);
| |
| - | tv.angle.sy = Math.sin(tv.angle.y.position);
| |
| - | /* ==== loop through all images ==== */
| |
| - | for (var i = 0, o; o = tv.O[i]; i++)
| |
| - | {
| |
| - | o.calc();
| |
| - | o.draw();
| |
| - | }
| |
| - | /* ==== loop ==== */
| |
| - | setTimeout(tv.run, 32);
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | /* ==== global mouse position ==== */
| |
| - | var mouse = {
| |
| - | x : 0,
| |
| - | y : 0
| |
| - | }
| |
| - | document.onmousemove = function(e)
| |
| - | {
| |
| - | if (window.event) e = window.event;
| |
| - | mouse.x = e.clientX;
| |
| - | mouse.y = e.clientY;
| |
| - | return false;
| |
| - | }
| |
| - |
| |
| - | </script>
| |
| - | </head>
| |
| - |
| |
| - | <body>
| |
| - |
| |
| - | <div id="screen"></div>
| |
| - |
| |
| - | <div id="bankImages">
| |
| - | <img alt="" src="https://static.igem.org/mediawiki/2013hs/4/4f/Deerfield_MA_logo.png">
| |
| - | <img alt="" src="https://static.igem.org/mediawiki/2013hs/e/e9/BFSH_LOGO.jpg">
| |
| - | <img alt="" src="images/wt47.jpg">
| |
| - | <img alt="" src="images/wt16.jpg">
| |
| - |
| |
| - | <img alt="" src="images/wt43.jpg">
| |
| - | <img alt="" src="images/wt19.jpg">
| |
| - | <img alt="" src="images/wt27.jpg">
| |
| - | <img alt="" src="images/wt46.jpg">
| |
| - |
| |
| - | <img alt="" src="images/wt14.jpg">
| |
| - | <img alt="" src="images/wt21.jpg">
| |
| - | <img alt="" src="images/wt35.jpg">
| |
| - | <img alt="" src="images/wt48.jpg">
| |
| - |
| |
| - | <img alt="" src="images/wt55.jpg">
| |
| - | <img alt="" src="images/wt40.jpg">
| |
| - | <img alt="" src="images/wt53.jpg">
| |
| - | <img alt="" src="images/wt25.jpg">
| |
| - |
| |
| - | </div>
| |
| - |
| |
| - | <script type="text/javascript">
| |
| - | /* ==== start script ==== */
| |
| - | onresize = tv.resize;
| |
| - | tv.init();
| |
| - | </script>
| |
| - | <br>
| |
| - |
| |
| - |
| |
| - | </body>
| |
| - | </html>
| |
"