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

    Trying create captions for photo gallery

    I've taking two existing bits of javascript and tried to put them together. What I would like is when you click on a "Thumbnail" the Image displays full size and has corresponding "Caption" text show up in a text box below. Much thanks if you help me tie the two scripts together.

    Code:
    <style>
    .Caption {
    font-family: Arial;
    font-weight: bold;
    color:      #123456;
    }
    </style>
    
    <script language=javascript>
    var Caption = new Array(); // don't change this
    var jss = 1;
    
    var lastID = 0;
    function SelectImg(id) {
    if (lastID > 0) {
    document.getElementById(lastID).className = "thumbnail";
    }
    document.getElementById(id).className = "thumbSelected";
    document.getElementById(0).src = document.getElementById(id).src;
    
    lastID = id; if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
    jss = jss + 1;
    }
    function LoadTrigger() {
    SelectImg(1);
    }
    window.onload = LoadTrigger;
    
    Caption[1]  = "This is the first caption.";
    Caption[2]  = "This is the second caption.";
    Caption[3]  = "This is the third caption.";
    Caption[4]  = "This is the fourth caption.";
    Caption[5]  = "This is the fifth caption.";
    Caption[6]  = "This is the sixth caption.";
    Caption[7]  = "This is the seventh caption.";
    Caption[8]  = "This is the eighth caption.";
    Caption[9]  = "This is the ninth caption.";
    Caption[10] = "This is the tenth caption.";
    Caption[11] = "This is the tenth caption.";
    Caption[12] = "This is the tenth caption.";
    Caption[13] = "This is the tenth caption.";
    
    </script>

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    Arrays start at zero
    Code:
    Caption[0]
    Caption[1]
    ....
    It's not a good idea to give a id the value of 0
    Code:
    document.getElementById(0).src
    Since the script requires the browser to support 'document.getElementBy'
    no need for the if statement here
    Code:
    if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
    You could add a browser check before any of the script is ran
    Code:
    function SelectImg(id) {
    if (!document.getElementById) {
    return false; // or true if you want a link to fire for non-supported browsers
    }
    ....
    You could pass the caption index with the image id
    Code:
    function SelectImg(id,cap) {
    ....
    document.getElementById(0).src = document.getElementById(id).src;
    document.getElementById("CaptionBox").innerHTML= Caption[cap];
    ....
    ----
    
    SelectImg(1,0)  // call with
    An example link that calls the SelectImg function would be helpful

  • #3
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Sample of link, I think

    I think this is what you mean. Thanks for you help rwedge.

    <td width="80" height="48" colspan="3" valign="top" align="left" xpos="16"><img id=1 class="thumbnail" src="print1.jpg" alt="" height="48" width="48" border="0" onclick="SelectImg(1)"> </td>

  • #4
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    Give this a try;
    Code:
    <script type="text/javascript">
    var Caption=[["This is the first caption."],
                 ["This is the second caption."],
                 ["This is the third caption."],
                 ["This is the fourth caption."],
                 ["This is the fifth caption."],
                 ["This is the sixth caption."],
                 ["This is the seventh caption."],
                 ["This is the eighth caption."],
                 ["This is the ninth caption."],
                 ["This is the tenth caption."],
                 ["This is the eleventh caption."],
                 ["This is the twelvth caption."],
                 ["This is the thirthenth caption."]];
    var lastID = 0;
    function SelectImg(id,cap) {
    if (!document.getElementById) {
    return;
    }
    if (lastID > 0) {
    document.getElementById(lastID).className = "thumbnail";
    }
    document.getElementById(id).className = "thumbSelected";
    document.getElementById(0).src = document.getElementById(id).src;
    document.getElementById("CaptionBox").innerHTML= Caption[cap];
    lastID = id;
    return false;
    }
    window.onload=function() {
    SelectImg(1,0);
    }
    </script>

    Code:
    <img id="1" class="thumbnail" src="print1.jpg" alt="" height="48" width="48" border="0" onclick="SelectImg(1,0)">
    <img id="2" class="thumbnail" src="print2.jpg" alt="" height="48" width="48" border="0" onclick="SelectImg(2,1)">

  • #5
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks Very much

    That worked great!


  •  

    Posting Permissions

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