Results 1 to 6 of 6

Thread: Attach txt array to image array???

  1. #1
    Join Date
    Jun 2008
    Posts
    22
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Attach txt array to image array???

    Hello,

    So I have found this wonderful script that works very nicely, it displays a new image on the 'next' or 'previous' button, (in a div called "MainImage") however, I am trying to add a function that will load a line of text in a div (called "xdiv") describing the picture.

    <script language="JavaScript">
    <!--
    // Use the following variable to specify
    // the number of images
    var NumberOfImages = 3

    var img = new Array(NumberOfImages)
    img[0] = "image.jpg"
    img[1] = "image1.jpg"
    img[2] = "image2.jpg"



    var imgNumber = 0

    function NextImage()
    {
    imgNumber++
    if (imgNumber == NumberOfImages)
    imgNumber = 0
    document.images["MainImage"].src = img[imgNumber]
    }

    function PreviousImage()
    {
    imgNumber--
    if (imgNumber < 0)
    imgNumber = NumberOfImages - 1
    document.images["MainImage"].src = img[imgNumber]
    }

    //-->
    </script>


    this is what triggers it in the body:
    <a href="javascript:PreviousImage()"><p><< previous project</p></a>
    <a href="javascript:NextImage()"><p>next project >></p></a>

    again, this script works like a charm, but I can't seem to even find a script that will call a different line of text on an event... so I am not even sure if I am trying to do something that is impossible?

    I have no problem using something like an external text file attaching the name to the picture, I just have no idea how to attach it... It would be even better if I can attach some links to the text as well, or make the image clickable, but for now, I just want text to be displayed.

    (oh and I have been playing with this a while, this is something that I just tried to see if it would work but it doesn't,)

    <script language="JavaScript">
    <!--
    // Use the following variable to specify
    // the number of images
    var NumberOfDes = 3

    var txt = new Array(NumberOfDes)
    txt[0] = "text1"
    txt[1] = "tetx2"
    txt[2] = "tetx3"



    var txtNumber = 0

    function NextDescription()
    {
    txtNumber++
    if (txtNumber == NumberOfDes)
    txtNumber = 0
    document.write["xDiv"].src = txt[txtNumber]
    }

    function PreviousDescription()
    {
    txtNumber--
    if (txtNumber < 0)
    txtNumber = NumberOfDes - 1
    document.write["xDiv"].src = txt[txtNumber]
    }

    //-->
    </script>

    And even if it was close, how do I tie this in on the eventhandler?

    Thanks for your time!
    Last edited by 03SF06; 03-07-2009 at 06:12 PM. Reason: resolved

  2. #2
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    Depends on if the <div>'s called "xdiv" in its "name" or "id". Supposing you gave <div> the id "xdiv":

    Code:
    <script type="text/javascript">
    var NumberOfImages = 3; // obviously number of images desired
    
    var img = new Array(NumberOfImages);
    img[0] = "image.jpg";
    img[1] = "image1.jpg";
    img[2] = "image2.jpg";
    
    var txt = new Array(NumberOfImages);
    txt[0] = "Text for image 1 here.";
    txt[1] = "Text for image 2 here.";
    txt[2] = "Text for image 3 here.";
    
    var imgNumber = 0;
    
    function NextImage() {
      imgNumber++;
      if (imgNumber == NumberOfImages) {
        imgNumber = 0;
      }
      document.images["MainImage"].src = img[imgNumber];
      document.getElementById("xdiv").firstChild.nodeValue = txt[imgNumber];
    }
    
    function PreviousImage() {
      imgNumber--;
      if (imgNumber < 0) {
        imgNumber = NumberOfImages - 1;
      }
      document.images["MainImage"].src = img[imgNumber];
      document.getElementById("xdiv").firstChild.nodeValue = txt[imgNumber];
    }
    </script>
    Hmm... Yes- that should do.

  3. #3
    Join Date
    Jun 2008
    Posts
    22
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    so... the pictures still rotate properly but there's no text appearing in the div with the id "xdiv"...

  4. #4
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    Please post a link to the page on your site that contains the problematic script so we can check it out. This helps us help you.
    Try this:
    Code:
    <script type="text/javascript">
    var NumberOfImages = 3; // obviously number of images desired
    
    var img = new Array(NumberOfImages);
    img[0] = "image.jpg";
    img[1] = "image1.jpg";
    img[2] = "image2.jpg";
    
    var txt = new Array(NumberOfImages);
    txt[0] = "Text for image 1 here.";
    txt[1] = "Text for image 2 here.";
    txt[2] = "Text for image 3 here.";
    
    var imgNumber = 0;
    
    function NextImage() {
      imgNumber++;
      if (imgNumber == NumberOfImages) {
        imgNumber = 0;
      }
      document.images["MainImage"].src = img[imgNumber];
      document.getElementById("xdiv").innerHTML = txt[imgNumber];
    }
    
    function PreviousImage() {
      imgNumber--;
      if (imgNumber < 0) {
        imgNumber = NumberOfImages - 1;
      }
      document.images["MainImage"].src = img[imgNumber];
      document.getElementById("xdiv").innerHTML = txt[imgNumber];
    }
    </script>

  5. The Following User Says Thank You to magicyte For This Useful Post:

    03SF06 (03-07-2009)

  6. #5
    Join Date
    Jun 2008
    Posts
    22
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Awesome! That did the trick! thanks a bunch!

  7. #6
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    (Note that "innerHTML" is considered bad practice - I tried using firstChild.nodeValue, but apparently it didn't work. I have no idea as to why...)

    Awesome! That did the trick! thanks a bunch!
    No problem.

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
  •