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)

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.

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.

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 (http://www.codingforums.com)

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.

You mean something like:


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.