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://www.webdeveloper.com/forum/archive/index.php/"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">
<!--
var number = 1;
document.write('<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript: showupdate(' + number + ',0)">')
//-->
</script>
Madonna</a>
<script language="JavaScript">
<!--
var number = 2;
document.write('<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript: showupdate(' + number + ',0)">')
//-->
</script>
Pumpkin Guitar</a>
</body>
</html>
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://www.webdeveloper.com/forum/archive/index.php/"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">
<!--
var number = 1;
document.write('<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript: showupdate(' + number + ',0)">')
//-->
</script>
Madonna</a>
<script language="JavaScript">
<!--
var number = 2;
document.write('<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript: showupdate(' + number + ',0)">')
//-->
</script>
Pumpkin Guitar</a>
</body>
</html>