|
3d photo galery..(dis is really cool) |
|
|
Author |
Message |
punk_ii_girl
HCG Geek
> : I love HCG!
Posts : 626
Age : 103
Mood : Happy
Country :
Reg-Date : 2008-09-11
Forum Warning :
Contribution :
|
Subject: 3d photo galery..(dis is really cool) Tue Oct 21, 2008 11:18 pm |
|
|
credits: fstalk simpleme UPDATED JAN.03.09save this code as .HTMLyou can edit the RED PART and the IMAGE URL LINK..replace with yer desired PICS.. - Spoiler:
<html> <head> <title>3d Photo Gallery by Tax</title> <meta http-equiv="imagetoolbar" content="no"> <style type="text/css"> html { overflow: hidden; } body { position: absolute; margin: 0px; padding: 0px; background: #000000; width: 100%; height: 100%; } #screen { position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; background: transparent; } #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"> // ============================================================= // ===== photo 3D ===== // script written by Gerard Ferrandez - October 21th, 2007 // http://www.dhteumeuleu.com // =============================================================
/* ==== library ==== */ 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 : 5, // 5x5 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="Image Link"> <img alt="" src="Image Link"> <img alt="" src="Image Link"> <img alt="" src="Image Link"> <img alt="" src="Image Link">
<img alt="" src="Image Link"> <img alt="" src="Image Link"> <img alt="" src="Image Link"> <img alt="" src="Image Link"> <img alt="" src="Image Link">
<img alt="" src="Image Link"> <img alt="" src="Image Link"> <img alt="" src="Image Link"> <img alt="" src="Image Link"> <img alt="" src="Image Link">
<img alt="" src="Image Link"> <img alt="" src="Image Link"> <img alt="" src="Image Link"> <img alt="" src="Image Link"> <img alt="" src="Image Link">
<img alt="" src="Image Link"> <img alt="" src="Image Link"> <img alt="" src="Image Link"> <img alt="" src="Image Link"> <img alt="" src="Image Link">
</div>
<script type="text/javascript"> /* ==== start script ==== */ onresize = tv.resize; tv.init(); </script>
</body> </html>
next step.. save this as .JS then edit the BLUE part - Spoiler:
window.addEvent('domready', function() { var tax = "<iframe style='FILTER: chroma(color=transparent)' allowtransparency='true' frameborder=0 width='500' height='500' scrolling='no' src=Link of your html></iframe><br><br><a href=\"http://www.friendster.com/viewphotos.php?a=0&uid=Your id\"><b>View All Photos</b></a><br><br></center>"; document.getElementById('content_1').style.height='100%'; document.getElementById('content_1').style.overflowY='hidden'; document.getElementById('content_1').innerHTML = "<table width='100%'><tr><td align='center'>"+tax+"</td></tr></table>"; });
LIVE PREVIEW
Last edited by punk_ii_girl on Sun Jan 04, 2009 12:38 pm; edited 6 times in total
|
|
|
|
zachariiss
HCG Addict
> : www.zachariissblog.co.nr
Posts : 444
Age : 28
Location : laguna
Mood : Happy
Country :
Reg-Date : 2008-10-05
Forum Warning :
Contribution :
|
Subject: Re: 3d photo galery..(dis is really cool) Thu Oct 23, 2008 12:43 pm |
|
|
|
|
|
|
rexon
Promoter
> : thx my bunny~~~
Posts : 1573
Age : 100
Location : soul society
Country :
Reg-Date : 2008-09-17
Forum Warning :
Contribution :
|
Subject: Re: 3d photo galery..(dis is really cool) Thu Oct 23, 2008 12:47 pm |
|
|
nice.. but can change the backgorund color to "transparent""??
|
|
|
|
TaXcLuSsiVe
HCG Member
> : I love HCG!
Posts : 24
Reg-Date : 2008-10-21
Forum Warning :
Contribution :
|
Subject: Re: 3d photo galery..(dis is really cool) Thu Oct 23, 2008 2:20 pm |
|
|
- rexon wrote:
but can change the backgorund color to "transparent""?? find this part... - Quote :
- body {
position: absolute; margin: 0px; padding: 0px; background: #000000; width: 100%; height: 100%; }
change #000000 to transparent
|
|
|
|
punk_ii_girl
HCG Geek
> : I love HCG!
Posts : 626
Age : 103
Mood : Happy
Country :
Reg-Date : 2008-09-11
Forum Warning :
Contribution :
|
Subject: Re: 3d photo galery..(dis is really cool) Thu Oct 23, 2008 2:48 pm |
|
|
|
|
|
|
rexon
Promoter
> : thx my bunny~~~
Posts : 1573
Age : 100
Location : soul society
Country :
Reg-Date : 2008-09-17
Forum Warning :
Contribution :
|
Subject: Re: 3d photo galery..(dis is really cool) Thu Oct 23, 2008 3:51 pm |
|
|
- TaXcLuSsiVe wrote:
- rexon wrote:
but can change the backgorund color to "transparent""?? find this part...
- Quote :
- body {
position: absolute; margin: 0px; padding: 0px; background: #000000; width: 100%; height: 100%; }
change #000000 to transparent ok thx thx ....
|
|
|
|
Chico
Co-Admin
> : Work mode.
Posts : 509
Age : 34
Location : C:/Windows/system32
Mood : Crappy
Country :
Reg-Date : 2008-09-20
Forum Warning :
Contribution :
|
Subject: Re: 3d photo galery..(dis is really cool) Thu Oct 23, 2008 3:53 pm |
|
|
|
|
|
|
punk_ii_girl
HCG Geek
> : I love HCG!
Posts : 626
Age : 103
Mood : Happy
Country :
Reg-Date : 2008-09-11
Forum Warning :
Contribution :
|
|
|
|
jaspermarkyo
HCG Wizard
> : I love HCG!
Posts : 54
Age : 34
Reg-Date : 2008-09-16
Forum Warning :
Contribution :
|
Subject: Re: 3d photo galery..(dis is really cool) Fri Oct 24, 2008 11:16 pm |
|
|
hmmn... medyo mabagal lang hehe
|
|
|
|
misz.camiLLe
HCG VIP Member
> : ANTOK NEMEN SI AVATAR KO :))
Posts : 21026
Age : 114
Mood : Happy
Country :
Reg-Date : 2008-09-08
Forum Warning :
Contribution :
|
Subject: Re: 3d photo galery..(dis is really cool) Fri Oct 24, 2008 11:27 pm |
|
|
|
|
|
|
punk_ii_girl
HCG Geek
> : I love HCG!
Posts : 626
Age : 103
Mood : Happy
Country :
Reg-Date : 2008-09-11
Forum Warning :
Contribution :
|
Subject: Re: 3d photo galery..(dis is really cool) Sat Oct 25, 2008 4:12 am |
|
|
d na po mabagal updated na preview po
|
|
|
|
megamix875
Guest
> : I love HCG!
Posts : 4
Reg-Date : 2008-10-26
Forum Warning :
Contribution :
|
Subject: please tell me Sun Oct 26, 2008 12:50 pm |
|
|
|
|
|
|
punk_ii_girl
HCG Geek
> : I love HCG!
Posts : 626
Age : 103
Mood : Happy
Country :
Reg-Date : 2008-09-11
Forum Warning :
Contribution :
|
Subject: Re: 3d photo galery..(dis is really cool) Thu Oct 30, 2008 9:59 am |
|
|
ow my,. better read this THREAD first..
|
|
|
|
punk_ii_girl
HCG Geek
> : I love HCG!
Posts : 626
Age : 103
Mood : Happy
Country :
Reg-Date : 2008-09-11
Forum Warning :
Contribution :
|
Subject: Re: 3d photo galery..(dis is really cool) Sun Nov 02, 2008 4:55 pm |
|
|
|
|
|
|
cilla
HCG Freak
> : I love HCG!
Posts : 142
Age : 32
Reg-Date : 2008-09-17
Forum Warning :
Contribution :
|
Subject: Re: 3d photo galery..(dis is really cool) Mon Nov 03, 2008 9:47 am |
|
|
|
|
|
|
aii...trixie
HCG Wizard
> : I love HCG!
Posts : 76
Age : 30
Location : Tacloban
Reg-Date : 2008-10-30
Forum Warning :
Contribution :
|
Subject: Re: 3d photo galery..(dis is really cool) Mon Nov 03, 2008 8:49 pm |
|
|
astig.,. haha.,. tnx fer sharing!!!
|
|
|
|
xoxotam
HCG Addict
> : so buzy.. :D
Posts : 280
Mood : Amused
Country :
Reg-Date : 2008-10-10
Forum Warning :
Contribution :
|
Subject: Re: 3d photo galery..(dis is really cool) Mon Nov 03, 2008 9:54 pm |
|
|
weee...hahaha..that's really cool..hmmm can i change the bckground instead of black?
|
|
|
|
punk_ii_girl
HCG Geek
> : I love HCG!
Posts : 626
Age : 103
Mood : Happy
Country :
Reg-Date : 2008-09-11
Forum Warning :
Contribution :
|
Subject: Re: 3d photo galery..(dis is really cool) Tue Nov 04, 2008 10:36 am |
|
|
yeah..u can change the background read the previous page,. theres a instruction for that.. anyway thanks foe the appreciation
|
|
|
|
wytsxarha
HCG Freak
> : I love HCG!
Posts : 107
Age : 32
Reg-Date : 2008-10-28
Forum Warning :
Contribution :
|
Subject: Re: 3d photo galery..(dis is really cool) Fri Nov 14, 2008 4:12 pm |
|
|
ate is it possible to change d size?? how?? ________________________________________________________________________ <CENTER> <FONT FACE="century gothic"SIZE="1"COLOR="#ffcc99">im</font><br> <br><FONT FACE="century gothic"SIZE="1"COLOR="#66ff33">fUnNy.</font><FONT FACE="century gothic" SIZE="1"COLOR="#ff3300">dOrkypOrky.</font><FONT FACE="century gothic"SIZE="1"COLOR="#ffcc00">saD.</font><FONT FACE="century gothic"SIZE="1" COLOR="#330000">haPpY.</font><FONT FACE="century gothic"SIZE="1"COLOR="#3399ff">cLumsY.</font><FONT FACE="century gothic" SIZE="1" COLOR="#996633">gEeky.</font><FONT FACE="century gothic"SIZE="1" COLOR="#ff9999">cUtTie.</font><br> <FONT FACE="century gothic"SIZE="1"COLOR="#993399"> bUt sEe</font><br> <FONT FACE="century gothic"SIZE="1"COLOR="#333333">tHatz wHy yOu fell foR me</font></CENTER>
|
|
|
|
punk_ii_girl
HCG Geek
> : I love HCG!
Posts : 626
Age : 103
Mood : Happy
Country :
Reg-Date : 2008-09-11
Forum Warning :
Contribution :
|
Subject: Re: 3d photo galery..(dis is really cool) Sat Nov 15, 2008 10:30 am |
|
|
|
|
|
|
luckzkie
HCG Freak
> : I love HCG!
Posts : 183
Location : uNder a rOof ^_^
Reg-Date : 2008-10-09
Forum Warning :
Contribution :
|
Subject: Re: 3d photo galery..(dis is really cool) Sat Nov 22, 2008 9:47 pm |
|
|
|
|
|
|
cheekikai™
HCG Member
> : I love HCG!
Posts : 14
Reg-Date : 2008-11-25
Forum Warning :
Contribution :
|
Subject: Re: 3d photo galery..(dis is really cool) Tue Nov 25, 2008 6:52 pm |
|
|
nice sana kaso dko lam panu or kung saan iinsert yang mga codes na yan. i dont know what is js or san ko mtatagpuan yan. kawawa nmn akong nilalang ohh
|
|
|
|
punk_ii_girl
HCG Geek
> : I love HCG!
Posts : 626
Age : 103
Mood : Happy
Country :
Reg-Date : 2008-09-11
Forum Warning :
Contribution :
|
Subject: Re: 3d photo galery..(dis is really cool) Sun Jan 04, 2009 12:39 pm |
|
|
try to know how to compile JS file first..
|
|
|
|
ivan1234567890
HCG Freak
> : Waiting for Twix =)
Posts : 105
Age : 28
Location : Philippines
Mood : Crazy
Country :
Reg-Date : 2008-12-10
Forum Warning :
Contribution :
|
Subject: Re: 3d photo galery..(dis is really cool) Sun Jan 04, 2009 5:19 pm |
|
|
OMG.. kewl! nice...! :D tanxX.. it really helfz...
|
|
|
|
ivan1234567890
HCG Freak
> : Waiting for Twix =)
Posts : 105
Age : 28
Location : Philippines
Mood : Crazy
Country :
Reg-Date : 2008-12-10
Forum Warning :
Contribution :
|
Subject: Re: 3d photo galery..(dis is really cool) Sun Jan 04, 2009 5:27 pm |
|
|
punK can i rEplace the "IMAGE LINK" with image .gif?
|
|
|
|
Sponsored content
|
Subject: Re: 3d photo galery..(dis is really cool) |
|
|
|
|
|
|
|
3d photo galery..(dis is really cool) |
|
|