Javascript editing?

tom982 · May 20, 2010

I have recently started learning javascript and I came across this script and I would like it to be changed but I don't know how. At the moment, the script rotates images around a central image and on mouseover the rotating images slow down, and when you click on them it displays the image in the centre. Its essentially a snazzy gallery type script. Instead of displaying the image in the centre, I would like to put my website's logo in the middle with images rotating around it, and when those images are clicked on, they are hyperlinks.

This is my current HTML script:

<html><head><title>Gallery Example</title></head>
<body style="background-color:rgb(0,0,0)">
<script type="text/javascript" src="gallery.js"></script>
Image Gallery:<br />
<div id="gallery" onMouseOver="gOver[0]=1;" onMouseOut="gOver[0]=0;" style="position:relative;background-color:rgb(255,255,255);width:500px;height:500px">
<img id="gallery_viewer" src="images/Artwork.jpg" style="width:300px;height:300px;position:absolute;top:100px;left:100px;z-index:180" />
<img onClick="viewImage(this)" src="../images/Home.png" style="width:75px;height:75px" />
<img onClick="viewImage(this)" src="../images/Star.jpg" style="width:75px;height:75px" />
<img onClick="viewImage(this)" src="../images/Search.jpg" style="width:75px;height:75px" />
<img onClick="viewImage(this)" src="../images/Contact.png" style="width:75px;height:75px" />
<img onClick="viewImage(this)" src="images/home.png" style="width:75px;height:75px" />
<img onClick="viewImage(this)" src="images/Artwork.jpg" style="width:75px;height:75px" />
<img onClick="viewImage(this)" src="images/Artwork.jpg" style="width:75px;height:75px" />
<img onClick="viewImage(this)" src="images/about.png" style="width:75px;height:75px" />
<img onClick="viewImage(this)" src="images/Artwork.jpg" style="width:75px;height:75px" />
<img onClick="viewImage(this)" src="images/Artwork.jpg" style="width:75px;height:75px" />
</div>
</td>
</tr>
</table>
<script type="text/javascript">
galleryLoad(0,"gallery");
</script>
</body>
</html>

This is the Javascipt for the rotating images (gallery.js):

var gCenterX=new Array();
var gCenterY=new Array();
var gXRadius=new Array();
var gYRadius=new Array();
var gSpeed=new Array();
var gPos=new Array();
var gTarPos=new Array();
var gMin=new Array();
var gMax=new Array();
var gOver=new Array();
var gXMul=0.4;
var gYMul=0.1;
var gSmallScale=0.2;
function galleryLoad(uid,galleryid) {
gPos[uid]=0;
gSpeed[uid]=0;
gTarPos[uid]=0;
gOver[uid]=0;
var gallery = document.getElementById(galleryid);
var width = parseInt(gallery.style.width);
var height = parseInt(gallery.style.height);
gCenterX[uid]=width*0.5;gCenterY[uid]=height*0.8;gXRadius[uid]=width*gXMul;gYRadius[uid]=height*gYMul;
var Images=gallery.getElementsByTagName("img");
for(i=0;i<=(Images.length-1);i++){
if(Images.id!=(galleryid+"_viewer")) {
gMin[uid]=Math.round(parseInt(Images.width)*0.25);
gMax[uid]=Math.round(5*(gMin[uid]));
Images.style.position="absolute";
Images.style.cursor="hand";
}
}
setTimeout("gspin("+uid+",'"+galleryid+"')",50);
}
function gspin(uid,gid) {
var gallery = document.getElementById(gid);
gSpeed[uid]-=(gOver[uid]) ? 0.2 : -0.1;
if(gSpeed[uid]>3){gSpeed[uid]=3}
if(gSpeed[uid]<0){gSpeed[uid]=0}
gPos[uid]+=gSpeed[uid];
if(gPos[uid]>=361){gPos[uid]=0;}
if(gPos[uid]<=-1){gPos[uid]=360;}
var Images=gallery.getElementsByTagName("img");
for(i=0;i<=(Images.length-1);i++){
if(Images.id!=(gid+"_viewer")) {
var ent=Images;
var P=(Math.PI*2)/360;
var Position=gPos[uid]-(360/(gallery.getElementsByTagName("img").length-1))*i;
Position = (Position<0)?Position+360:Position;
Position = (Position>360)?Position-360:Position;
var EntPos=P*Position;
ent.style.zIndex = 180-Math.round(Math.cos(EntPos)*180);
ent.style.width = Math.round(gMax[uid]-(0.5+Math.cos(EntPos)/2)*(gMax[uid]-gMin[uid]));
ent.style.height = Math.round(gMax[uid]-(0.5+Math.cos(EntPos)/2)*(gMax[uid]-gMin[uid]));
ent.style.left=Math.round((gCenterX[uid]+Math.sin(EntPos)*gXRadius[uid])-ent.width/2);
ent.style.top=Math.round((gCenterY[uid]+Math.cos(EntPos)*-gYRadius[uid])-ent.height/2);
ent.style.opacity = (1/(gYRadius[uid]*2))*(parseInt(ent.style.top)-(gCenterX[uid]-gYRadius[uid]))-1;
}
}
setTimeout("gspin("+uid+",'"+gid+"')",50);
}
function viewImage(img) {
var gallery = img.parentNode.id;
document.getElementById(gallery+"_viewer").src=img.src;
}

Any help would be greatly appreciated

Javascript editing?

tom982

٩(͡๏̯͡๏)۶

My Computer

System One