0

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;">&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>
1
Contributor
1
Reply
2
Views
7 Years
Discussion Span
Last Post by carlir
0

I got it. 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>
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.