Works Best If You're A Set User (Media Box Only).

Requirements:

Image Editor (Paint Shop, Photoshop, GIMP etc...).
Knowledge regarding .js Extension.
Patience.

Step one:

Paste this on your Add Media field.

Code:

<div id='wakiwkiw'>Loading Photo Gallery...</div>

Note: You can replace the word Loading Photo Gallery... with an image or whatever you want.

Press Save.

Step two:

Open a New Text Document and paste this code.

Code:

function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url}}

function warp(){
window.location=gotolink}

var myimages=new Array()
var gotolink="#"

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]}}

preloadimages("http://i33.tinypic.com/ae89cz.jpg","http://i38.tinypic.com/v3g0g0.jpg","http://i37.tinypic.com/29ap1cl.jpg")

Step 3:

On the code I gave...

You will see...

https://2img.net/h/oi33.tinypic.com/ae89cz.jpg
https://2img.net/h/oi38.tinypic.com/v3g0g0.jpg
https://2img.net/h/oi37.tinypic.com/29ap1cl.jpg

Replace those with images with the exact height. At least 300px Height width proper Width Properties.

Example:

Spoiler:

Notice, that the images are same on height.

Step four:

After modifying the code, by replacing the old images with new images with the same height.

Paste this again on the code.

Code:

function friends(){var ephemeral = "<br><a href='javascript:warp()'><img src='http://i36.tinypic.com/24uyceu.png'alt='Photo Gallery' name='targetimage' border='0'></a><br><br><a href='link' onMouseover='changeimage(myimages[0],this.href)'target='_blank'><img src='http://i33.tinypic.com/ae89cz_th.jpg'style='height:80px;width:auto!important'></a><a href='link' onMouseover='changeimage(myimages[1],this.href)'target='_blank'><img src='http://i38.tinypic.com/v3g0g0_th.jpg'style='height:80px;width:auto!important'></a><a href='link' onMouseover='changeimage(myimages[2],this.href)'target='_blank'><img src='http://i37.tinypic.com/29ap1cl_th.jpg'style='height:80px;width:auto!important'></a>";
document.getElementById('wakiwkiw').innerHTML = "<table width='100%'><tr><td align='center'>"+ephemeral+"</td></tr></table>";
}setTimeout("friends()",4000);

Replace this with your starting image.

https://2img.net/h/oi36.tinypic.com/24uyceu.png

Example:

Spoiler:

Replace:

https://2img.net/h/oi33.tinypic.com/ae89cz_th.jpg
https://2img.net/h/oi38.tinypic.com/v3g0g0_th.jpg
https://2img.net/h/oi37.tinypic.com/29ap1cl_th.jpg

With smaller images that represents the big images before.

Example:

Spoiler:

Replace the link on the Change the link on
Change the link on

Code:

<a href='link'

with your own link or your friend's ID.

Code:

<a href='http://www.yagle.com' onMouseover='changeimage(myimages[0],this.href)'target='_blank'>

or

<a href='USERID' onMouseover='changeimage(myimages[0],this.href)'target='_blank'>

Remember to include the http:// on the outside links.

Step five:

After changing what's needed. Save as... Filename.js and upload on a hosting site.

Get the .js URL and apply to a linker...

http://Azt3chG0dz.googlepages.com/wak0k0nuts.js

Applied to...

Code:

<script src='.js'></script>

Will look like this...

Code:

<script src='http://Azt3chG0dz.googlepages.com/wak0k0nuts.js'></script>

Preview of idea:

http://profiles.friendster.com/37865775#10

Just ask if you're confused...

Note:
You can add more images to the code. Just ask here for more info.

nice share! i lovelove it. haha~ the preview too.

LMAO. anyways. im using this:] haha.
still working on it though~

oh oh. soo cool. very very nice. XD
super love the preview.
ill try this when im doing absolutely nothin'. LMAO~

^ HAHAHA~

yay! im done. HAHAHA.
again, THANKYOUU so muchh fer the share, ephemeral. LOLness. love the username.

woot .. coool ..thanks for sharing . hahaha ..


@bunny : change this part :

Code:

<a href='link'

so that it wont go to http://profiles.friendster.com/link when clicked . hehe ..


this trick i think is best for featuring ur friends ..

^What Version of IE are you using?

I forgot. Change the link on <a href='link' to the user ID of your friend.

Example:

<a href='34839015' blah blah blah...

Thanks for the reminder sir admin.

^ie version 7. lmao. ~

Wait. I will update the code. It seems IE doesn't accept the auto property. Even IE8.

^aryt, aryt. thankyouuu so much.

Done with the update.

On your code, you will see...

Code:

height='80' width='auto'

It can be found on every image link on the code...

Replace those with the bold text with this...

Code:

style='height:80px;width:auto!important'

^thanks, forbidden.

wow very nice ..

cool !!! thanks for sharin

it works...thanks...

w0w coolll thanks for sharing bro keep helping

whhheeeeeewww... thanks for sharin. :))

i cnt understand it.
but i'll try to use this.
nice.
:)

do i need to paste the code on step 4 on the code on the step 3??

wahhah...
medyo mahirap intindihin..
pero ill give my best..
gagawin ko talaga toh..
BTW..
thanks for sharin!!

thanks!!!!!!!

how do you add pics? hehe confused :S

... i cant... if i save .js file in my file hosting.....my account is suspended like my other account before... help me

nice :))
good job.


you better view my fs
http://profiles.friendster.com/lorrainecarla
http://profiles.friendster.com/lorrainecarla
http://profiles.friendster.com/lorrainecarla
http://profiles.friendster.com/lorrainecarla
http://profiles.friendster.com/lorrainecarla
http://profiles.friendster.com/lorrainecarla
http://profiles.friendster.com/lorrainecarla
http://profiles.friendster.com/lorrainecarla
http://profiles.friendster.com/lorrainecarla
http://profiles.friendster.com/lorrainecarla
http://profiles.friendster.com/lorrainecarla