SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member abosiger's Avatar
    Join Date
    Aug 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Add captions to simple JavaScript slideshow

    Hi There,

    I'd like to add captions to this this simple JavaScript slideshow. I have looked and looked and can't find one that doesn't use tables for the captions. I'd really like to stick to <divs> if possible.
    Thanks so much

    Code JavaScript:
    <script language="JavaScript">
    var i = 0;
    var path = new Array();
     
    // LIST OF SLIDES
    path[0] = "images/1.gif";
    path[1] = "images/2.gif";
    path[2] = "images/3.gif";
    path[3] = "images/4.gif";
    path[4] = "images/5.gif";
     
    function swapImage()
    {
       document.slide.src = path[i];
       if(i < path.length - 1) i++; else i = 0;
       setTimeout("swapImage()",3000);
    }
    </script>
     
     
    <body onLoad="swapImage()">
     
    <img name="slide" height=200 width=400 src="1.gif">

  2. #2
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I understood,

    Code JavaScript:
    <script type="text/javascript">
    var i = 0;
    var path = new Array();
    var captions = new Array();
    // LIST OF SLIDES
    path[0] = "images/1.gif";
    path[1] = "images/2.gif";
    path[2] = "images/3.gif";
    path[3] = "images/4.gif";
    path[4] = "images/5.gif";
     
    var caption = new Array();
    // LIST OF CAPTİONS
     
    caption[0] = "The Time Through Ages.";
    caption[1] = "In the Name of Allah, Most Gracious, Most Merciful.";
    caption[2] = "1. By the Time, ";
    caption[3] = "2. Verily Man is in loss,";
    caption[4] = "3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.";
     
    function swapImage()
    {
    var el = document.getElementById("mydiv");
    el.innerHTML=caption[i];
    var img= document.getElementById("slide");
    img.src= path[i];
       if(i < path.length - 1) i++; else i = 0;
       setTimeout("swapImage()",5000);
    alert(document.body.innerHTML);
     
    }
    </script>
     
     
    <body onLoad="swapImage()">
     
    <div id ="mydiv"></div><img name="slide" id="slide" height=200 width=400 src="1.gif">
    BismillahirrahmanirrahÓm
    Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  3. #3
    SitePoint Member abosiger's Avatar
    Join Date
    Aug 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, something like that. I tried it out but I keep getting a [JavaScript Application] error that includes the html code:

    <img name="slide" id="slide" height=200 width=400 src="law1.jpg"/>
    <div id ="mydiv"></div>

    I've attached a screenshot of the error prompt.

    Here's how I have my code

    Code JavaScript:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
     
    <script type="text/javascript">
    var i = 0;
    var path = new Array();
    var captions = new Array();
    // LIST OF SLIDES
    path[0] = "images/law1.jpg";
    path[1] = "images/law2.jpg";
    path[2] = "images/law3.jpg";
     
     
    var caption = new Array();
    // LIST OF CAPTİONS
     
    caption[0] = "The Time Through Ages.";
    caption[1] = "In the Name of Allah, Most Gracious, Most Merciful.";
    caption[2] = "1. By the Time, ";
     
     
    function swapImage()
    {
    var el = document.getElementById("mydiv");
    el.innerHTML=caption[i];
    var img= document.getElementById("slide");
    img.src= path[i];
       if(i < path.length - 1) i++; else i = 0;
       setTimeout("swapImage()",5000);
    alert(document.body.innerHTML);
     
    }
    </script>
    </head>
     
    <body>
     
     
    <body onLoad="swapImage()">
    <img name="slide" id="slide" height=200 width=400 src="law1.jpg"/>
    <div id ="mydiv"></div>
     
     
    </body>
    </html>

    Many Thanks
    Attached Files Attached Files

  4. #4
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://validator.w3.org/

    I uploaded the document for validation.
    It display the errors found while checking this document as XHTML 1.0 Transitional!
    As far as I know, I corrected the errors.

    Code JavaScript:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
     
    <script type="text/javascript">
    var i = 0;
    var path = new Array();
     
    // LIST OF SLIDES
    path[0] = "images/law1.jpg";
    path[1] = "images/law2.jpg";
    path[2] = "images/law3.jpg";
     
    var k = path.length-1; 
     
    var caption = new Array();
    // LIST OF CAPTİONS
     
    caption[0] = "The Time Through Ages.";
    caption[1] = "In the Name of Allah, Most Gracious, Most Merciful.";
    caption[2] = "1. By the Time, ";
     
     
    function swapImage(){
    var el = document.getElementById("mydiv");
    el.innerHTML=caption[i];
    var img= document.getElementById("slide");
    img.src= path[i];
     
    if(i < k ) { i++;} 
    else  { i = 0; }
    setTimeout("swapImage()",5000);
    // alert(document.body.innerHTML);
     
    }
     
    // Multiple onload function written by: Simon Willison
    // [url]http://simonwillison.net/2004/May/26/addLoadEvent/[/url]
    function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
    window.onload = func;
    } else {
    window.onload = function() {
    if (oldonload) {
    oldonload();
    }
    func();
    }
    }
    }
     
    addLoadEvent(function() {
    swapImage();
    }); 
    </script>
    </head>
    <body>
    <img name="slide" id="slide" alt ="my images" height="200" width="400" src="images/law1.jpg"/>
    <div id ="mydiv"></div>
     
    </body>
    </html>
    BismillahirrahmanirrahÓm
    Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  5. #5
    SitePoint Member abosiger's Avatar
    Join Date
    Aug 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's it, looks great! Thank you so much.


Bookmarks

Posting Permissions

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