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
    May 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image Gallery Captions

    Hi Everyone,

    I've got a simple javascript image gallery I'm using, but I was wondering if it would be possible to use HTML in the description area. Basically I want to be able to create paragraphs, bold text, and links in the description area. Is it possible? Here's what I'm using:

    <script type="text/javascript" language="javascript">
    function showPic (whichpic) {
    if (document.getElementById) {
    document.getElementById('placeholder')»
    .src = whichpic.href;
    if (whichpic.title) {
    document.getElementById('desc')»
    .childNodes[0].nodeValue = whichpic.title;
    } else {
    document.getElementById('desc')»
    .childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
    }
    return false;
    } else {
    return true;
    }
    }
    </script>

    Then the markup:

    <img id="placeholder" src="images/twoBottles.jpg" alt="" /> (Where the image appears)

    <p id="desc">Choose an image to begin</p> (Where the image descriptions appear)

    <a onclick="return showPic(this)" href="images/condiments.jpg" title="The description which in some cases is 2 or 3 paragraphs long and I would like to format somehow">two bottles</a> (clicking this text opens that picture in the image area)

  • #2
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    You should be able to use .innerHTML instead of .childNodes[0].nodeValue

    Please, do enclose your code in the proper tags next time, makes it much more readable.
    The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

    How to ask smart questions?

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'll give that a try, I"ll play around with it and report back. Also I wasn't aware of the code tags, thanks for the tip Eldarrin, I'll remember that next time.

  • #4
    New to the CF scene
    Join Date
    May 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmm I'm having a bit of trouble figuring it out, I'm not too experienced with javascript so I looked for a tutorial and found one at tizag but I'm not entirely sure what to do.

    Basically I want to be able to go from:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lobortis congue blandit. Aenean eleifend dolor non nisi eleifend in molestie enim mattis. Nullam pellentesque condimentum massa quis hendrerit. Aliquam malesuada varius luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar lobortis tincidunt.

    To:

    Lorem ipsum
    dolor sit amet

    consectetur adipiscing elit. Praesent lobortis congue blandit. Aenean eleifend dolor non nisi eleifend in molestie enim mattis. Nullam pellentesque condimentum massa quis hendrerit.

    Aliquam malesuada varius luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar lobortis tincidunt.

  • #5
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    You mean something like:

    Code:
    document.getElementById("desc").innerHTML("<strong>Lorem ipsum</strong><br /><a href='http://somewhere.com'>dolor sit amet
    </a><br /><br /><p>consectetur adipiscing elit. Praesent lobortis congue blandit. Aenean eleifend dolor non nisi eleifend in molestie enim mattis. Nullam pellentesque condimentum massa quis hendrerit.</p>");
    It's not exactly difficult. Just use .innerHTML and stuff the full html code in there? Essentially what it does is strip everything between the start and end tags of the selected element and replace it with the text you give it.
    The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

    How to ask smart questions?


  •  

    Posting Permissions

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