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 Coder
    Join Date
    Jan 2009
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Caption for images

    Here is the code im using for a slideshow, i would like to add a title and or a caption to each image, could someone help with this please?

    Code:
    <td width="33%"><h4><u><center>Slideshow</center></u><br/><img src="Images/img1.jpg" name="photoslider">
        <div align="center">
    
        <script type= "text/javascript">
    
    var photos=new Array();
    var which=0;
    
    photos[0]="Images/img1.jpg"
    photos[1]="Images/img2.jpg"
    photos[2]="Images/img3.jpg"
    photos[3]="Images/img4.jpg"
    photos[4]="Images/img5.jpg"
    photos[5]="Images/img6.jpg"
    
    function backward(){
    if (which>0){
    window.status='';
    which-- ;
    document.photoslider.src=photos[which];
    }
    }
    
    function forward(){
    if (which<photos.length-1){
    which++ ;
    document.photoslider.src=photos[which];
    }
    else window.status='End of gallery';
    }
    
        </script>
    
    <br>
    <input type="button" value="&lt;&lt; Back" name="B2" onClick="backward()"> 
    <input type="button" value="Next &gt;&gt;" name="B1" onClick="forward()">
    <br><br>
    
          <a href="#" onClick="which=1;backward();return false"><font face="Arial, Helvetica" color="#0000FF"><small><b>Go to the first image</b></small></a>&nbsp;&nbsp;&nbsp;&nbsp;</p>
          <a href="#" onClick="which=photos.length-2; forward(); return false"><font face="Arial, Helvetica" color="#0000FF"><small><b>Go to the last image</b></small></a>
          </p>

  • #2
    Regular Coder mic2100's Avatar
    Join Date
    Feb 2006
    Location
    Scunthorpe
    Posts
    562
    Thanks
    15
    Thanked 28 Times in 27 Posts
    hey you wud do sumthing like

    Code:
    photos[0]="Images/img1.jpg"
    photos[1]="Images/img2.jpg"
    photos[2]="Images/img3.jpg"
    photos[3]="Images/img4.jpg"
    photos[4]="Images/img5.jpg"
    photos[5]="Images/img6.jpg"
    
    alt[0]="Text in here 0"
    alt[1]="Text in here 1"
    alt[2]="Text in here 2"
    alt[3]="Text in here 3"
    alt[4]="Text in here 4"
    alt[5]="Text in here 5"
    
    //then change this function 
    function forward(){
    if (which<photos.length-1){
    which++ ;
    document.photoslider.src=photos[which];
    document.photoslider.alt=alt[which];
    }
    else window.status='End of gallery';
    }
    hope this helps

  • #3
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    try something like this;
    append caption to the end of the image data, then split it in the loop.

    PHP Code:
    <td width="33%"><h4><u><center>Slideshow</center></u><br/><img src="Images/img1.jpg" name="photoslider">
    <
    div id='Caption'></div>
        <
    div align="center">

        <
    script type"text/javascript">

    var 
    photos=new Array();
    var 
    which=0;

    photos[0]="Images/img1.jpg|test test test"
    photos[1]="Images/img2.jpg|test test test"
    photos[2]="Images/img3.jpg|test test test"
    photos[3]="Images/img4.jpg|test test test"
    photos[4]="Images/img5.jpg|test test test"
    photos[5]="Images/img6.jpg|test test test"

    function backward(){
    if (
    which>0){
    window.status='';
    which-- ;
    document.photoslider.src=photos[which];
    }
    }

    function 
    forward(){
    if (
    which<photos.length-1){
    which++ ;

    ImageString photos[which];
    ImageData ImageString.split("|");

    document.photoslider.src=ImageData[0];
    document.Caption.innerHTML=ImageData[1];
    }
    else 
    window.status='End of gallery';
    }

        
    </script>

    <br>
    <input type="button" value="&lt;&lt; Back" name="B2" onClick="backward()"> 
    <input type="button" value="Next &gt;&gt;" name="B1" onClick="forward()">
    <br><br>

          <a href="#" onClick="which=1;backward();return false"><font face="Arial, Helvetica" color="#0000FF"><small><b>Go to the first image</b></small></a>&nbsp;&nbsp;&nbsp;&nbsp;</p>
          <a href="#" onClick="which=photos.length-2; forward(); return false"><font face="Arial, Helvetica" color="#0000FF"><small><b>Go to the last image</b></small></a>
          </p> 


  •  

    Posting Permissions

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