Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Slideshow where clicking 'next' changes two images

    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>:
    Code:
    <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>:
    Code:
       <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>

  • #2
    New Coder
    Join Date
    Aug 2006
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You cannot have 2 processPrevious() and 2 processNext() at the same time.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your help. It makes sense now!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •