Log in

View Full Version : view 3 sizes of image - help please !


solder_on
05-18-2007, 12:32 PM
I am very much a beginner in html & javascript, and have a bit of a mental block when it comes to coding, so any help you can give me would be very much appreciated.

I have cobbled together a gallery page (most of the source was picked up from the 'net, and I am most grateful for it but have been to so many sites that I can't remember where I got it so am unable to give credit where credit's due). My gallery has thumbnails and a larger image. When you click on the thumbnail you also get the title of the image displayed above the larger image, and a related description displayed below it. It's probably most inelegant, but it's taken me days to make it work and I don't want to start again from scratch if I can help it.

What I would like to do is to be able to click on the larger image & get it to display a new page with a very big image. It needs no frills or titles. Does anyone know of a simple way to do this please ?

My code is attached below. Apologies if I haven't posted this correctly, but it's my very first time...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/javascript">
<!--
var imgSrc = new Array();
imgSrc[0] = "images/default_medium_image.jpg";

imgSrc[1] = "images/medium_image1.jpg";
imgSrc[2] = "images/medium_image2.jpg";
imgSrc[3] = "images/medium_image3.jpg";
imgSrc[4] = "images/medium_image3.jpg";
imgSrc[5] = "images/medium_image4.jpg";
imgSrc[6] = "images/medium_image5.jpg";



var captions = new Array();
captions[0] = "default image caption";
captions[1] = "caption1";
captions[2] = "caption2";
captions[3] = "caption3";
captions[4] = "caption4";
captions[5] = "caption5";
captions[6] = "caption6";


var text = new Array();
text[1] = "description for image 1";
text[2] = "description for image 2";
text[3] = "description for image 3";
text[4] = "description for image 4";
text[5] = "description for image 5";
text[6] = "description for image 6";

function doPic(imgId) {
document.getElementById('mainpic').src = imgSrc[imgId];
document.getElementById('caption').innerHTML = captions[imgId];
document.getElementById('text').innerHTML = text[imgId];
}
// -->
</script>
<style type="text/css">
<!--
.style1 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style2 {
font-size: medium;
color: #999999;
}
-->
</style>

</head>

<body>


<table width="100%" height="395" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="395" align="left" valign="top"><table width="100%" height="376" border="0" cellpadding="10" cellspacing="0">
<tr>
<td align="left" valign="top"><p>&nbsp;</p>
<table width="100%
" height="450" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><div align="center">
<img src="images/thumbnail1.jpg" onclick="doPic('1');" />&nbsp;
<img src="images/thumbnail2.jpg" onclick="doPic('2');" />&nbsp;
<img src="images/thumbnail3.jpg" onclick="doPic('3');" />&nbsp;
<img src="images/thumbnail4.jpg" onclick="doPic('4');" />&nbsp;
<img src="images/thumbnail5.jpg" onclick="doPic('5');" />&nbsp;
<img src="images/thumbnail6.jpg" onclick="doPic('6');" />&nbsp;
</tr>
<tr>
<td align="center"><div align="center" class="style1 style2" id="caption">default image caption</div>
<img id="mainpic" src="images/default_medium_image.jpg" border="0" /></td>
</tr>
<tr>
<td align="center"><span id="caption"></span> </td>
</tr>
<tr>
<td align="center"><div align="center"><span id="text">description for image 1</span> </div></td>
</tr>
<tr>
<td align="center"><div align="center"><span id="text"></span> </div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Bob90
05-18-2007, 05:01 PM
Not remebering who made something is not an excuse! Find who it was so they can have the credit. :mad:



<script type="text/javascript">
<!--
var imgSrc = new Array();
imgSrc[0] = "images/default_medium_image.jpg";

imgSrc[1] = "images/medium_image1.jpg";
imgSrc[2] = "images/medium_image2.jpg";
imgSrc[3] = "images/medium_image3.jpg";
imgSrc[4] = "images/medium_image3.jpg";
imgSrc[5] = "images/medium_image4.jpg";
imgSrc[6] = "images/medium_image5.jpg";

var imgLink = new Array();
imgLink [0] = "http://www.example.com/";

imgLink [1] = "http://www.example.com/";
imgLink [2] = "http://www.example.com/";
imgLink [3] = "http://www.example.com/";
imgLink [4] = "http://www.example.com/";
imgLink [5] = "http://www.example.com/";
imgLink [6] = "http://www.example.com/";


var captions = new Array();
captions[0] = "default image caption";
captions[1] = "caption1";
captions[2] = "caption2";
captions[3] = "caption3";
captions[4] = "caption4";
captions[5] = "caption5";
captions[6] = "caption6";


var text = new Array();
text[1] = "description for image 1";
text[2] = "description for image 2";
text[3] = "description for image 3";
text[4] = "description for image 4";
text[5] = "description for image 5";
text[6] = "description for image 6";

function doPic(imgId) {
document.getElementById('mainanchor').href= imgLink[imgId];
document.getElementById('mainpic').src = imgSrc[imgId];
document.getElementById('caption').innerHTML = captions[imgId];
document.getElementById('text').innerHTML = text[imgId];
}
// -->
</script>
<style type="text/css">
<!--
.style1 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style2 {
font-size: medium;
color: #999999;
}
-->
</style>

</head>

<body>


<table width="100%" height="395" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="395" align="left" valign="top"><table width="100%" height="376" border="0" cellpadding="10" cellspacing="0">
<tr>
<td align="left" valign="top"><p>&nbsp;</p>
<table width="100%
" height="450" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><div align="center">
<img src="images/thumbnail1.jpg" onclick="doPic('1');" />&nbsp;
<img src="images/thumbnail2.jpg" onclick="doPic('2');" />&nbsp;
<img src="images/thumbnail3.jpg" onclick="doPic('3');" />&nbsp;
<img src="images/thumbnail4.jpg" onclick="doPic('4');" />&nbsp;
<img src="images/thumbnail5.jpg" onclick="doPic('5');" />&nbsp;
<img src="images/thumbnail6.jpg" onclick="doPic('6');" />&nbsp;
</tr>
<tr>
<td align="center"><div align="center" class="style1 style2" id="caption">default image caption</div>
<a id="mainanchor" href=""><img id="mainpic" src="images/default_medium_image.jpg" border="0" /></a></td>
</tr>
<tr>
<td align="center"><span id="caption"></span> </td>
</tr>
<tr>
<td align="center"><div align="center"><span id="text">description for image 1</span> </div></td>
</tr>
<tr>
<td align="center"><div align="center"><span id="text"></span> </div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

I haven't tested this.
solder_on
05-18-2007, 07:47 PM
You are absolutely right about the credit - and I have searched long and hard to find where I got the original from, and it' here...

http://w3schools.invisionzone.com/index.php?showtopic=9443&hl=gallery+caption

so thank you very much to the original authors.

It has now changed quite a bit, and I hope that it can also be of use to others.

I have added your mods, and included a 'target=_blank' to make it open in a new page. It all works perfectly apart from if you click on the default medium sized image, although it does if you select that image by clicking on the thumbnail (I hope that makes sense).

Thank you so much for your help - it is very much appreciated. I shall put an acknowledgement in my code to ensure that credit goes where it's due.
Bob90
05-19-2007, 05:12 AM
Just add an onload function to initialise the anchors href.

eg


document.onload = inithref

function inithref()
{
document.getElementById("mainanchor").href = imgLink[0];
}



Congrats on finding the creator too.

:)
solder_on
05-20-2007, 11:04 AM
Many thanks for the reply.

I added your additional piece of code into the header section of my page, but it didn't seem to make any difference. Perhaps I put it in the wrong place ? As I said, I really don't have a clue when it comes to coding...

Anyway, it occurred to me that I could just make the default medium-sized image a straight link to the larger one, and that seems to work.

Many thanks again for your help - these pages seem to be crammed with good stuff. I only wish I understood a small fraction of it !!