Question about some Javascript Code

Anoesis · Sep 24, 2011

On a friends site there is a JavaScript carousel

Code:

///////////////////////////////////////////////////////////////////////////////////////

// START OF SCRIPT-CONFIGURATION ZONE 

//////////////////////////////////////////////////////////////////////////////////////



// Set the path and name (or URL) of your images. Add as many images as you like

// Take care that the images have a decent resolution as they are used for the zoom-images as well



rotatingimage[0]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/1.jpg"

rotatingimage[1]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/1.jpg"

rotatingimage[2]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/2.jpg"

rotatingimage[3]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/3.jpg"

rotatingimage[4]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/4.jpg"

rotatingimage[5]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/5.jpg"

rotatingimage[6]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/6.jpg"

rotatingimage[7]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/7.gif"

rotatingimage[8]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/8.jpg"

rotatingimage[9]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/1.jpg"

rotatingimage[10]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/2.jpg"

rotatingimage[11]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/3.jpg"

rotatingimage[12]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/4.jpg"

rotatingimage[13]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/5.jpg"

rotatingimage[14]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/6.jpg"

rotatingimage[15]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/7.gif"

rotatingimage[16]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/8.jpg"



// Set the the comments corresponding to the images above (requires the same amount as images!)



rotatingtext[0]="Deep blue"

rotatingtext[1]="Not as sweet as you"

rotatingtext[2]="Fly, butterfly, fly"

rotatingtext[3]="Fruit Paradise"

rotatingtext[4]="Lost in the forrest"

rotatingtext[5]="My castle is my home"

rotatingtext[6]="This is my lucky day"

rotatingtext[7]="John Lemon"

rotatingtext[8]="Free the tree"

rotatingtext[9]="Not as sweet as you"

rotatingtext[10]="Fly, butterfly, fly"

rotatingtext[11]="Fruit Paradise"

rotatingtext[12]="Lost in the forrest"

rotatingtext[13]="My castle is my home"

rotatingtext[14]="This is my lucky day"

rotatingtext[15]="John Lemon"

rotatingtext[16]="Free the tree"



// Set the the comments corresoponding to the images above (requires the same amount as images!)

// Set "#" if no link is required



rotatinglink[0]="http://www.hotscripts.com"

rotatinglink[1]="http://www.hotscripts.com"

rotatinglink[2]="http://www.hotscripts.com"

rotatinglink[3]="http://www.hotscripts.com"

rotatinglink[4]="http://www.hotscripts.com"

rotatinglink[5]="http://www.hotscripts.com"

rotatinglink[6]="http://www.hotscripts.com"

rotatinglink[7]="http://www.hotscripts.com"

rotatinglink[8]="http://www.hotscripts.com"

rotatinglink[9]="http://www.hotscripts.com"

rotatinglink[10]="http://www.hotscripts.com"

rotatinglink[11]="http://www.hotscripts.com"

rotatinglink[12]="http://www.hotscripts.com"

rotatinglink[13]="http://www.hotscripts.com"

rotatinglink[14]="http://www.hotscripts.com"

rotatinglink[15]="http://www.hotscripts.com"

rotatinglink[16]="http://www.hotscripts.com"



//<!-- change code -->

var rotatingimage=new Array()

var rotatinglink=new Array()

rotatingimage[0]='http://mnemee.com/mnemee/wp-content/uploads/2011/06/images-5.jpg';rotatinglink[0]='http://mnemee.com/mnemee/?page_id=18';rotatingimage[1]='http://mnemee.com/mnemee/wp-content/uploads/2011/06/images-6.jpg';rotatinglink[1]='http://mnemee.com/mnemee/?page_id=15';//<!-- end change code -->

Its only displaying one image, I want it to display all the images in the img folder, I'm pretty sure that its the code thats in the change code section, what do I need to change so it will display all the images.

mrgstiffler · Sep 24, 2011

You'll need to use PHP or some other server-side language if you want to read in the files from a directory. If you know the file names, or they're named consistently (image-1, image-2 ...) then you can do it with Javascript.

ShoeLace · Sep 25, 2011

Right now the last line is just overwriting the first 2 elements of 2 arrays (the image url and the link) with the values set.

A carousel in my mind is some type of gallery that rotates images in real time. Like, it would show #1 for a bit and then after x seconds it would show #2 (or maybe on left/right arrow press). The code you pasted isn't even close to emulating that functionality. Basically it's missing the entire carousel part.

Anoesis · Sep 25, 2011

ShoeLace said:
Right now the last line is just overwriting the first 2 elements of 2 arrays (the image url and the link) with the values set.

A carousel in my mind is some type of gallery that rotates images in real time. Like, it would show #1 for a bit and then after x seconds it would show #2 (or maybe on left/right arrow press). The code you pasted isn't even close to emulating that functionality. Basically it's missing the entire carousel part.

Here is the entire code

Code:

<!-- BEGINNING OF THE CODE FOR THE CAROUSEL-SLIDESHOW -->

<!------------------------------------------------------->



<!-- START OF STYLE-CONFIGURATION ZONE  -->

<style>

.textstyle {

position:absolute;

visibility:visible;

border-style:solid;

border-width:2px;

border-color:#EEEEEE;

font-family:Arial;

font-size:0;

color:#FFFFFF;

text-align:center;

background-color:#CCCCCC;

top:-1000px;

}

div.textstyle a:hover{}

</style>

<!-- END OF STYLE-CONFIGURATION ZONE  -->



<script>

// CREDITS:

// Carousel Slideshow with transparency and zoom effect

// By Peter Gehrig

// Copyright (c) 2010 Peter Gehrig. All rights reserved.

// Permission given to use the script provided that this notice remains as is.

// Additional scripts can be found at http://www.fabulant.com



// IMPORTANT:

// If you add this script to a script-library or script-archive

// you have to add a highly visible link to

// http://www.fabulant.com on the webpage

// where this script will be featured



var rotatingimage=new Array()

var rotatingtext=new Array()

var rotatinglink=new Array()



///////////////////////////////////////////////////////////////////////////////////////

// START OF SCRIPT-CONFIGURATION ZONE 

//////////////////////////////////////////////////////////////////////////////////////



// Set the path and name (or URL) of your images. Add as many images as you like

// Take care that the images have a decent resolution as they are used for the zoom-images as well



rotatingimage[0]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/1.jpg"

rotatingimage[1]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/1.jpg"

rotatingimage[2]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/2.jpg"

rotatingimage[3]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/3.jpg"

rotatingimage[4]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/4.jpg"

rotatingimage[5]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/5.jpg"

rotatingimage[6]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/6.jpg"

rotatingimage[7]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/7.gif"

rotatingimage[8]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/8.jpg"

rotatingimage[9]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/1.jpg"

rotatingimage[10]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/2.jpg"

rotatingimage[11]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/3.jpg"

rotatingimage[12]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/4.jpg"

rotatingimage[13]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/5.jpg"

rotatingimage[14]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/6.jpg"

rotatingimage[15]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/7.gif"

rotatingimage[16]="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/img/8.jpg"



// Set the the comments corresponding to the images above (requires the same amount as images!)



rotatingtext[0]="Deep blue"

rotatingtext[1]="Not as sweet as you"

rotatingtext[2]="Fly, butterfly, fly"

rotatingtext[3]="Fruit Paradise"

rotatingtext[4]="Lost in the forrest"

rotatingtext[5]="My castle is my home"

rotatingtext[6]="This is my lucky day"

rotatingtext[7]="John Lemon"

rotatingtext[8]="Free the tree"

rotatingtext[9]="Not as sweet as you"

rotatingtext[10]="Fly, butterfly, fly"

rotatingtext[11]="Fruit Paradise"

rotatingtext[12]="Lost in the forrest"

rotatingtext[13]="My castle is my home"

rotatingtext[14]="This is my lucky day"

rotatingtext[15]="John Lemon"

rotatingtext[16]="Free the tree"



// Set the the comments corresoponding to the images above (requires the same amount as images!)

// Set "#" if no link is required



rotatinglink[0]="http://www.hotscripts.com"

rotatinglink[1]="http://www.hotscripts.com"

rotatinglink[2]="http://www.hotscripts.com"

rotatinglink[3]="http://www.hotscripts.com"

rotatinglink[4]="http://www.hotscripts.com"

rotatinglink[5]="http://www.hotscripts.com"

rotatinglink[6]="http://www.hotscripts.com"

rotatinglink[7]="http://www.hotscripts.com"

rotatinglink[8]="http://www.hotscripts.com"

rotatinglink[9]="http://www.hotscripts.com"

rotatinglink[10]="http://www.hotscripts.com"

rotatinglink[11]="http://www.hotscripts.com"

rotatinglink[12]="http://www.hotscripts.com"

rotatinglink[13]="http://www.hotscripts.com"

rotatinglink[14]="http://www.hotscripts.com"

rotatinglink[15]="http://www.hotscripts.com"

rotatinglink[16]="http://www.hotscripts.com"



//<!-- change code -->

var rotatingimage=new Array()

var rotatinglink=new Array()

rotatingimage[0]='http://mnemee.com/mnemee/wp-content/uploads/2011/06/images-5.jpg';rotatinglink[0]='http://mnemee.com/mnemee/?page_id=18';rotatingimage[1]='http://mnemee.com/mnemee/wp-content/uploads/2011/06/images-6.jpg';rotatinglink[1]='http://mnemee.com/mnemee/?page_id=15';//<!-- end change code -->



// Set the width of the circle (pixels)

var circlewidth=500



// Set the height of the circle (pixels)

var circleheight=260



// Set the width of your small rotating images (pixels)

var imgwidth=50



// Set the height of your small rotating images (pixels)

var imgheight=60



// Set the height of your textbox (pixels). This is the textbox (comment) below the rotating images

var textboxheight=17



// Set the path and name (or URL) of your backgroundimage

// Write "var bgimg=false" if you don't want to add a backgroundimage



var bgimg="http://mnemee.com/mnemee/wp-content/themes/gift-anthony/images/carosal_bg.jpg"



// Set the number of words that will be displayed at once



var displaymax=16



// Set the speed! Tha values may range from 0.1 to 1.0



var step=0.02;



// Set the zoomfactor for the big picture that appears on mouseover



var zoomfactor=2;



// padding to the margin



var imgpadding=10



/////////////////////////////////////////////////////////////////////////////////////

// END OF SCRIPT-CONFIGURATION ZONE

// Do not edit below this line	

////////////////////////////////////////////////////////////////////////////////////



var maxopacity=new Array()

var i_imgcounter=0

var segment=360/(displaymax);

var decrement=0;

var op

var tmr

var opacitystep=Math.round(100/circleinnerheight)

var zoomobj

var twidth



var theight

var windowwidth

var windowheight

var circleinnerwidth=circlewidth-(imgwidth+2*imgpadding)

var circleinnerheight=circleheight-(imgheight+2*imgpadding)

circleinnerwidth=circleinnerwidth/2

circleinnerheight=circleinnerheight/2



var ns4=document.layers?1:0

var ns6=document.getElementById&&!document.all?1:0 

var ie=document.all?1:0



var preloadedimages=new Array()

for (i=0;i<rotatingimage.length;i++){

	preloadedimages[i]=new Image()

	preloadedimages[i].src=rotatingimage[i]

}



for (i=0;i<displaymax;i++) {

	maxopacity[i]=1

}



function getpagesize() {

	windowwidth=parseInt(document.body.clientWidth)

	windowheight=parseInt(document.body.clientHeight)

	twidth=Math.floor(circleinnerwidth)

	theight=Math.floor(circleinnerheight)

	i_imgcounter=0

	

	for (i=0; i<displaymax; i++) {

		var thisspan=eval("document.getElementById('span"+i+"').style")

		thisspan.left=(twidth*Math.sin(decrement+i*segment*Math.PI/180)+circleinnerwidth+imgpadding)+"px";

		thisspan.top=(theight*Math.cos(decrement+i*segment*Math.PI/180)+circleinnerheight+imgpadding)+"px";

		thisspan.zIndex=parseInt(thisspan.top)



		op=parseInt(100/circleinnerheight*(parseInt(thisspan.top)*0.5))

		document.getElementById('span'+i).innerHTML="<a href='"+rotatinglink[i_imgcounter]+"'><img border=0 width="+imgwidth+" src='"+rotatingimage[i_imgcounter]+"' id='im"+i_imgcounter+"' onMouseover='stoprotating(this)' onMouseout='restartrotating()'></a><br>"+rotatingtext[i_imgcounter]

	document.getElementById('span'+i).style.visibility="visible"

			maxopacity[i]=-1

			i_imgcounter++

		if (i_imgcounter>=rotatingimage.length) {

			i_imgcounter=0

		}

	}

	

	rotatetext()

}



function rotatetext() {

	for (i=0; i<displaymax; i++) {

		var thisspan=eval("document.getElementById('span"+i+"').style")

		thisspan.left=(twidth*Math.sin(decrement+i*segment*Math.PI/180)+circleinnerwidth+imgpadding)+"px";

		thisspan.top=(theight*Math.cos(decrement+i*segment*Math.PI/180)+circleinnerheight+imgpadding)+"px";

		thisspan.zIndex=parseInt(thisspan.top)



		op=parseInt((100/circleinnerheight*(parseInt(thisspan.top)*0.5))-imgpadding)

		

		if (op<5 && maxopacity[i]==1) {

			if (i_imgcounter>=rotatingimage.length) {

				i_imgcounter=0

			}

			document.getElementById('span'+i).innerHTML="<a href='"+rotatinglink[i_imgcounter]+"'><img border=0 width="+imgwidth+" src='"+rotatingimage[i_imgcounter]+"' id='im"+i_imgcounter+"' onMouseover='stoprotating(this)' onMouseout='restartrotating()'></a><br>"+rotatingtext[i_imgcounter]

	document.getElementById('span'+i).style.visibility="visible"

			maxopacity[i]=-1

			i_imgcounter++

		}

		if (op>90) {

			maxopacity[i]=1

		}

	

		if (ie) {

			var thisfilter=eval("document.getElementById('span"+i+"')")

			thisfilter.filters.alpha.opacity=op

		}

		else {

			var thisfilter=eval("document.getElementById('span"+i+"').style")

			thisspan.opacity=op/100

		}

	}

	decrement-=step;

	tmr=setTimeout('rotatetext()', 50);

}



function stoprotating(thisobj) {

	clearTimeout(tmr)

	zoomobj=thisobj

	document.getElementById(zoomobj.id).style.width=(zoomfactor*imgwidth)+"px"

	document.getElementById(zoomobj.parentNode.parentNode.id).style.width=(zoomfactor*imgwidth)+"px"

	zoomobj.parentNode.parentNode.style.zIndex=9999

	if (ie) {

		zoomobj.parentNode.parentNode.filters.alpha.opacity=100

	}

	else {

		zoomobj.parentNode.parentNode.style.opacity=1

	}

}



function restartrotating() {

	document.getElementById(zoomobj.id).style.width=imgwidth+"px"

	document.getElementById(zoomobj.parentNode.parentNode.id).style.width=imgwidth+"px"

	rotatetext()

}





document.write('<div id="roof" style="position:relative;width:'+circlewidth+'px;height:'+(circleheight+textboxheight)+'px;">')

if (bgimg) {

	document.write('<img src="'+bgimg+'" width="'+circlewidth+'" height="'+(circleheight+textboxheight)+'">')

}

for (i=0;i<displaymax;i++) {

	document.write("<div id='span"+i+"' class='textstyle' style='filter:alpha(opacity=80);opacity:0.8;width:"+imgwidth+"px;visibility:hidden'></div>");

	i_imgcounter++

	if (i_imgcounter>=rotatingimage.length) {

		i_imgcounter=0

	}

}

document.write('</div>');

window.onload=getpagesize;

</script>



<!------------------------------------------------------->

<!-- END OF THE CODE FOR THE CAROUSEL-SLIDESHOW -->

<!------------------------------------------------------->

Anoesis · Sep 26, 2011

This is the code from the php file

Code:

<?php 
function carosol_slider_position()
{
?>
<!------------------------------------------------------->
<!-- BEGINNING OF THE CODE FOR THE CAROUSEL-SLIDESHOW -->
<!------------------------------------------------------->

<!-- START OF STYLE-CONFIGURATION ZONE  -->
<style>
.textstyle {
position:absolute;
visibility:visible;
border-style:solid;
border-width:2px;
border-color:#EEEEEE;
font-family:Arial;
font-size:0;
color:#FFFFFF;
text-align:center;
background-color:#CCCCCC;
top:-1000px;
}
div.textstyle a:hover{}
</style>
<!-- END OF STYLE-CONFIGURATION ZONE  -->

<script>
// CREDITS:
// Carousel Slideshow with transparency and zoom effect
// By Peter Gehrig
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

var rotatingimage=new Array()
var rotatingtext=new Array()
var rotatinglink=new Array()

///////////////////////////////////////////////////////////////////////////////////////
// START OF SCRIPT-CONFIGURATION ZONE 
//////////////////////////////////////////////////////////////////////////////////////

// Set the path and name (or URL) of your images. Add as many images as you like
// Take care that the images have a decent resolution as they are used for the zoom-images as well

rotatingimage[0]="<?php bloginfo( 'template_url' ); ?>/images/img/1.jpg"
rotatingimage[1]="<?php bloginfo( 'template_url' ); ?>/images/img/1.jpg"
rotatingimage[2]="<?php bloginfo( 'template_url' ); ?>/images/img/2.jpg"
rotatingimage[3]="<?php bloginfo( 'template_url' ); ?>/images/img/3.jpg"
rotatingimage[4]="<?php bloginfo( 'template_url' ); ?>/images/img/4.jpg"
rotatingimage[5]="<?php bloginfo( 'template_url' ); ?>/images/img/5.jpg"
rotatingimage[6]="<?php bloginfo( 'template_url' ); ?>/images/img/6.jpg"
rotatingimage[7]="<?php bloginfo( 'template_url' ); ?>/images/img/7.gif"
rotatingimage[8]="<?php bloginfo( 'template_url' ); ?>/images/img/8.jpg"
rotatingimage[9]="<?php bloginfo( 'template_url' ); ?>/images/img/1.jpg"
rotatingimage[10]="<?php bloginfo( 'template_url' ); ?>/images/img/2.jpg"
rotatingimage[11]="<?php bloginfo( 'template_url' ); ?>/images/img/3.jpg"
rotatingimage[12]="<?php bloginfo( 'template_url' ); ?>/images/img/4.jpg"
rotatingimage[13]="<?php bloginfo( 'template_url' ); ?>/images/img/5.jpg"
rotatingimage[14]="<?php bloginfo( 'template_url' ); ?>/images/img/6.jpg"
rotatingimage[15]="<?php bloginfo( 'template_url' ); ?>/images/img/7.gif"
rotatingimage[16]="<?php bloginfo( 'template_url' ); ?>/images/img/8.jpg"

// Set the the comments corresponding to the images above (requires the same amount as images!)

rotatingtext[0]="Deep blue"
rotatingtext[1]="Not as sweet as you"
rotatingtext[2]="Fly, butterfly, fly"
rotatingtext[3]="Fruit Paradise"
rotatingtext[4]="Lost in the forrest"
rotatingtext[5]="My castle is my home"
rotatingtext[6]="This is my lucky day"
rotatingtext[7]="John Lemon"
rotatingtext[8]="Free the tree"
rotatingtext[9]="Not as sweet as you"
rotatingtext[10]="Fly, butterfly, fly"
rotatingtext[11]="Fruit Paradise"
rotatingtext[12]="Lost in the forrest"
rotatingtext[13]="My castle is my home"
rotatingtext[14]="This is my lucky day"
rotatingtext[15]="John Lemon"
rotatingtext[16]="Free the tree"

// Set the the comments corresoponding to the images above (requires the same amount as images!)
// Set "#" if no link is required

rotatinglink[0]="http://www.hotscripts.com"
rotatinglink[1]="http://www.hotscripts.com"
rotatinglink[2]="http://www.hotscripts.com"
rotatinglink[3]="http://www.hotscripts.com"
rotatinglink[4]="http://www.hotscripts.com"
rotatinglink[5]="http://www.hotscripts.com"
rotatinglink[6]="http://www.hotscripts.com"
rotatinglink[7]="http://www.hotscripts.com"
rotatinglink[8]="http://www.hotscripts.com"
rotatinglink[9]="http://www.hotscripts.com"
rotatinglink[10]="http://www.hotscripts.com"
rotatinglink[11]="http://www.hotscripts.com"
rotatinglink[12]="http://www.hotscripts.com"
rotatinglink[13]="http://www.hotscripts.com"
rotatinglink[14]="http://www.hotscripts.com"
rotatinglink[15]="http://www.hotscripts.com"
rotatinglink[16]="http://www.hotscripts.com"

//<!-- change code -->
var rotatingimage=new Array()
var rotatinglink=new Array()
<?php
	$options = get_option('carrousel_img_list');
	$idx = 0;
	foreach ($options as $key => $value) {
		$image_urls = wp_get_attachment_image_src(get_post_thumbnail_id($value), 'thumbnail');
		echo "rotatingimage[".$idx."]='".$image_urls[0]."';";
		echo "rotatinglink[".$idx."]='".get_permalink($key)."';";
		++$idx;
	}
?>
//<!-- end change code -->

// Set the width of the circle (pixels)
var circlewidth=500

// Set the height of the circle (pixels)
var circleheight=260

// Set the width of your small rotating images (pixels)
var imgwidth=50

// Set the height of your small rotating images (pixels)
var imgheight=60

// Set the height of your textbox (pixels). This is the textbox (comment) below the rotating images
var textboxheight=17

// Set the path and name (or URL) of your backgroundimage
// Write "var bgimg=false" if you don't want to add a backgroundimage

var bgimg="<?php bloginfo( 'template_url' ); ?>/images/carosal_bg.jpg"

// Set the number of words that will be displayed at once

var displaymax=16

// Set the speed! Tha values may range from 0.1 to 1.0

var step=0.02;

// Set the zoomfactor for the big picture that appears on mouseover

var zoomfactor=2;

// padding to the margin

var imgpadding=10

/////////////////////////////////////////////////////////////////////////////////////
// END OF SCRIPT-CONFIGURATION ZONE
// Do not edit below this line	
////////////////////////////////////////////////////////////////////////////////////

var maxopacity=new Array()
var i_imgcounter=0
var segment=360/(displaymax);
var decrement=0;
var op
var tmr
var opacitystep=Math.round(100/circleinnerheight)
var zoomobj
var twidth

var theight
var windowwidth
var windowheight
var circleinnerwidth=circlewidth-(imgwidth+2*imgpadding)
var circleinnerheight=circleheight-(imgheight+2*imgpadding)
circleinnerwidth=circleinnerwidth/2
circleinnerheight=circleinnerheight/2

var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0 
var ie=document.all?1:0

var preloadedimages=new Array()
for (i=0;i<rotatingimage.length;i++){
	preloadedimages[i]=new Image()
	preloadedimages[i].src=rotatingimage[i]
}

for (i=0;i<displaymax;i++) {
	maxopacity[i]=1
}

function getpagesize() {
	windowwidth=parseInt(document.body.clientWidth)
	windowheight=parseInt(document.body.clientHeight)
	twidth=Math.floor(circleinnerwidth)
	theight=Math.floor(circleinnerheight)
	i_imgcounter=0
	
	for (i=0; i<displaymax; i++) {
		var thisspan=eval("document.getElementById('span"+i+"').style")
		thisspan.left=(twidth*Math.sin(decrement+i*segment*Math.PI/180)+circleinnerwidth+imgpadding)+"px";
		thisspan.top=(theight*Math.cos(decrement+i*segment*Math.PI/180)+circleinnerheight+imgpadding)+"px";
		thisspan.zIndex=parseInt(thisspan.top)

		op=parseInt(100/circleinnerheight*(parseInt(thisspan.top)*0.5))
		document.getElementById('span'+i).innerHTML="<a href='"+rotatinglink[i_imgcounter]+"'><img border=0 width="+imgwidth+" src='"+rotatingimage[i_imgcounter]+"' id='im"+i_imgcounter+"' onMouseover='stoprotating(this)' onMouseout='restartrotating()'></a><br>"+rotatingtext[i_imgcounter]
	document.getElementById('span'+i).style.visibility="visible"
			maxopacity[i]=-1
			i_imgcounter++
		if (i_imgcounter>=rotatingimage.length) {
			i_imgcounter=0
		}
	}
	
	rotatetext()
}

function rotatetext() {
	for (i=0; i<displaymax; i++) {
		var thisspan=eval("document.getElementById('span"+i+"').style")
		thisspan.left=(twidth*Math.sin(decrement+i*segment*Math.PI/180)+circleinnerwidth+imgpadding)+"px";
		thisspan.top=(theight*Math.cos(decrement+i*segment*Math.PI/180)+circleinnerheight+imgpadding)+"px";
		thisspan.zIndex=parseInt(thisspan.top)

		op=parseInt((100/circleinnerheight*(parseInt(thisspan.top)*0.5))-imgpadding)
		
		if (op<5 && maxopacity[i]==1) {
			if (i_imgcounter>=rotatingimage.length) {
				i_imgcounter=0
			}
			document.getElementById('span'+i).innerHTML="<a href='"+rotatinglink[i_imgcounter]+"'><img border=0 width="+imgwidth+" src='"+rotatingimage[i_imgcounter]+"' id='im"+i_imgcounter+"' onMouseover='stoprotating(this)' onMouseout='restartrotating()'></a><br>"+rotatingtext[i_imgcounter]
	document.getElementById('span'+i).style.visibility="visible"
			maxopacity[i]=-1
			i_imgcounter++
		}
		if (op>90) {
			maxopacity[i]=1
		}
	
		if (ie) {
			var thisfilter=eval("document.getElementById('span"+i+"')")
			thisfilter.filters.alpha.opacity=op
		}
		else {
			var thisfilter=eval("document.getElementById('span"+i+"').style")
			thisspan.opacity=op/100
		}
	}
	decrement-=step;
	tmr=setTimeout('rotatetext()', 50);
}

function stoprotating(thisobj) {
	clearTimeout(tmr)
	zoomobj=thisobj
	document.getElementById(zoomobj.id).style.width=(zoomfactor*imgwidth)+"px"
	document.getElementById(zoomobj.parentNode.parentNode.id).style.width=(zoomfactor*imgwidth)+"px"
	zoomobj.parentNode.parentNode.style.zIndex=9999
	if (ie) {
		zoomobj.parentNode.parentNode.filters.alpha.opacity=100
	}
	else {
		zoomobj.parentNode.parentNode.style.opacity=1
	}
}

function restartrotating() {
	document.getElementById(zoomobj.id).style.width=imgwidth+"px"
	document.getElementById(zoomobj.parentNode.parentNode.id).style.width=imgwidth+"px"
	rotatetext()
}


document.write('<div id="roof" style="position:relative;width:'+circlewidth+'px;height:'+(circleheight+textboxheight)+'px;">')
if (bgimg) {
	document.write('<img src="'+bgimg+'" width="'+circlewidth+'" height="'+(circleheight+textboxheight)+'">')
}
for (i=0;i<displaymax;i++) {
	document.write("<div id='span"+i+"' class='textstyle' style='filter:alpha(opacity=80);opacity:0.8;width:"+imgwidth+"px;visibility:hidden'></div>");
	i_imgcounter++
	if (i_imgcounter>=rotatingimage.length) {
		i_imgcounter=0
	}
}
document.write('</div>');
window.onload=getpagesize;
</script>

<!------------------------------------------------------->
<!-- END OF THE CODE FOR THE CAROUSEL-SLIDESHOW -->
<!------------------------------------------------------->
<?php }

add_shortcode('show_slider_position', 'carosol_slider_position');
add_filter('the_content', 'do_shortcode', 11);
?>

Question about some Javascript Code

Anoesis

Weaksauce

mrgstiffler

[H]F Junkie

ShoeLace

Gawd

Anoesis

Weaksauce

Anoesis

Weaksauce