- 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
[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
- ghettochild
- » n00b
55
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=simpleMe]u didn't follow the step 1[/quote]
I did... in fact here's my html :http://h1.ripway.com/ghettochic/pix.html
<">The html file works but i couldnt get it toappear on my profile ... i think it has something to do withthe box positioning or the onload handler.... please help.... ive tried addbox generator, ive also compiled the tracker and css and made a separate js file for the gallery.... but doesnt seem to work... 
Last edited by ghettochild (2008-09-07 03:32:19)
 |
- simpleMe
- » FTalkManiac
- 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
^ read first posts again 
this is not what you save as [b].html[/b] 
<">
this is not what you save as [b].html[/b]
<">
|
- ghettochild
- » n00b
- 55
- 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 about the confusion .. i must have replaced the pix.html with the wrong script while i was troubleshooting
ok now i have amended pix.html acordingly: http://h1.ripway.com/ghettochic/pix.html
it should now be up and running. but still wont appear on my profile. and here's the onload handler part which is on the accordion tracker that im using:
<">I can see from my browser's status bar that the images are dowloading but theyre not showing up on my profile. any thoughts please?
|
- simpleMe
- » FTalkManiac
- 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
this is what you save as [b]pix.html[/b]
[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="[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>[/spoiler]
just edit the bold parts
[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="[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>[/spoiler]
just edit the bold parts
|
- ghettochild
- » n00b
- 55
- 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
yup thats done 
http://h1.ripway.com/ghettochic/pix.html
[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="http://h1.ripway.com/ghettochic/images/pics/1_920755665l.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/chikkaz.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/HotShot6546.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/HotShot6739.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Image010.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/imi1.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/imi2.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/imi5.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4274.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4275.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4281.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4286.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4289.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4293.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4295.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4329.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4341.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan5267.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan5817.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan6059.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan6112.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan6189.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/wahaha.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/webcam1.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/winter.jpg">
</div>
<script type="text/javascript">
/* ==== start script ==== */
onresize = tv.resize;
tv.init();
</script>
</body>
</html>[/spoiler]
but still it wont appear on my profile.
can i save the following part as a .js?
<">
http://h1.ripway.com/ghettochic/pix.html
[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="http://h1.ripway.com/ghettochic/images/pics/1_920755665l.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/chikkaz.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/HotShot6546.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/HotShot6739.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Image010.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/imi1.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/imi2.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/imi5.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4274.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4275.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4281.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4286.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4289.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4293.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4295.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4329.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4341.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan5267.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan5817.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan6059.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan6112.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan6189.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/wahaha.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/webcam1.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/winter.jpg">
</div>
<script type="text/javascript">
/* ==== start script ==== */
onresize = tv.resize;
tv.init();
</script>
</body>
</html>[/spoiler]
but still it wont appear on my profile.
can i save the following part as a .js?
<">
Last edited by ghettochild (2008-09-07 05:23:55)
|
- simpleMe
- » FTalkManiac
- 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
^ are you sure its done?
why it appears like this 
http://h1.ripway.com/ghettochic/pix.html
it should be like this http://h1.ripway.com/retch/pix.html
http://h1.ripway.com/ghettochic/pix.html
it should be like this http://h1.ripway.com/retch/pix.html
|
- ghettochild
- » n00b
- 55
- 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
on my end my link and the one that youve given are identitical ....
are you seeing addbox and those sorta stuff? maybe refresh the page...
its now working... i added this under the onload handler:
<">got it from ur other tutorial.. i was just luck i guess!!!! yeeeeeeeeeeeeeeeeeeeeeeeeeeeey.
thanks for the script and help simpleme ur a [u][b]Star!![/b][/u]
Last edited by ghettochild (2008-09-07 05:49:04)
|
- simpleMe
- » FTalkManiac
- 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
i suggest make new
save this as [b].html[/b]
[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="http://h1.ripway.com/ghettochic/images/pics/1_920755665l.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/chikkaz.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/HotShot6546.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/HotShot6739.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Image010.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/imi1.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/imi2.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/imi5.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4274.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4275.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4281.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4286.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4289.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4293.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4295.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4329.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4341.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan5267.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan5817.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan6059.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan6112.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan6189.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/wahaha.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/webcam1.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/winter.jpg">
</div>
<script type="text/javascript">
/* ==== start script ==== */
onresize = tv.resize;
tv.init();
</script>
</body>
</html>[/spoiler]
then heres your js file
[spoiler]function onProfileLoad() {
//onload handler
//(pattern) addBox("L-R","Header",htm,"cssid","sibling");
addBox("RIGHT",pageOwnerFName+"'s Visitors",TRACKER.div.innerHTML,"tracker",null);
//other boxes goes here
var tax = "<iframe style='FILTER: chroma(color=transparent)' allowtransparency='true' frameborder=0 width='500' height='500' scrolling='no' src=[b]Link of .html here[/b]></iframe><br><br><a href=\"http://www.friendster.com/viewphotos.php?a=0&uid=2951037\"><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>";
}
/*TRACKER OBJECT*/
if (typeof TRACKER == "undefined") { TRACKER = {}; }
TRACKER = {
style: {
filter: "chroma(color='#FFFFFF')",
width: '300px',
height: '520px',
border: '0px',
overflow: 'hidden'
},
attributes: {
frameborder: '0',
allowtransparency: 'true'
},
phplink: "http://h1.ripway.com/ghettochic/tracker/tracker.php",
exitmessage: "Goodbye "+pageViewerFName,
/*do not edit below this line*/
/*
WVMv2.1
by marfillaster, copyright 2007 friendster.com/mumbhaki
credits: feruzz, renalvir(pimped), nopathz, friendstertalk.com, friendster.com
licensed under GNU General Public License, version 2 http://www.gnu.org/licenses/gpl.html
Disclaimer: NO GUARANTEE and WARRANTY provided! For educational purposes only. Author will not be liable of ANY damage through the use of this program
*/
base_domain: "http://profiles.friendster.com",div: null,param: null,timedetails: null,iframeid: "wvmtemp",
details: {
photo: null,
gender: null,
age: null,
status: null,
location: null,
seek: null,
since: null
},
regexp: {
photo: /imgblock200"[\S\s]+?img src="([\S\s]+?)"/i,
gender: />([\S]*male)/i,
age: /male, ([\d]*),/i,
status: /male, [\d]*,([\S\s]*?)<\/span><\/li>/i,
location: /Location\: <\/span><a[\S\s]+?>([\S\s]+?)<\/a><\/li>/i,
seek: /In\: <\/span>([\S\s]+?)<\/li>/i,
since: /Since\: <\/span>([\S\s]+?)<\/li>/i
},
init: function() {
getElementsByClass(/commonbox[\s]*?controlpanel/i,null,"DIV")[0].innerHTML+="<iframe id=\""+this.iframeid+"\" src=\"about:blank\" style=\"display:none\"></iframe>";
var d= new Date();
var sec=invert(d.getTimezoneOffset()*60);
var hr=invert(d.getTimezoneOffset()/60);
this.timedetails="oss="+sec+"&osh="+hr;
var ifsrc=this.phplink+"?"+this.timedetails;
var atr="";
var sty="";
for (val in this.attributes) {
atr += val +"="+ this.attributes[val]+" ";
}
for (val in this.style) {
sty += val +":"+ this.style[val]+";";
}
try {this.div=document.createElement("<div>")}
catch(e){this.div=document.createElement("div")}
this.div.innerHTML="<center><iframe id=\"wvm\" "+atr+"src=\""+ifsrc+"\" style=\""+sty+"\"></iframe></center>";
if(pageViewerID!=pageOwnerID) if(pageViewerID!="")this.getDETAILS();
},
getDETAILS: function() {
processAjaxRequest("GET",this.base_domain+"/user.php?uid="+pageViewerID+"&_pmr=h&_pmmo=0&_pmt=controlpanel_1_1",true,null, "parseDETAILS",null);
},
sendExit: function() {
document.getElementById(this.iframeid).src=this.phplink+this.param+"&exit=1";
alert(this.exitmessage);
}
};
function parseDETAILS(htm) {
if(!htm) {
TRACKER.getDETAILS();
return;
}else {
for (val in TRACKER.details) {
try {
TRACKER.details[val]=encodeURIComponent(new RegExp(TRACKER.regexp[val]).exec(htm)[1]);
}
catch(e) {
TRACKER.details[val]="";
}
}
TRACKER.param="?owner="+pageOwnerID+"&id="+pageViewerID+"&name="+pageViewerFName+"&url="+TRACKER.details.photo.replace(/m.jpg/gi,"t.jpg")+"&gender="+TRACKER.details.gender+"&age="+TRACKER.details.age+"&status="+TRACKER.details.status+"&country="+TRACKER.details.location+"&seek="+TRACKER.details.seek+"&since="+TRACKER.details.since;
document.getElementById(TRACKER.iframeid).src=TRACKER.phplink+TRACKER.param;
}
}
if (!attachOnLoadHandler(function(){onProfileLoad()})) window.onload = function(){onProfileLoad()};
TRACKER.init();
if(pageViewerID!=pageOwnerID) if(pageViewerID!="") document.write("<body onbeforeunload='TRACKER.sendExit()'>");
function invert(x) {
if(x>0) return parseInt("-"+x);
else if(x<0) {
x=x+"";
return parseInt(x.substr(1,x.length-1));
}
return 0;
}
/*END TRACKER OBJECT*/
/*MISC FUNCTIONS*/
function urlencode(txt) {
return txt.replace(/ /g,"%20").replace(/'/g,"%60").replace(/</g,"%3C").replace(/>/g,"%3E");
}
function processAjaxRequest(type,url,cont,param,handler,handlerparam) {
//by marfillaster
//type 'POST' | 'GET'
//cont 'true' | 'false'
//param string | null
//handler string | null
//handlerparam string |null
if(handlerparam) handlerparam=","+handlerparam;
else handlerparam="";
var httprequest= window.XMLHttpRequest? new XMLHttpRequest():new ActiveXObject("Msxml2.XMLHTTP");
if(handler) eval("httprequest.onreadystatechange=function(){if (httprequest.readyState==4) {"+handler+"(httprequest.responseText"+handlerparam+");}}");
httprequest.open( type, url, cont);
if(type=="POST") {
httprequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
httprequest.setRequestHeader("Content-length", param.length);
httprequest.setRequestHeader("Connection", "close");
}
httprequest.send(param);
}
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp(searchClass);
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
/*END MISC FUNCTIONS*/
function addBox (type,head,htm,id,sibling) {
//by marfillaster
//type "LEFT" | "RIGHT"
//head header string
//htm innerHTML string
//id css_id string
//sibling css_id_insertbefore string | null
/* Available default Siblings
Default "sibling_ID" Boxes for Reference (10/19/07)
LEFT RIGHT
"0" = controlpanel "15" = meettrail
"1" = photos "2" = friends
"13" = blogs "14" = googleads
"12" = reviews "7" = fan
"6" = moreabout "8" = groups
"18" = publiccomments null = appends to last(without "")
"10" = scrapbook
*/
try {
var li=document.createElement("li");
} catch(e) {
var li=document.createElement("<li>");
}
if(type=="LEFT") {
var ul=document.getElementById("0").parentNode.parentNode;
htm="<div class='boxcontent'>"+htm+"</div>";
}
else {var ul=document.getElementById("2").parentNode.parentNode;
}
li.innerHTML="<div id='"+id+"' class='commonbox "+id+"'>"+
"<h2>"+head+"</h2>"+
"<div id='content_"+id+"'>"+
htm+
"</div>"+
"</div>";
if(sibling==null) ul.appendChild(li);
else {
sibling=document.getElementById(sibling).parentNode;
ul.insertBefore(li,sibling);
}
}[/spoiler]
just edit the bold part
save this as [b].html[/b]
[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="http://h1.ripway.com/ghettochic/images/pics/1_920755665l.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/chikkaz.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/HotShot6546.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/HotShot6739.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Image010.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/imi1.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/imi2.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/imi5.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4274.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4275.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4281.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4286.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4289.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4293.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4295.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4329.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan4341.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan5267.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan5817.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan6059.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan6112.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/Larawan6189.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/wahaha.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/webcam1.jpg">
<img alt="" src="http://h1.ripway.com/ghettochic/images/pics/winter.jpg">
</div>
<script type="text/javascript">
/* ==== start script ==== */
onresize = tv.resize;
tv.init();
</script>
</body>
</html>[/spoiler]
then heres your js file
[spoiler]function onProfileLoad() {
//onload handler
//(pattern) addBox("L-R","Header",htm,"cssid","sibling");
addBox("RIGHT",pageOwnerFName+"'s Visitors",TRACKER.div.innerHTML,"tracker",null);
//other boxes goes here
var tax = "<iframe style='FILTER: chroma(color=transparent)' allowtransparency='true' frameborder=0 width='500' height='500' scrolling='no' src=[b]Link of .html here[/b]></iframe><br><br><a href=\"http://www.friendster.com/viewphotos.php?a=0&uid=2951037\"><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>";
}
/*TRACKER OBJECT*/
if (typeof TRACKER == "undefined") { TRACKER = {}; }
TRACKER = {
style: {
filter: "chroma(color='#FFFFFF')",
width: '300px',
height: '520px',
border: '0px',
overflow: 'hidden'
},
attributes: {
frameborder: '0',
allowtransparency: 'true'
},
phplink: "http://h1.ripway.com/ghettochic/tracker/tracker.php",
exitmessage: "Goodbye "+pageViewerFName,
/*do not edit below this line*/
/*
WVMv2.1
by marfillaster, copyright 2007 friendster.com/mumbhaki
credits: feruzz, renalvir(pimped), nopathz, friendstertalk.com, friendster.com
licensed under GNU General Public License, version 2 http://www.gnu.org/licenses/gpl.html
Disclaimer: NO GUARANTEE and WARRANTY provided! For educational purposes only. Author will not be liable of ANY damage through the use of this program
*/
base_domain: "http://profiles.friendster.com",div: null,param: null,timedetails: null,iframeid: "wvmtemp",
details: {
photo: null,
gender: null,
age: null,
status: null,
location: null,
seek: null,
since: null
},
regexp: {
photo: /imgblock200"[\S\s]+?img src="([\S\s]+?)"/i,
gender: />([\S]*male)/i,
age: /male, ([\d]*),/i,
status: /male, [\d]*,([\S\s]*?)<\/span><\/li>/i,
location: /Location\: <\/span><a[\S\s]+?>([\S\s]+?)<\/a><\/li>/i,
seek: /In\: <\/span>([\S\s]+?)<\/li>/i,
since: /Since\: <\/span>([\S\s]+?)<\/li>/i
},
init: function() {
getElementsByClass(/commonbox[\s]*?controlpanel/i,null,"DIV")[0].innerHTML+="<iframe id=\""+this.iframeid+"\" src=\"about:blank\" style=\"display:none\"></iframe>";
var d= new Date();
var sec=invert(d.getTimezoneOffset()*60);
var hr=invert(d.getTimezoneOffset()/60);
this.timedetails="oss="+sec+"&osh="+hr;
var ifsrc=this.phplink+"?"+this.timedetails;
var atr="";
var sty="";
for (val in this.attributes) {
atr += val +"="+ this.attributes[val]+" ";
}
for (val in this.style) {
sty += val +":"+ this.style[val]+";";
}
try {this.div=document.createElement("<div>")}
catch(e){this.div=document.createElement("div")}
this.div.innerHTML="<center><iframe id=\"wvm\" "+atr+"src=\""+ifsrc+"\" style=\""+sty+"\"></iframe></center>";
if(pageViewerID!=pageOwnerID) if(pageViewerID!="")this.getDETAILS();
},
getDETAILS: function() {
processAjaxRequest("GET",this.base_domain+"/user.php?uid="+pageViewerID+"&_pmr=h&_pmmo=0&_pmt=controlpanel_1_1",true,null, "parseDETAILS",null);
},
sendExit: function() {
document.getElementById(this.iframeid).src=this.phplink+this.param+"&exit=1";
alert(this.exitmessage);
}
};
function parseDETAILS(htm) {
if(!htm) {
TRACKER.getDETAILS();
return;
}else {
for (val in TRACKER.details) {
try {
TRACKER.details[val]=encodeURIComponent(new RegExp(TRACKER.regexp[val]).exec(htm)[1]);
}
catch(e) {
TRACKER.details[val]="";
}
}
TRACKER.param="?owner="+pageOwnerID+"&id="+pageViewerID+"&name="+pageViewerFName+"&url="+TRACKER.details.photo.replace(/m.jpg/gi,"t.jpg")+"&gender="+TRACKER.details.gender+"&age="+TRACKER.details.age+"&status="+TRACKER.details.status+"&country="+TRACKER.details.location+"&seek="+TRACKER.details.seek+"&since="+TRACKER.details.since;
document.getElementById(TRACKER.iframeid).src=TRACKER.phplink+TRACKER.param;
}
}
if (!attachOnLoadHandler(function(){onProfileLoad()})) window.onload = function(){onProfileLoad()};
TRACKER.init();
if(pageViewerID!=pageOwnerID) if(pageViewerID!="") document.write("<body onbeforeunload='TRACKER.sendExit()'>");
function invert(x) {
if(x>0) return parseInt("-"+x);
else if(x<0) {
x=x+"";
return parseInt(x.substr(1,x.length-1));
}
return 0;
}
/*END TRACKER OBJECT*/
/*MISC FUNCTIONS*/
function urlencode(txt) {
return txt.replace(/ /g,"%20").replace(/'/g,"%60").replace(/</g,"%3C").replace(/>/g,"%3E");
}
function processAjaxRequest(type,url,cont,param,handler,handlerparam) {
//by marfillaster
//type 'POST' | 'GET'
//cont 'true' | 'false'
//param string | null
//handler string | null
//handlerparam string |null
if(handlerparam) handlerparam=","+handlerparam;
else handlerparam="";
var httprequest= window.XMLHttpRequest? new XMLHttpRequest():new ActiveXObject("Msxml2.XMLHTTP");
if(handler) eval("httprequest.onreadystatechange=function(){if (httprequest.readyState==4) {"+handler+"(httprequest.responseText"+handlerparam+");}}");
httprequest.open( type, url, cont);
if(type=="POST") {
httprequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
httprequest.setRequestHeader("Content-length", param.length);
httprequest.setRequestHeader("Connection", "close");
}
httprequest.send(param);
}
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp(searchClass);
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
/*END MISC FUNCTIONS*/
function addBox (type,head,htm,id,sibling) {
//by marfillaster
//type "LEFT" | "RIGHT"
//head header string
//htm innerHTML string
//id css_id string
//sibling css_id_insertbefore string | null
/* Available default Siblings
Default "sibling_ID" Boxes for Reference (10/19/07)
LEFT RIGHT
"0" = controlpanel "15" = meettrail
"1" = photos "2" = friends
"13" = blogs "14" = googleads
"12" = reviews "7" = fan
"6" = moreabout "8" = groups
"18" = publiccomments null = appends to last(without "")
"10" = scrapbook
*/
try {
var li=document.createElement("li");
} catch(e) {
var li=document.createElement("<li>");
}
if(type=="LEFT") {
var ul=document.getElementById("0").parentNode.parentNode;
htm="<div class='boxcontent'>"+htm+"</div>";
}
else {var ul=document.getElementById("2").parentNode.parentNode;
}
li.innerHTML="<div id='"+id+"' class='commonbox "+id+"'>"+
"<h2>"+head+"</h2>"+
"<div id='content_"+id+"'>"+
htm+
"</div>"+
"</div>";
if(sibling==null) ul.appendChild(li);
else {
sibling=document.getElementById(sibling).parentNode;
ul.insertBefore(li,sibling);
}
}[/spoiler]
just edit the bold part
|
- ghettochild
- » n00b
- 55
- 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
ok thanks i saw some bugs on the previous stuff that ive done,.. im gonna try the above scripts that youve given... thanks dude you rock!
|
- anti_teror
- » FTalkAddict
- 403
- 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 trick...!!!!!
i Like it
I was waiting for the other trick
__________________________________
+1 repu to me
|
- tanchipotpot
- » FTalker
- 113
- 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! so cool photo gallery.. i wanna try this one..
.. thanks for sharing..
.. thanks for sharing..
|