adding caption/text to picture on click [Archive]

Click to See Complete Forum and Search --> : adding caption/text to picture on click

tagyerit

01-30-2003, 10:25 AM

I'm trying to create a gallery where a text link leads to a photo and description on the same page. I confess I have a very feeble grasp on writing scripts.
I have managed to get the text link to change the picture, but everything I've tried so far to get text to change at the same time I've missed something. I have found scripts that will do all this from drop down boxes and thumbnails, but I haven't been able to mesh these. Anyway, the following is the basic text link to image. You'll see that the image part works fine.

Thanks
Rich

<html>
<head>

<title>Gallery Hack</title>
<script Language="JavaScript">
var TpUrl = new Array();
TpUrl[1-1]="http://tagyerit.com/images/tp/madonna.jpg"
TpUrl[2-1]="http://tagyerit.com/images/pumpkins/guitpump1.jpg"

var PhotoDesc= new Array();
PhotoDesc[2-1] = "Second Description ";
PhotoDesc[1-1] = "First Description";

var supersizeItem='';
function showupdate(photoIndex, photoDisplayType)
{
photoIndex = photoIndex - 1;
newDesc = PhotoDesc -1;
document['bigPhoto'].src = TpUrl[photoIndex];
document['Desc'] = PhotoDesc[photoIndex];
return;
}
function supersize(NewImg, item, indexURL, photoDisplayType)
{
document.supersizelink.item.value = item;
supersizeItem = item;
document.supersizelink.indexURL.value = indexURL - 1;
document.supersizelink.photoDisplayType.value = photoDisplayType;
return;
}
function SendSuperSize()
{
if (supersizeItem == "")
{
return;
}
document.supersizelink.submit();
}
function displayDesc()
{
//The following worked at one point as a default, but I lost it when I tried to get it to change over
var introDesc = "Oregon has many covered bridges. ";
introDesc += "This bridge was built in 1932. ";
introDesc += "The camera used was a Nikon Coolpix 990.";

/* if (document.getElementById) // IE 5+ and NS 6
{
document.getElementById('Desc').innerHTML = introDesc;
}
else
if (document.layers) // NS 4
{
document.layers['Desc'].document.open();
document.layers['Desc'].document.write(introDesc);
document.layers['Desc'].document.close()
}
else
if (document.all) // IE 4
{
document.all['Desc'].innerHTML = introDesc;
}
*/
}

</script>

</head>

<body onload="displayDesc()">
<img name="bigPhoto" height="300" width="400" border="1" src="http://tagyerit.com/images/tp/madonna.jpg">
<hr>
<script language="JavaScript">
// space to put text description???
document.write(PhotoDesc);

</script>
<hr>
<br>

<form name="supersizelink" method="get">
<input type="hidden" name="photoDisplayType" value="">

</form>

<script language="JavaScript">

</script>
Madonna</a>
<script language="JavaScript">


</script>
Pumpkin Guitar</a>

</body>
</html>

tagyerit

01-30-2003, 10:23 PM

Okay Dave - Thanks that seems to be a good start. Below is a simple script that I adapted to use span, However I don't know how to get it to work with the text link (as opposed to a button) nor how to do it at the same time as the picture is selected.

<form>
<input type="button" value="Write to SPAN"
onClick="WriteToSpan()">
<span id="2-1"></span>
</form>

<SCRIPT>
function WriteToSpan(Output)
{
document.getElementById("2-1").innerHTML = "result should be result";

}
</SCRIPT>

I don't pretend to understand how this works, but I adapted the following part of the form to get a text to link to graphic (this is a portion of my original post)

<form name="supersizelink" method="get">
<input type="hidden" name="photoDisplayType" value="">

</form>

<script language="JavaScript">

</script>
Madonna</a>

Thanks again
Rich Newman

tagyerit

02-01-2003, 11:16 AM

Perfect.

I'm a little slow, but I got it.:D

I'm posting below the final result for anyone else looking for this ...:)

<html><head>
<title>Gallery: Click Text link to change image & description(Works fine on IE &Netscape but not Opera)</title>
<script Language="JavaScript">
/*
The places to add in additional image/descriptios are (each of these will be php includes)
1.picture url at TpUrl (tpurl.txt)
2.description at TpDesc (tpdesc.txt)
3. Picture name with the following code ... make sure to change var number to next consecutive one. note some of code is missing.(tplink.txt)
*/
// image array
var TpUrl = new Array();
TpUrl[1]="http://tagyerit.com/images/tp/madonna.jpg"
TpUrl[2]="http://tagyerit.com/images/pumpkins/guitpump1.jpg"

// description array
var TpDesc= new Array();
TpDesc[1] = "Madonna signed this at the end of her stint acting in League of Their Own ";
TpDesc[2] = "Pumpkin guitar";

var supersizeItem='';
function showupdate(photoIndex, photoDisplayType)
{
document['bigPhoto'].src = TpUrl[photoIndex];
document.getElementById("1").innerHTML = TpDesc[photoIndex];
return;
}

function supersize(NewImg, item, indexURL, photoDisplayType)
{
document.supersizelink.item.value = item;
supersizeItem = item;
document.supersizelink.indexURL.value = indexURL - 1;
document.supersizelink.photoDisplayType.value = photoDisplayType;
return;
}
function SendSuperSize()
{
if (supersizeItem == "")
{
return;
}
document.supersizelink.submit();
}

</script>
</head><body>
<img name="bigPhoto" height="300" width="400" border="1" src="http://tagyerit.com/images/tp/madonna.jpg">
<br>

<form name="supersizelink" method="get">
<input type="hidden" name="photoDisplayType" value="">
<span id="1">Text from first picture goes here. If statement doesn't change with clicking ... sorry this is an issue with javascript. Please let us know. </span>
</form>

<script language="JavaScript">

</script>
Madonna</a>
<script language="JavaScript">

</script>
Pumpkin Guitar</a>

</body>
</html>

tagyerit

02-04-2003, 11:04 AM

Hi Dave et al,

As I started to populate my description array, it seems to conk out after a certain amount of information has been added. Did I inadvertenly add a limit. Somewhere mid TpDesc[8] it stops working. About 2 sentences in, it still works. Then when I add another word it stops. There are earlier descriptions that are longer, and I don't see that I've added any characters that needed to be escaped.

I tried to trouble shoot by removing later descriptions one by one until it worked again and then adding words until it stopped.

The current stuck version is
http://www.tagyerit.com/tp/gallery.htm

Thanks again
Rich Newman

tagyerit

02-05-2003, 09:56 AM

It must have been a browser gremlin yesterday. Cause today I can't get it to break:rolleyes:

In this one case I'm pretty certain that it wasn't me. Maybe "ol 97" (my pc) is starting to feel its age. It was acting weird last night also.

Time to do some back ups. ....

Thanks again

Rich