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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Captions in a slideshow...please help

    I successfully created a slideshow format but need to add quite a bit of text as a caption to each image. I'm at a loss for how to do so and attempts to incorporate snippets from other codes online have failed. I'm a Javascript novice and any help would be greatly appreciated. Thanks very much. Here's what I have:

    <html>
    <body>
    <script language="Javascript">

    var myPix = new Array(1,2,3)
    var thisPic = 0
    function previous() {

    thisPic --;

    if (thisPic < 0) {

    thisPic = 2;

    }

    document.myPicture.src = "/images/buyingselling/20050711-retreats-" + myPix[thisPic] + ".jpg";

    }

    function next() {

    thisPic ++;

    if (thisPic > 2) {

    thisPic = 0;

    }


    document.myPicture.src = "/images/buyingselling/20050711-retreats-" + myPix[thisPic] + ".jpg";


    }

    </script>
    <p>


    <p>
    Intro text goes here</p>

    </p>

    </p>

    </p>
    <div style="width:315px;">
    <p align="center">
    <font face="Arial" size="2">
    <a href="javascript:previous()">&lt; Previous</a> |
    <a href="javascript:next()">Next &gt;</a> </font>
    </p>


    <p style="text-align:center;">


    <img border="0" src="/images/buyingselling/20050711-retreats-1.jpg" width="315" height="600" name="myPicture">
    </p>
    <p>Default image caption text</p>
    <p style="text-align:center;">
    <font face="Arial" size="2">
    <a href="javascript:previous()">&lt; Previous</a> |
    <a href="javascript:next()">Next &gt;</a> </font>
    </p>
    </div>








    </body>

    </html>

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    Here's an example based on your code so far:
    Code:
    <html>
    <head>
    <title>  </title>
    <script language="Javascript">
    var myPix = new Array(1,2,3)
    var thisPic = 0
    var myText = new Array('This is the first pic','Now looking at number 2','Last picture');
    function previous() {
    thisPic --;
    if (thisPic < 0) {
    thisPic = 2;
    }
    document.myPicture.src = "/images/buyingselling/20050711-retreats-" + myPix[thisPic] + ".jpg";
    document.getElementById('picText').innerHTML=myText[thisPic];
    }
    
    function next() {
    thisPic ++;
    if (thisPic > 2) {
    thisPic = 0;
     }
    document.myPicture.src = "/images/buyingselling/20050711-retreats-" + myPix[thisPic] + ".jpg";
    document.getElementById('picText').innerHTML=myText[thisPic];
    }
    </script>
    </head>
    </html>
    <p>
    <p>
    <p>
    <p>Intro text goes here</p>
    </p>
    </p>
    </p>
    <div style="width:315px;">
    <p align="center">
    <font face="Arial" size="2">
    <a href="javascript:previous()">&lt; Previous</a> | 
    <a href="javascript:next()">Next &gt;</a> </font>
    </p>
    <p style="text-align:center;">
    <img border="0" src="/images/buyingselling/20050711-retreats-1.jpg" width="315" height="600" name="myPicture">
    </p>
    <p id="picText"> Default image caption text </p>
    <p style="text-align:center;">
    <font face="Arial" size="2">
    <a href="javascript:previous()">&lt; Previous</a> | 
    <a href="javascript:next()">Next &gt;</a> </font>
    </p>
    </div>
    
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks very much! This worked wonders. Much appreciated.


  •  

    Posting Permissions

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