slide show scripts interfering with eachother

Question

carlir 0 Newbie Poster

16 Years Ago

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

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>

html-css web-design

2 Contributors
6 Replies
121 Views
1 Week Discussion Span
Latest Post 16 Years Ago Latest Post by carlir

Dani AI

Generated 9 Months Ago

A concise diagnosis and a sturdier pattern for multiple slideshows on one page.

The behavior seen in this thread was classic name-collision and scoping trouble. correctly flagged that the two scripts were effectively identical, and solved the immediate symptom by renaming variables and functions. Renaming works, but it is fragile and error-prone when more albums are added. Safer fixes remove the need for per-instance renaming and avoid duplicate DOM ids (an overlay or any id should appear only once).

Quick checklist of practical fixes that cover the common pitfalls:

Make DOM ids unique (or use one shared overlay element placed once in the DOM and toggle it). Duplicate ids confuse getElementById and lead to unexpected behavior.
Avoid globals. Keep slideshow state (current index, image list, image element) inside a closure or object so each slideshow has its own scope.
Stop using inline onclick handlers for instance wiring; attach listeners with addEventListener so handlers can reference the correct instance.
Use proper DOM-ready wiring (DOMContentLoaded or placing scripts at the end of body) instead of assigning run-on-load incorrectly.
Verify arrays for accidental duplicate or overwritten indices (an accidentally repeated index silently overwrites entries).

Example pattern (encapsulation + event wiring):

function createSlideshow(imgId, images){
  let idx = 0;
  const img = document.getElementById(imgId);
  img.src = images[idx];
  return {
    next(){ idx = Math.min(idx+1, images.length-1); img.src = images[idx]; },
    prev(){ idx = Math.max(idx-1, 0); img.src = images[idx]; },
    first(){ idx = 0; img.src = images[idx]; },
    last(){ idx = images.length-1; img.src = images[idx]; }
  };
}

window.addEventListener('DOMContentLoaded', () => {
  const sh = createSlideshow('shs', ['images/sh0.jpg','images/sh1.jpg']);
  document.getElementById('sh-next').addEventListener('click', sh.next);
});

Additional troubleshooting tips: open the browser console to catch JS errors, test one slideshow at a time, and move repeated script logic into a single external file. For DOM-ready and getElementById behavior see the MDN docs: DOMContentLoaded event and Document.getElementById.

All 6 Replies

Lusiphur 185 Practically a Posting Shark

16 Years Ago

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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

carlir 0 Newbie Poster · Answer 1 · 2010-07-15T22:01:55+00:00

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="" border=0 name="slide" width=252 height=167>
<script type="text/javascript">
slideshowimages("","","","","","","","")
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] = "";
imgAr1[1] = "";
</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] = "";
imgAr2[1] = "";
</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 0 Newbie Poster · Answer 2 · 2010-07-15T22:03:30+00:00

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

carlir 0 Newbie Poster · Answer 3 · 2010-07-20T22:09:43+00:00

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 185 Practically a Posting Shark Team Colleague Featured Poster · Answer 4 · 2010-07-21T00:20:07+00:00

Lusiphur 185 Practically a Posting Shark

16 Years Ago

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

carlir 0 Newbie Poster · Answer 5 · 2010-07-22T09:41:21+00:00

carlir 0 Newbie Poster

16 Years Ago

thanks for your help

slide show scripts interfering with eachother

Dani AI

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers