Pages: 1
Mods close this topic if repost.. First go to your hosting site and create a folder named it to "js" were going to put two of js codes 3Dcarousel and mootools. Download this : [url=http://h1.ripway.
You are viewing a post by chardlau. View all 15 posts in Mods close this topic if repost.. First go to your hosting site and create a folder named it to "js" were going to put two of js codes 3Dcarousel and mootools. Download this : [url=http://h1.ripway..
2008-09-03 01:32:23
- chardlau
- » n00b
38
0
1969-12-31
Mods close this topic if repost.. First go to your hosting site and create a folder named it to "js" were going to put two of js codes 3Dcarousel and mootools. Download this : [url=http://h1.ripway.
Mods close this topic if repost..
First go to your hosting site and create a folder named it to "js" were going to put two of js codes 3Dcarousel and mootools.
Download this : [url=http://h1.ripway.com/chardlau/js/mootools.js]MOOTOOLS[/url] - upload in your JS folder named it to mootools.js
Save this code : -upload in your JS folder named it to 3dcarousel.js [spoiler]var count = 0;
var baseSpeed = 0.05;
var radiusX = 190;
var radiusY = 40;
var centerX = 300;
var centerY = 90;
var speed = 0.3;
var imageDivs = '';
var numberOfElements = 0;
var carousel = '';
var speedTest = '';
window.addEvent('domready', function(){
carousel = $('carousel');
speedTest = $('speedTest');
imageDivs = carousel.getElementsByTagName("div");
numberOfElements = imageDivs.length;
setInterval('startCarousel()',40);
carousel.addEvent('mousemove', onMouseMove.bindWithEvent( carousel ));
});
function onMouseMove( evt ) {
tempX = evt.client.x;
speed = (tempX - centerX) / 2500;
}
function startCarousel(){
for(i=0; i < numberOfElements; i++){
angle = i * ( Math.PI * 2 ) / numberOfElements;
imageDivsStyle = imageDivs[ i ].style;
imageDivsStyle.position='absolute';
posX = ( Math.sin( count * ( baseSpeed * speed ) + angle )* radiusX + centerX );
posY = ( Math.cos( count * ( baseSpeed * speed ) + angle )* radiusY + centerY );
imageDivsStyle.left = posX+"px";
imageDivsStyle.top = posY+"px"
imageDivWidth = posY/3;
imageDivZIndex = Math.round(imageDivWidth)+100;
imageDivsStyle.width = imageDivWidth+'px';
imageDivsStyle.zIndex = imageDivZIndex;
angle += speed;
}
count++
}[/spoiler]
adjust the variable baseSpeed, radiusX, radiusY, centerX and centerY
Copy the code and named it to 3dcarousel.html and upload in your hosting site.
[spoiler]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mootools 3D Carousel</title>
<style>
#carousel{
background-color:#FFFFFF;
width:600px;
height:300px;
position:relative;
border:1px solid #FFFFFF;
}
img{
width:95px;
height:95px;
border:0px solid #FFFFFF;
display:block;
}
</style>
<script src="js/mootools.js" type="text/javascript"></script>
<script src="js/3dcarousel.js" type="text/javascript"></script>
</head>
<body>
<div id="carousel">
<div><a href="URL OF YOUR FRIENDS"><img src="URL OF YOUR FRIENDS PHOTO" /></a></div>
<div><a href="URL OF YOUR FRIENDS"><img src="URL OF YOUR FRIENDS PHOTO" /></a></div>
<div><a href="URL OF YOUR FRIENDS"><img src="URL OF YOUR FRIENDS PHOTO" /></a></div>
<div><a href="URL OF YOUR FRIENDS"><img src="URL OF YOUR FRIENDS PHOTO" /></a></div>
<div><a href="URL OF YOUR FRIENDS"><img src="URL OF YOUR FRIENDS PHOTO" /></a></div>
<div><a href="URL OF YOUR FRIENDS"><img src="URL OF YOUR FRIENDS PHOTO" /></a></div>
</div>
</body>
</html>[/spoiler]
you may add more picture by inserting this code inside div section.
<">Please adjust width and height of the carousel and img at the style section as well as background.
I used 650px because my box is 650 width and for images you may adjust in any size.
finally, insert this code in your JS extension.
[spoiler]var pogsit = "<iframe style='FILTER: chroma(color=transparent)' allowtransparency='true' frameborder=0 width='100%' height='250' scrolling='no' src=URL OF YOUR HTML FILE></iframe>";
document.getElementById('content_2').style.height='250px';
document.getElementById('content_2').style.overflowY='hidden';
document.getElementById('content_2').innerHTML = "<table width='100%'><tr><td align='center'>"+pogsit+"</td></tr></table>";[/spoiler]
Replace URL
[url=http://www.friendster.com/68405447]PROFILE PREVIEW[/url]
best viewed with Firefox
Last edited by chardlau (2008-09-03 08:22:05)
 |