slide show scripts interfering with eachother

[carlir]

I am wanting to have slide shows of different albums on my page, the problem is it always shows the pictures from the last album coded to the page in the first album, and nothing in any album other than the first album. does anyone know how I can fix this? p.s. I didn't save the pictures to the wrong name or anything, I double checked. if there's only one slide show within the page it works perfect. I have my albums showing up in lightboxes but that didn't make a difference, I double checked that too.

you can see the page at http://solitaryharmony.com/main.html#images

click the links to see what I mean. If you want to see the whole page script for any interfering css or anything just rightclick and check my page source. here's a code example for my photo slide shows:

Pick an album from below:
<br /><a href = "javascript:void(0)" onclick = "document.getElementById('sh').style.display='block';document.getElementById('fade').style.display='block'">Solitary Harmony Album</a> (an album filled with only pictures used for Solitary Harmony)

<br /><a href = "javascript:void(0)" onclick = "document.getElementById('ed').style.display='block';document.getElementById('fade').style.display='block'">Graphic Art Album</a> (an album for pictures I have created that aren't specifically used for Solitary Harmony)
<div id="sh" class="white_content">
<script type="text/javascript">
var width = 565;
var height = 375;
var imgAr1 = new Array();
var rImg1 = new Array();

imgAr1[0] = "images/sh0.jpg";
imgAr1[1] = "images/sh1.jpg";
imgAr1[2] = "images/sh2.jpg";
imgAr1[3] = "images/sh3.jpg";
imgAr1[4] = "images/sh4.jpg";
imgAr1[5] = "images/sh5.jpg";
imgAr1[6] = "images/sh6.jpg";
imgAr1[7] = "images/sh7.jpg";
imgAr1[8] = "images/sh8.jpg";
imgAr1[9] = "images/sh9.jpg";
imgAr1[10] = "images/sh10.jpg";
imgAr1[11] = "images/sh11.jpg";
imgAr1[12] = "images/sh12.jpg";
imgAr1[13] = "images/sh13.jpg";
imgAr1[14] = "images/sh14.jpg";
imgAr1[15] = "images/sh15.jpg";
imgAr1[16] = "images/sh16.jpg";
imgAr1[17] = "images/sh17.jpg";
imgAr1[18] = "images/sh18.jpg";
imgAr1[19] = "images/sh19.jpg";
imgAr1[20] = "images/sh20.jpg";
imgAr1[21] = "images/sh21.jpg";
imgAr1[22] = "images/sh22.jpg";
imgAr1[23] = "images/sh23.jpg";
imgAr1[24] = "images/sh24.jpg";
imgAr1[25] = "images/sh25.jpg";
imgAr1[26] = "images/sh26.jpg";
imgAr1[27] = "images/sh27.jpg";
imgAr1[28] = "images/sh28.jpg";
imgAr1[29] = "images/sh29.jpg";
</script>

<table cellpadding=0 cellspacing=0><tr><td style="border: 2px double black;">
<img id=pic border=0>
</td></tr>
<tr><td>
<table width=100% style="border: 2px double #560f0f; font-size: 13px; font-family: verdana, arial;">
<td align=center><a style="color: black; cursor:pointer;" onclick="start()">First</a></td> 
<td align=center><a style="color: black; cursor:pointer;" onclick="prev()">Prev</a></td>
<td align=center><a style="color: black; cursor:pointer;" onclick="slideshow()">Next</a></td>  
<td align=center><a style="color: black; cursor:pointer;" onclick="end()">Last</a></td>
<td align=center><a style="color: #560f0f; cursor:pointer;" href = "javascript:void(0)" onclick = "document.getElementById('sh').style.display='none';document.getElementById('fade').style.display='none'">Close</a></td> 
</tr></table>
</td></tr></table>

<script type="text/javascript">

for(var j = 0; j < imgAr1.length; j++)
{
		rImg1[j] = new Image();
            rImg1[j].src = imgAr1[j];
}

document.onload = setting();

var slide;
function setting()
{
	slide = document.getElementById('pic');
	slide.src = imgAr1[0];
	slide.setAttribute("width",width);
	slide.setAttribute("height",height);
}

//Image or picture slide show using java script
//slideshow function
var picture = 0;
function slideshow(){
	if(picture < imgAr1.length-1){
		picture=picture+1;
		slide.src = imgAr1[picture];
	}
}

function prev(){
	if(picture > 0 ){
		picture=picture-1;
		slide.src = imgAr1[picture];
	}
}

function start(){
		slide.src = imgAr1[0];
		picture = 0;
}

function end(){
		slide.src = imgAr1[imgAr1.length-1];
		picture = imgAr1.length-1
}
</script>
</div><div id="fade" class="black_overlay"></div>








<div id="ed" class="white_content">

<script type="text/javascript">
var width = 565;
var height = 375;
var imgAr1 = new Array();
var rImg1 = new Array();

imgAr1[0] = "images/ed0.jpg";
imgAr1[1] = "images/ed1.jpg";
imgAr1[2] = "images/ed2.jpg";
imgAr1[3] = "images/ed3.jpg";
imgAr1[4] = "images/ed4.jpg";
imgAr1[5] = "images/ed5.jpg";
imgAr1[6] = "images/ed6.jpg";
imgAr1[7] = "images/ed7.jpg";
imgAr1[8] = "images/ed8.jpg";
imgAr1[9] = "images/ed9.jpg";
imgAr1[10] = "images/ed10.jpg";
imgAr1[11] = "images/ed11.jpg";
imgAr1[12] = "images/ed12.jpg";
imgAr1[13] = "images/ed13.jpg";
imgAr1[14] = "images/ed14.jpg";
imgAr1[15] = "images/ed15.jpg";
imgAr1[16] = "images/ed16.jpg";
imgAr1[17] = "images/ed17.jpg";
imgAr1[18] = "images/ed18.jpg";
imgAr1[19] = "images/ed19.jpg";
imgAr1[20] = "images/ed20.jpg";
imgAr1[21] = "images/ed21.jpg";
imgAr1[22] = "images/ed22.jpg";
imgAr1[23] = "images/ed23.jpg";
imgAr1[24] = "images/ed24.jpg";
imgAr1[25] = "images/ed25.jpg";
imgAr1[26] = "images/ed26.jpg";
imgAr1[27] = "images/ed27.jpg";
imgAr1[28] = "images/ed28.jpg";
imgAr1[29] = "images/ed29.jpg";
imgAr1[30] = "images/ed30.jpg";
imgAr1[31] = "images/ed31.jpg";
imgAr1[32] = "images/ed32.jpg";
imgAr1[33] = "images/ed33.jpg";
imgAr1[34] = "images/ed34.jpg";
imgAr1[35] = "images/ed35.jpg";
imgAr1[36] = "images/ed36.jpg";
imgAr1[37] = "images/ed37.jpg";
imgAr1[38] = "images/ed38.jpg";
imgAr1[39] = "images/ed39.jpg";
imgAr1[10] = "images/ed40.jpg";
imgAr1[41] = "images/ed41.jpg";
imgAr1[42] = "images/ed42.jpg";
imgAr1[43] = "images/ed43.jpg";

</script>

<table cellpadding=0 cellspacing=0><tr><td style="border: 2px double black;">
<img id=pic border=0>
</td></tr>
<tr><td>
<table width=100% style="border: 2px double #560f0f; font-size: 13px; font-family: verdana, arial;">
<td align=center><a style="color: black; cursor:pointer;" onclick="start()">First</a></td> 
<td align=center><a style="color: black; cursor:pointer;" onclick="prev()">Prev</a></td>
<td align=center><a style="color: black; cursor:pointer;" onclick="slideshow()">Next</a></td>  
<td align=center><a style="color: black; cursor:pointer;" onclick="end()">Last</a></td>
<td align=center><a style="color: #560f0f; cursor:pointer;" href = "javascript:void(0)" onclick = "document.getElementById('ed').style.display='none';document.getElementById('fade').style.display='none'">Close</a></td> 
</tr></table>
</td></tr></table>

<script type="text/javascript">

for(var j = 0; j < imgAr1.length; j++)
{
		rImg1[j] = new Image();
            rImg1[j].src = imgAr1[j];
}

document.onload = setting();

var slide;
function setting()
{
	slide = document.getElementById('pic');
	slide.src = imgAr1[0];
	slide.setAttribute("width",width);
	slide.setAttribute("height",height);
}

//Image or picture slide show using java script
//slideshow function
var picture = 0;
function slideshow(){
	if(picture < imgAr1.length-1){
		picture=picture+1;
		slide.src = imgAr1[picture];
	}
}

function prev(){
	if(picture > 0 ){
		picture=picture-1;
		slide.src = imgAr1[picture];
	}
}

function start(){
		slide.src = imgAr1[0];
		picture = 0;
}

function end(){
		slide.src = imgAr1[imgAr1.length-1];
		picture = imgAr1.length-1
}
</script>

</div><div id="fade" class="black_overlay"></div>

[Lusiphur]

Ok... Just as a note, I literally had to copy/paste your relevant code segments into 2 separate notepads side by side to check it over but here's what I'm seeing for starters:
Your 2 slideshow scripts (the portion that follows) are identical. If they will function as identical scripts there's no need to have them there twice

<script type="text/javascript">

for(var j = 0; j < imgAr1.length; j++)
{
		rImg1[j] = new Image();
            rImg1[j].src = imgAr1[j];
}

document.onload = setting();

var slide;
function setting()
{
	slide = document.getElementById('pic');
	slide.src = imgAr1[0];
	slide.setAttribute("width",width);
	slide.setAttribute("height",height);
}

//Image or picture slide show using java script
//slideshow function
var picture = 0;
function slideshow(){
	if(picture < imgAr1.length-1){
		picture=picture+1;
		slide.src = imgAr1[picture];
	}
}

function prev(){
	if(picture > 0 ){
		picture=picture-1;
		slide.src = imgAr1[picture];
	}
}

function start(){
		slide.src = imgAr1[0];
		picture = 0;
}

function end(){
		slide.src = imgAr1[imgAr1.length-1];
		picture = imgAr1.length-1
}
</script>

That being said, if they're meant to work on separate slideshow sets you may want to consider making them unique to each other by changing the variable name styles for things like the image libraries as currently the only point of variance is between

<a href = "javascript<b></b>:void(0)" onclick = "document.getElementById('sh').style.display='block';document.getElementById('fade').style.display='block'">

and

<a href = "javascript<b></b>:void(0)" onclick = "document.getElementById('ed').style.display='block';document.getElementById('fade').style.display='block'">

and in the image filenames themselves.

Now, my javascript is a bit on the rusty side but... from what I'm seeing of the code segment I showed above it looks as if your slideshow is basing from the 'pic' portion of the filename list(s) where your initial call is basing from the more unique 'sh' or 'ed' portion of the filename list(s).

Between the fact that the getElementByID components are not matched and the fact that there is a large chunk of duplicated (unnecessarily at this stage but possibly worth doing if you change the getElementByID calls in the 2 sections) script in the page I'm surprised either slideshow works :)

As a side note, I generally don't often see <script> tags within the body of an HTML page but rather in the <head> section.

Hope this helps at least put things in the right perspective :) Please remember to mark the thread solved once your issue has been resolved.

[carlir]

well I'm a little closer, Thanks Lucipher. so I changed my 'pic' to a new name so that it's different in the second slide show. now both slide shows start with the correct image :). I also changed rImg1 and imgAr1 to rImg2 and imgAr2 in the second album. the first slide show buttons weren't working, they were changing the second slide show's image. so I also changed by function names in the second slide show, now it just shows the first slideshows' pictures in the second slide show along with the second slide shows pictures depending on which button you press.

now what?

here's a simpler version of what I'm trying to do, just to try get it working and figure it out:

<script type="text/javascript">
var slideimages=new Array()
function slideshowimages()
{
     for (i=0;i<slideshowimages.arguments.length;i++){
         slideimages[i]=new Image()
         slideimages[i].src=slideshowimages.arguments[i]
    }
}
</script>

<img src="http://solitaryharmony.com/images/ed28.jpg" border=0 name="slide" width=252 height=167>
<script type="text/javascript">
slideshowimages("http://solitaryharmony.com/images/ed28.jpg","http://solitaryharmony.com/images/me1.jpg","http://solitaryharmony.com/images/sh4.jpg","http://solitaryharmony.com/images/ed42.jpg","http://solitaryharmony.com/images/ed40.jpg","http://solitaryharmony.com/images/sh16.jpg","http://solitaryharmony.com/images/ed13.jpg","http://solitaryharmony.com/images/sh11.jpg")
var slideshowspeed=2000
var whichimage=0
function slideit()
{
     if (!document.images)
           return
     document.images.slide.src=slideimages[whichimage].src
     if (whichimage<slideimages.length-1)
              whichimage++
     else
              whichimage=0
      setTimeout("slideit()",slideshowspeed)
}
 slideit()
</script>





    
    
    <script type="text/javascript">
var width = 250;
var height = 100;
var imgAr1 = new Array();
var rImg1 = new Array();

imgAr1[0] = "http://solitaryharmony.com/images/sh0.jpg";
imgAr1[1] = "http://solitaryharmony.com/images/sh1.jpg";
</script>

<table cellpadding=0 cellspacing=0><tr><td style="border: 2px ridge red;">
<img id=pic border=0>
</td></tr>
<tr><td>
<table width=100% style="border: 2px ridge red; font-size: 13px; font-family: verdana, arial;">
<td align=center><a style="color: blue; cursor:pointer;" onclick="start()">Start</a></td> 
<td align=center><a style="color: blue; cursor:pointer;" onclick="slideshow()">Next</a></td> 
<td align=center><a style="color: blue; cursor:pointer;" onclick="prev()">Prev</a></td> 
<td align=center><a style="color: blue; cursor:pointer;" onclick="end()">End</a></td>
<td align=center><a href="http://www.hscripts.com" style="color: blue; text-decoration: none; 
cursor:ponter; font-size: 13px;">&copy;H</a></td> 
</tr></table>
</td></tr></table>

<script type="text/javascript">

for(var j = 0; j < imgAr1.length; j++)
{
		rImg1[j] = new Image();
            rImg1[j].src = imgAr1[j];
}

document.onload = setting();

var slide;
function setting()
{
	slide = document.getElementById('pic');
	slide.src = imgAr1[0];
	slide.setAttribute("width",width);
	slide.setAttribute("height",height);
}

//Image or picture slide show using java script
//slideshow function
var picture = 0;
function slideshow(){
	if(picture < imgAr1.length-1){
		picture=picture+1;
		slide.src = imgAr1[picture];
	}
}

function prev(){
	if(picture > 0 ){
		picture=picture-1;
		slide.src = imgAr1[picture];
	}
}

function start(){
		slide.src = imgAr1[0];
		picture = 0;
}

function end(){
		slide.src = imgAr1[imgAr1.length-1];
		picture = imgAr1.length-1
}
</script>













<script type="text/javascript">
var width = 250;
var height = 100;
var imgAr2 = new Array();
var rImg2 = new Array();

imgAr2[0] = "http://solitaryharmony.com/images/ed0.jpg";
imgAr2[1] = "http://solitaryharmony.com/images/ed2.jpg";
</script>

<table cellpadding=0 cellspacing=0><tr><td style="border: 2px ridge red;">
<img id=image border=0>
</td></tr>
<tr><td>
<table width=100% style="border: 2px ridge red; font-size: 13px; font-family: verdana, arial;">
<td align=center><a style="color: blue; cursor:pointer;" onclick="star()">Start</a></td> 
<td align=center><a style="color: blue; cursor:pointer;" onclick="next()">Next</a></td> 
<td align=center><a style="color: blue; cursor:pointer;" onclick="last()">Prev</a></td> 
<td align=center><a style="color: blue; cursor:pointer;" onclick="fini()">End</a></td>
<td align=center><a href="http://www.hscripts.com" style="color: blue; text-decoration: none; 
cursor:ponter; font-size: 13px;">&copy;H</a></td> 
</tr></table>
</td></tr></table>

<script type="text/javascript">

for(var j = 0; j < imgAr2.length; j++)
{
		rImg2[j] = new Image();
            rImg2[j].src = imgAr2[j];
}

document.onload = setting();

var slide;
function setting()
{
	slide = document.getElementById('image');
	slide.src = imgAr2[0];
	slide.setAttribute("width",width);
	slide.setAttribute("height",height);
}

//Image or picture slide show using java script
//slideshow function
var picture = 0;
function next(){
	if(picture < imgAr2.length-1){
		picture=picture+1;
		slide.src = imgAr2[picture];
	}
}

function last(){
	if(picture > 0 ){
		picture=picture-1;
		slide.src = imgAr2[picture];
	}
}

function star(){
		slide.src = imgAr2[0];
		picture = 0;
}

function fini(){
		slide.src = imgAr2[imgAr2.length-1];
		picture = imgAr2.length-1
}
</script>

[carlir]

oops sorry, ignore the automatic slide show at the beginning of the script, I am only having trouble with the two with buttons.

[carlir]

I got it. had to change like all the names of everything in the script for the buttons so nothing was calling the same word.

here's my code

<br /><br /><a href = "javascript:void(0)" onclick = "document.getElementById('sh').style.display='block';document.getElementById('fade').style.display='block'">Solitary Harmony Album</a> (an album filled with only pictures used for Solitary Harmony)

<br /><br /><a href = "javascript:void(0)" onclick = "document.getElementById('ed').style.display='block';document.getElementById('fade').style.display='block'">Graphic Art Album</a> (an album for pictures I have created that aren't specifically used for Solitary Harmony)

<!-- <br /><a href = "javascript:void(0)" onclick = "document.getElementById('ph').style.display='block';document.getElementById('fade').style.display='block'">Photography Album</a> (an album for my unedited photography)

<br /><a href = "javascript:void(0)" onclick = "document.getElementById('me').style.display='block';document.getElementById('fade').style.display='block'">Photos of Me</a> (my own little album)

-->


<div id="sh" class="white_content">
<script type="text/javascript">
var width = 565;
var height = 375;
var imgAr1 = new Array();
var rImg1 = new Array();

imgAr1[0] = "images/sh0.jpg";
imgAr1[1] = "images/sh1.jpg";
imgAr1[2] = "images/sh2.jpg";
imgAr1[3] = "images/sh3.jpg";
imgAr1[4] = "images/sh4.jpg";
imgAr1[5] = "images/sh5.jpg";
imgAr1[6] = "images/sh6.jpg";
imgAr1[7] = "images/sh7.jpg";
imgAr1[8] = "images/sh8.jpg";
imgAr1[9] = "images/sh9.jpg";
imgAr1[10] = "images/sh10.jpg";
imgAr1[11] = "images/sh11.jpg";
imgAr1[12] = "images/sh12.jpg";
imgAr1[13] = "images/sh13.jpg";
imgAr1[14] = "images/sh14.jpg";
imgAr1[15] = "images/sh15.jpg";
imgAr1[16] = "images/sh16.jpg";
imgAr1[17] = "images/sh17.jpg";
imgAr1[18] = "images/sh18.jpg";
imgAr1[19] = "images/sh19.jpg";
imgAr1[20] = "images/sh20.jpg";
imgAr1[21] = "images/sh21.jpg";
imgAr1[22] = "images/sh22.jpg";
imgAr1[23] = "images/sh23.jpg";
imgAr1[24] = "images/sh24.jpg";
imgAr1[25] = "images/sh25.jpg";
imgAr1[26] = "images/sh26.jpg";
imgAr1[27] = "images/sh27.jpg";
imgAr1[28] = "images/sh28.jpg";
imgAr1[29] = "images/sh29.jpg";
</script>

<table cellpadding=0 cellspacing=0><tr><td style="border: 2px double black;">
<img id=shs border=0>
</td></tr>
<tr><td>
<table width=100% style="border: 2px double #560f0f; font-size: 13px; font-family: verdana, arial;">
<td align=center><a style="color: black; cursor:pointer;" onclick="start()">First</a></td> 
<td align=center><a style="color: black; cursor:pointer;" onclick="prev()">Prev</a></td>
<td align=center><a style="color: black; cursor:pointer;" onclick="slideshow()">Next</a></td>  
<td align=center><a style="color: black; cursor:pointer;" onclick="end()">Last</a></td>
<td align=center><a style="color: #560f0f; cursor:pointer;" href = "javascript:void(0)" onclick = "document.getElementById('sh').style.display='none';document.getElementById('fade').style.display='none'">Close</a></td> 
</tr></table>
</td></tr></table>

<script type="text/javascript">

for(var j = 0; j < imgAr1.length; j++)
{
		rImg1[j] = new Image();
            rImg1[j].src = imgAr1[j];
}

document.onload = setting();

var slide;
function setting()
{
	slide = document.getElementById('shs');
	slide.src = imgAr1[0];
	slide.setAttribute("width",width);
	slide.setAttribute("height",height);
}

//Image or picture slide show using java script
//slideshow function
var picture = 0;
function slideshow(){
	if(picture < imgAr1.length-1){
		picture=picture+1;
		slide.src = imgAr1[picture];
	}
}

function prev(){
	if(picture > 0 ){
		picture=picture-1;
		slide.src = imgAr1[picture];
	}
}

function start(){
		slide.src = imgAr1[0];
		picture = 0;
}

function end(){
		slide.src = imgAr1[imgAr1.length-1];
		picture = imgAr1.length-1
}
</script>
</div><div id="fade" class="black_overlay"></div>








<div id="ed" class="white_content">

<script type="text/javascript">
var width = 565;
var height = 375;
var imgAr2 = new Array();
var rImg2 = new Array();

imgAr2[0] = "images/ed0.jpg";
imgAr2[1] = "images/ed1.jpg";
imgAr2[2] = "images/ed2.jpg";
imgAr2[3] = "images/ed3.jpg";
imgAr2[4] = "images/ed4.jpg";
imgAr2[5] = "images/ed5.jpg";
imgAr2[6] = "images/ed6.jpg";
imgAr2[7] = "images/ed7.jpg";
imgAr2[8] = "images/ed8.jpg";
imgAr2[9] = "images/ed9.jpg";
imgAr2[10] = "images/ed10.jpg";
imgAr2[11] = "images/ed11.jpg";
imgAr2[12] = "images/ed12.jpg";
imgAr2[13] = "images/ed13.jpg";
imgAr2[14] = "images/ed14.jpg";
imgAr2[15] = "images/ed15.jpg";
imgAr2[16] = "images/ed16.jpg";
imgAr2[17] = "images/ed17.jpg";
imgAr2[18] = "images/ed18.jpg";
imgAr2[19] = "images/ed19.jpg";
imgAr2[20] = "images/ed20.jpg";
imgAr2[21] = "images/ed21.jpg";
imgAr2[22] = "images/ed22.jpg";
imgAr2[23] = "images/ed23.jpg";
imgAr2[24] = "images/ed24.jpg";
imgAr2[25] = "images/ed25.jpg";
imgAr2[26] = "images/ed26.jpg";
imgAr2[27] = "images/ed27.jpg";
imgAr2[28] = "images/ed28.jpg";
imgAr2[29] = "images/ed29.jpg";
imgAr2[30] = "images/ed30.jpg";
imgAr2[31] = "images/ed31.jpg";
imgAr2[32] = "images/ed32.jpg";
imgAr2[33] = "images/ed33.jpg";
imgAr2[34] = "images/ed34.jpg";
imgAr2[35] = "images/ed35.jpg";
imgAr2[36] = "images/ed36.jpg";
imgAr2[37] = "images/ed37.jpg";
imgAr2[38] = "images/ed38.jpg";
imgAr2[39] = "images/ed39.jpg";
imgAr2[10] = "images/ed40.jpg";
imgAr2[41] = "images/ed41.jpg";
imgAr2[42] = "images/ed42.jpg";
imgAr2[43] = "images/ed43.jpg";
</script>

<table cellpadding=0 cellspacing=0><tr><td style="border: 2px double black;">
<img id=eds border=0>
</td></tr>
<tr><td>
<table width=100% style="border: 2px double #560f0f; font-size: 13px; font-family: verdana, arial;">
<td align=center><a style="color: black; cursor:pointer;" onclick="edf()">First</a></td> 
<td align=center><a style="color: black; cursor:pointer;" onclick="edp()">Prev</a></td>
<td align=center><a style="color: black; cursor:pointer;" onclick="edn()">Next</a></td>  
<td align=center><a style="color: black; cursor:pointer;" onclick="edl()">Last</a></td>
<td align=center><a style="color: #560f0f; cursor:pointer;" href = "javascript:void(0)" onclick = "document.getElementById('ed').style.display='none';document.getElementById('fade').style.display='none'">Close</a></td> 
</tr></table>
</td></tr></table>

<script type="text/javascript">

for(var j = 0; j < imgAr2.length; j++)
{
		rImg2[j] = new Image();
            rImg2[j].src = imgAr2[j];
}

document.onload = moving();

var slid;
function moving()
{
	slid = document.getElementById('eds');
	slid.src = imgAr2[0];
	slid.setAttribute("width",width);
	slid.setAttribute("height",height);
}

//Image or picture slide show using java script
//next
var pic = 0;
function edn(){
	if(pic < imgAr2.length-1){
		pic=pic+1;
		slid.src = imgAr2[pic];
	}
}
//previous
function edp(){
	if(pic > 0 ){
		pic=pic-1;
		slid.src = imgAr2[pic];
	}
}
//start
function edf(){
		slid.src = imgAr2[0];
		pic = 0;
}
//end
function edl(){
		slid.src = imgAr2[imgAr2.length-1];
		pic = imgAr2.length-1
}
</script>

</div><div id="fade" class="black_overlay"></div>

[Lusiphur]

Sounds about right :twisted: Glad you got it sorted.

[carlir]

thanks for your help