• ARCHIVES 
  • » [color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Interactive DHTML[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this as [b].html[/b] =) [quote]<html> <hea

Pages: 123

[color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Interactive DHTML[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this as [b].html[/b] =) [quote]<html> <hea

simpleMe
» FTalkManiac
FTalk Level: zero
949
0
1969-12-31

[color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Interactive DHTML[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this as [b].html[/b] =) [quote]<html> <hea

[color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Interactive DHTML[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this as [b].html[/b] =) [quote]<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="[b]Image Link[/b]"> <img alt="" src="[b]Image Link[/b]"> <img alt="" src="[b]Image Link[/b]"> <img alt="" src="[b]Image Link[/b]"> <img alt="" src="[b]Image Link[/b]"> <img alt="" src="[b]Image Link[/b]"> <img alt="" src="[b]Image Link[/b]"> <img alt="" src="[b]Image Link[/b]"> <img alt="" src="[b]Image Link[/b]"> <img alt="" src="[b]Image Link[/b]"> <img alt="" src="[b]Image Link[/b]"> <img alt="" src="[b]Image Link[/b]"> <img alt="" src="[b]Image Link[/b]"> <img alt="" src="[b]Image Link[/b]"> <img alt="" src="[b]Image Link[/b]"> <img alt="" src="[b]Image Link[/b]"> <img alt="" src="[b]Image Link[/b]"> <img alt="" src="[b]Image Link[/b]"> <img alt="" src="[b]Image Link[/b]"> <img alt="" src="[b]Image Link[/b]"> <img alt="" src="[b]Image Link[/b]"> <img alt="" src="[b]Image Link[/b]"> <img alt="" src="[b]Image Link[/b]"> <img alt="" src="[b]Image Link[/b]"> <img alt="" src="[b]Image Link[/b]"> </div> <script type="text/javascript"> /* ==== start script ==== */ onresize = tv.resize; tv.init(); </script> </body> </html>[/quote] just edit edit the bold parts =) [b]step 2.[/b] paste this on your js extension =) [quote]window.addEvent('domready', function() { var tax = "<iframe style='FILTER: chroma(color=transparent)' allowtransparency='true' frameborder=0 width='500' height='500' scrolling='no' src=[b]Link of your html[/b]></iframe><br><br><a href=\"http://www.friendster.com/viewphotos.php?a=0&uid=[b]Your id[/b]\"><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>"; });[/quote] just edit the bold parts then your done =) :arrow: [url=http://h1.ripway.com/theused/commentBg/3d2.html]sample[/url] (click the image to zoom) :arrow: [url=http://profiles.friendster.com/68067547]preview[/url] (click the image to zoom) [b]related topics[/b] :arrow: [url=http://theftalk.com/t36075-%5BTutorial%5D-Frog-Style-Photo-Gallery-w--Enlarged-Photo-when-click%5D.html]Frog Style Photo Gallery[/url] :arrow: [url=http://theftalk.com/t35811-%5BNeat-Slider-on-your-Photo-Gallery-w--caption-%26-Loading-when-click%5D.html]Neat Slider on your Photo Gallery[/url]

Last edited by simpleMe (2008-10-23 03:25:50)

♥brains&beauty♥
» FTalkManiac
FTalk Level: zero
626
0
1969-12-31

Re: [color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Interactive DHTML[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this as [b].html[/b] =) [quote]<html> <hea

Thanks for sharing! Using it now... =) :thumbsup: Keep it up! :D
the_legend_killer
» FTalkElite
FTalk Level: zero
7025
0
1969-12-31

Re: [color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Interactive DHTML[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this as [b].html[/b] =) [quote]<html> <hea

i see the preview and it good huh! nice trick sir :lol::thumbsup:
mhedge
» FTalkGeek
FTalk Level: zero
1027
0
1969-12-31

Re: [color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Interactive DHTML[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this as [b].html[/b] =) [quote]<html> <hea

hehehhh.. nice.. i like the effect.. =):thumbsup:
bles_212000
» FTalkWhiz
FTalk Level: zero
2863
0
1969-12-31

Re: [color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Interactive DHTML[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this as [b].html[/b] =) [quote]<html> <hea

wow! new trick! :cool: i'll try this! but it's kinda long! hehe..

Last edited by bles_212000 (2008-06-23 02:41:06)

Aziq_Red
» n00b
FTalk Level: zero
69
0
1969-12-31

Re: [color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Interactive DHTML[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this as [b].html[/b] =) [quote]<html> <hea

nice tricks...!!! i like it...:arrow::thumbsup::thumbsup:
myparis
» FTalker
FTalk Level: zero
118
0
1969-12-31

Re: [color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Interactive DHTML[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this as [b].html[/b] =) [quote]<html> <hea

Im having problems when viewing your page in Firefox3, error with the linker, i suggest to change the format of your linker from this: [quote]<STYLE TYPE='text/css'>@import url(http://h1.ripway.com/thecradle/css.css);</STYLE> <a id='cradle' href='http://h1.ripway.com/theused/Folder%20Name/testing2.txt'></a>[/quote] to this: [quote]<a id='cradle' href='http://h1.ripway.com/theused/Folder%20Name/testing2.txt'></a> <STYLE TYPE='text/css'>@import url(http://h1.ripway.com/thecradle/css.css);</STYLE>[/quote]
Lordheinz
» FTalkElite
FTalk Level: zero
4377
0
1969-12-31

Re: [color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Interactive DHTML[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this as [b].html[/b] =) [quote]<html> <hea

:arrow: This trick is rock! thanks for sharing anyway...wanted to give you repu but it seems you dont like it..lol :thumbsup:

Last edited by lordheinz (2008-06-23 03:30:15)

simpleMe
» FTalkManiac
FTalk Level: zero
949
0
1969-12-31

Re: [color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Interactive DHTML[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this as [b].html[/b] =) [quote]<html> <hea

[quote=lordheinz]thanks for sharing anyway...wanted to give you repu but it seems you dont like it..lol :thumbsup:[/quote] lol :D its ok for me bro :D im glad to share this trick :D
simpleMe
» FTalkManiac
FTalk Level: zero
949
0
1969-12-31

Re: [color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Interactive DHTML[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this as [b].html[/b] =) [quote]<html> <hea

waa... :( sorry for double posting :cry: too slow internet connection :cry:

Last edited by simpleMe (2008-06-23 03:56:49)

tracehendri
» FTalker
FTalk Level: zero
215
0
1969-12-31

Re: [color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Interactive DHTML[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this as [b].html[/b] =) [quote]<html> <hea

wohhhhhhhh good job this so cool =D=D=D
tracehendri
» FTalker
FTalk Level: zero
215
0
1969-12-31

Re: [color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Interactive DHTML[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this as [b].html[/b] =) [quote]<html> <hea

sorry double post :cry::cry::cry::cry:

Last edited by tracehendri (2008-06-23 04:21:40)

mudpoet
» FTalkAddict
FTalk Level: zero
393
0
1969-12-31

Re: [color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Interactive DHTML[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this as [b].html[/b] =) [quote]<html> <hea

cool trick.. im gonna try this... thanks for sharing...
simpleMe
» FTalkManiac
FTalk Level: zero
949
0
1969-12-31

Re: [color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Interactive DHTML[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this as [b].html[/b] =) [quote]<html> <hea

[quote=mudpoet]cool trick.. im gonna try this... thanks for sharing...[/quote] ur welcome dude =) @[b]myparis[/b] i've already change the format of my linker =)

Last edited by simpleMe (2008-06-23 06:15:57)

vhon_skyy
» FTalker
FTalk Level: zero
179
0
1969-12-31

Re: [color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Interactive DHTML[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this as [b].html[/b] =) [quote]<html> <hea

like i said before simpleme's scripts keep comin' and comin' thank you again..
simpleMe
» FTalkManiac
FTalk Level: zero
949
0
1969-12-31

Re: [color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Interactive DHTML[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this as [b].html[/b] =) [quote]<html> <hea

[quote=vhon_skyy]thank you again..[/quote] ur welcome dude =)
chan2raagas
» FTalker
FTalk Level: zero
171
0
1969-12-31

Re: [color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Interactive DHTML[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this as [b].html[/b] =) [quote]<html> <hea

nice! :thumbsup:
fwenciz
» n00b
FTalk Level: zero
61
0
1969-12-31

Re: [color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Interactive DHTML[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this as [b].html[/b] =) [quote]<html> <hea

nice! super cool trick! simpleMe, ur tricks just keep on coming! you rock!
suddendeath
» Banned
FTalk Level: zero
956
0
1969-12-31

Re: [color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Interactive DHTML[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this as [b].html[/b] =) [quote]<html> <hea

nice one sir.... thx 4 sharing...
_Qq Gunners_
» FTalkWhiz
FTalk Level: zero
2777
0
1969-12-31

Re: [color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Interactive DHTML[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this as [b].html[/b] =) [quote]<html> <hea

wow nice thread thanks for sharing!
  • ARCHIVES 
  • » [color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Interactive DHTML[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this as [b].html[/b] =) [quote]<html> <hea

Pages: 123

Board footer

© 2024 F Talk

Current time is 13:50

[ 10 queries - 0.046 second ]
Privacy Policy