...

View Full Version : Slideshow where clicking 'next' changes two images



matazz
08-29-2006, 03:20 AM
Hello,

I'm new to Javascript and this forum has been a great resource! There is one issue I am having that I can't find a solution for.

I have a slideshow where clicking the 'previous' or 'next' button should scroll through a series of paintings (saved as images) and a series of corresponding captions (also saved as images, because of the font).

If I just have the slideshow scroll through the paintings there is no problem. If I add in the same javascript code to the captions, none of the javascript on the page works. (including swapimage functions elsewhere on the page)

Any help would be appreciated!

Here is my code:

In the <head>:


<script language="javascript" type="text/javascript">
<!--
<!-- Hide Script from old browsers

myPix1 = new Array("collage1.jpg","collage2.jpg","collage3.jpg","collage4.jpg","collage5.jpg","collage6.jpg","collage7.jpg","collage8.jpg","collage9.jpg","collage10.jpg")

thisPic1 = 0

imgCt = myPix1.length - 1

function processPrevious() {
if (document.images && thisPic1 > 0) {
thisPic1--
document.myPicture.src=myPix1 [thisPic1]
}
}

function processNext() {
if (document.images && thisPic1 < imgCt) {
thisPic1++
document.myPicture.src=myPix1 [thisPic1]
}
}


myPix2 = new Array("col_capt1.jpg","col_capt2.jpg","col_capt3.jpg","col_capt4.jpg","col_capt5.jpg","col_capt6.jpg","col_capt7.jpg","col_capt8.jpg","col_capt9.jpg","col_capt10.jpg",)

thisPic2 = 0

imgCt = myPix2.length - 1

function processPrevious() {
if (document.images && thisPic2 > 0) {
thisPic2--
document.caption.src=myPix2 [thisPic2]
}
}

function processNext() {
if (document.images && thisPic2 < imgCt) {
thisPic2++
document.caption.src=myPix2 [thisPic2]
}
}

// End hiding script from old browsers -->


In the <body>:


<img style="position:absolute; top:100px; left:20px; width:364px; height:353px; border:0" src="collage1.jpg" name="myPicture" alt="slideshow" />
<img src="col_capt1.jpg" alt="info" name="caption" width="317" height="110" hspace="0" vspace="0" border="0" align="right" id="caption" style="position:absolute; top:330px; left:385px; width:317px; height:100px; border:0" />


<a href="javascript:processPrevious()"><img style="position:absolute; top:450px; left:20px; width:72px; height:37px; border:0" src="button_back.jpg" alt="back button" width="72" height="37" /></a>
<a href="javascript:processNext()"><img style="position:absolute; top:450px; left:92px; width:72px; height:37px; border:0" src="button_next.jpg" alt="back button" width="72" height="37" /></a>

Wylie
08-29-2006, 04:53 AM
You cannot have 2 processPrevious() and 2 processNext() at the same time.

vwphillips
08-29-2006, 09:55 AM
<script language="javascript" type="text/javascript">
<!--
<!-- Hide Script from old browsers

myPix1 = new Array("collage1.jpg","collage2.jpg","collage3.jpg","collage4.jpg","collage5.jpg","collage6.jpg","collage7.jpg","collage8.jpg","collage9.jpg","collage10.jpg")
myPix2 = new Array("col_capt1.jpg","col_capt2.jpg","col_capt3.jpg","col_capt4.jpg","col_capt5.jpg","col_capt6.jpg","col_capt7.jpg","col_capt8.jpg","col_capt9.jpg","col_capt10.jpg",)

thisPic1 = 0

imgCt = myPix1.length - 1

function processPrevious() {
if (document.images && thisPic1 > 0) {
thisPic1--
document.myPicture.src=myPix1 [thisPic1]
document.caption.src=myPix2 [thisPic1]
}
}

function processNext() {
if (document.images && thisPic1 < imgCt) {
thisPic1++
document.myPicture.src=myPix1 [thisPic1]
document.caption.src=myPix2 [thisPic1]
}
}




// End hiding script from old browsers -->

//-->
</script>

matazz
08-30-2006, 02:14 AM
Thanks for your help. It makes sense now!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum