friendsterTalk - Friendster Forum

friendsterTalk - Friendster Forum

Welcome guest! Please Login or Register.

Pages: 1

 

#1  2008-09-03 05:32:23

chardlau
» FriendsterNewbie
chardlau's display avatar
Registered: 2008-05-04
Posts: 49
Last visit: 2008-11-26
Reputation: 4

Simple 3D carousel of your Friends Photo

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 : MOOTOOLS - upload in your JS folder named it to mootools.js
Save this code :  -upload in your JS folder named it to 3dcarousel.js

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++
}

adjust the variable baseSpeed, radiusX, radiusY, centerX and centerY


Copy the code and named it to 3dcarousel.html and upload in your hosting site.

<!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>

you may add more picture by inserting this code inside div section.

Code:

<div><a href="URL OF YOUR FRIENDS"><img src="URL OF YOUR FRIENDS PHOTO" /></a></div>

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.

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>";

Replace URL

PROFILE PREVIEW
best viewed with Firefox

Last edited by chardlau (2008-09-03 12:22:05)

CLICK MY SIGS TO VIEW MY PROFILE. FIREFOX ONLY


-Offline-
 

#2  2008-09-03 09:46:13

tomzquad
» FriendsterNewbie
Registered: 2008-07-17
Posts: 3
Last visit: 2008-10-12
Reputation: ~

Re: Simple 3D carousel of your Friends Photo

wew,.,. nice trIk,.,.,

-Offline-
 

#3  2008-09-03 10:24:27

gratitude1
» Promoter
gratitude1's display avatar
› I LOEV My 3 Daduds
› The Scandalers
Registered: 2008-02-09
Posts: 1700
Reputation: 215

Re: Simple 3D carousel of your Friends Photo

nice scirpt
tnx for sharing..!

I LOEV <3

 

#4  2008-09-03 11:19:19

---xXirukiTepe---
» FriendsterElite
---xXirukiTepe---'s display avatar
› Ill Shoot Your Veins >_<
› Naruto Fanz-ShinobiElite
Location: KARAKURA TOWN
Registered: 2007-11-01
Posts: 3750
Reputation: 440
Friendster

Re: Simple 3D carousel of your Friends Photo

wow another mootools... trick..


Mou Hitori no Kimi e
N ∅ ∑ I N
TRUE: Somebody hacked my other fs account! Grrr! add my new 1
 

#5  2008-09-03 12:00:00

krjalagat
» FriendsterAddict
krjalagat's display avatar
› need a girl
› Alchemy Explicit AE
Location: My Computer
Registered: 2008-05-12
Posts: 343
Last visit: 2008-11-25
Reputation: 2

Re: Simple 3D carousel of your Friends Photo

nice trick!!
maybe ill use this one after i study tonight


:thumbsup::thumbsup:WATCH FULL EPISODES OF YOUR FAVORITE ANIME:thumbsup::thumbsup:

-Offline-
 

#6  2008-09-03 12:44:46

cklahrckiey
» FriendsterFreak
cklahrckiey's display avatar
› Tha Mafia
› Class-S
Location: Lea's Heart
Registered: 2007-11-21
Posts: 1715
Reputation: 34

Re: Simple 3D carousel of your Friends Photo

cool carousel bro...hehehe
i've seen the preview and great :D



"You hit me, we hit you!"
 

#7  2008-09-03 13:09:25

darylldelfin
» Promoter
darylldelfin's display avatar
› -tentenenen!! XD
Location: -MARS-
Registered: 2008-02-29
Posts: 1612
Reputation: 142
Friendster

Re: Simple 3D carousel of your Friends Photo

nice indeed ... =| 


the other gallery on the preview is wicked ..

not for kids .. :lol:

Oh Hiatus .. Haha . :]]
 

#8  2008-09-03 13:55:42

chardlau
» FriendsterNewbie
chardlau's display avatar
Registered: 2008-05-04
Posts: 49
Last visit: 2008-11-26
Reputation: 4

Re: Simple 3D carousel of your Friends Photo

darylldelfin wrote:

nice indeed ...   


the other gallery on the preview is wicked ..

not for kids ..

:lol: Oh im sorry.. some of my gallery pics contains nudity and are not suitable for kids. Parental Guidance is advised.

Last edited by chardlau (2008-09-03 14:33:01)

CLICK MY SIGS TO VIEW MY PROFILE. FIREFOX ONLY


-Offline-
 

#9  2008-09-04 06:01:23

killxromance
» FriendsterAddict
killxromance's display avatar
› Smile mo kita ko :)
› Friendstertalk University
Location: . . .
Registered: 2008-07-21
Posts: 454
Last visit: Yesterday
Reputation: 6
Friendster

Re: Simple 3D carousel of your Friends Photo

nice trick

thnk's more more!




KILL X ROMANCE



[ PAG FRIENDSTERTALK UNIVERSITRY KA! ]
[ ARTISTA KA!! ]
:lol:

-Offline-
 

#10  2008-09-28 10:43:51

exeyulianto
» FriendsterNewbie
Registered: 2008-09-28
Posts: 1
Last visit: 2008-09-28
Reputation: ~

Re: Simple 3D carousel of your Friends Photo

paste where..???

-Offline-
 

#11  2008-09-28 12:52:40

exceed
» Banned
Registered: 2008-01-13
Posts: 69
Last visit: 2008-10-07
Reputation: ~

Re: Simple 3D carousel of your Friends Photo

faboluos :clap: :clap: your the man..we can adjust the size of the images right? and how many images should it be..

-Offline-
 

#12  2008-09-28 16:43:11

darkhangelsk
» FriendsterNewbie
Registered: 2008-09-28
Posts: 2
Last visit: 2008-10-18
Reputation: ~

Re: Simple 3D carousel of your Friends Photo

nice one!!! =)  .... sana magamit ko din.. hehehehe

-Offline-
 

#13  2008-10-03 04:04:17

mickmeek
» FriendsterTalker
mickmeek's display avatar
› Naruto Fanz-ShinobiElite
Location: Valley of Screams
Registered: 2007-12-21
Posts: 143
Last visit: 2008-11-25
Reputation: 6
Friendster

Re: Simple 3D carousel of your Friends Photo

very nice trick..i'll try this later!


I'm longing for you my long lost pest
friend.....

-Offline-
 

#14  2008-10-14 08:45:25

lizzie9201
» FriendsterAddict
lizzie9201's display avatar
› [anime.manga.rockmusic]
› Rockstars
Location: philippines
Registered: 2008-10-03
Posts: 369
Last visit: Today
Reputation: 7
Friendster

Re: Simple 3D carousel of your Friends Photo

wow.. nyc trick..

i'd like to try this one..

=):thumbsup:



-Offline-
 

#15  2008-11-07 15:27:47

xoxotam
» FriendsterTalker
xoxotam's display avatar
› i cant trust anybody
Location: come and see me
Registered: 2008-02-22
Posts: 179
Last visit: 2008-11-23
Reputation: 1

Re: Simple 3D carousel of your Friends Photo

hey...is it workin when your using hide codes?? ^^



ShoutOut: "Believe on your knowledge"


-Offline-
 

 

Pages: 1

Search Friendstertalk

Board footer

FriendsterTalk is not affiliated with Friendster.com
Copyright © 2002–2008 PunBB

[ 23 queries - 0.765 second ]

Pay Per Click Ads by pay per click advertising by Kontera

FriendsterTalk.com x

Welcome to FriendsterTalk! You'll need to login in order to fully use all the features and view all the sections of this site.

Please register if you're not yet a member. =)