I am wanting to have slide shows of different albums on my page, the problem was 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. 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?
you can see the page at http://solitaryharmony.com/main.html#images
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 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;">©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;">©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>