...

View Full Version : Trying create captions for photo gallery



help.is.needed
08-20-2007, 02:53 AM
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.


<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>

rwedge
08-20-2007, 05:10 AM
Arrays start at zero

Caption[0]
Caption[1]
....

It's not a good idea to give a id the value of 0

document.getElementById(0).src

Since the script requires the browser to support 'document.getElementBy'
no need for the if statement here
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
You could add a browser check before any of the script is ran
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
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

help.is.needed
08-20-2007, 05:30 AM
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>

rwedge
08-20-2007, 06:22 AM
Give this a try;
<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>



<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)">

help.is.needed
08-21-2007, 02:06 AM
That worked great!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum