photo thumbnail and full view pages

**idsanjeev** · Jul 14 '08, 11:28 AM

You can do it with the help of javascripts
try this code

Code:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
<!--Insert this code in the body section and set with your images-->
<script language="javascript" type="text/javascript">

<!-- Begin
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);

ns3up = (browserName == "Netscape" && browserVer >= 3);
ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);

function doPic(imgName) {
if (ns3up || ie4up) {
imgOn = ("" + imgName);
document.mainpic.src = imgOn;
   }
}
//  End -->
</script>
<center>
<table width=360 border=1 cellspacing=0 cellpadding=0>
<tr>
<td><a href="javascript:doPic('img1.jpg');"><img src="img1.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('img2.jpg');"><img src="img2.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('img3.jpg');"><img src="img3.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('img4.jpg');"><img src="img4.jpg" width=90 height=60 border=0></a></td>
</tr>
<tr>
<td colspan=4 align=center><img name="mainpic" src="img1.jpg" width=365 height=190 border=0></td>
</tr>
</table>
</center>
</body>
</html>

**alex091088180189** · Jul 14 '08, 12:27 PM

thanks for that - apart from the java the thumbnails work a treat - for some reason the javascript doesn't work - is there something extra that I need? maybe another app installed or something

Anyways - like I said code is ace. One thing though - is there a way that I can get the photos opening up on their own instead of in a bigger box underneath the thumbnails? I don't really want to go through and put seperate pages for all the pictures so that they open up in their own window, but I'd prefer it to open the picture full size with no thumbnails, then have maximum thumbnails on a page

would this be easier linking into a SQL database, as I have a fair few hundred photos to put on here if it works. If so how would I integrate SQL into this? and make it so that I could have one full page for photos and have it just display a photo full size based on what was clicked?

sorry this is starting to get too much to ask i know!!! really grateful!!!

**jeffstl** · Jul 14 '08, 07:22 PM

Yes you are asking alot.

The javascript posted works fine for me . Quite excellent in fact. If its not working for you make sure the image paths are all correct

Yes if you have that many images to deal with you would want to generate a page like the one posted for each set of images or an array of images read from a database. That way you can build ONE page that can be built to handle searches or navigation through the many images.

A database table with all the image paths\names in it would work fine. Then you would read, loop through and write out a given set of images into a dynamic page of the one posted above. Changing the number of images shown at once to whatever you desire.

If you want a link to the full image then just have a link open a new window when they click on the main image that points directly to the image itself, rather then a html page, or asp page. (Like link directly to http://www.mysite.com/images/imagename.jpg )

**jeffstl** · Jul 14 '08, 07:24 PM

I guess also if you are not sure how to do all this you would need to read up on using ASP with Access or MySQL or whatever database you are using.

**idsanjeev** · Jul 15 '08, 09:32 AM

Originally posted by alex09108818018 9

thanks for that - apart from the java the thumbnails work a treat - for some reason the javascript doesn't work - is there something extra that I need? maybe another app installed or something

Anyways - like I said code is ace. One thing though - is there a way that I can get the photos opening up on their own instead of in a bigger box underneath the thumbnails? I don't really want to go through and put seperate pages for all the pictures so that they open up in their own window, but I'd prefer it to open the picture full size with no thumbnails, then have maximum thumbnails on a page

would this be easier linking into a SQL database, as I have a fair few hundred photos to put on here if it works. If so how would I integrate SQL into this? and make it so that I could have one full page for photos and have it just display a photo full size based on what was clicked?

sorry this is starting to get too much to ask i know!!! really grateful!!!

After putting codes in body section it working fine .
i don't know whats your need to display all photo thumbnail you may use it with slide show or fader image show and display it on actual size of image popup window or in photo thumbnail sow it with expanded size on mouse over .
otherwise if you think this be easier linking into a SQL database then try it .
if you don't mind post your code here if getting any easier way ......
thanks
jha

**alex091088180189** · Jul 16 '08, 09:56 PM

Originally posted by jeffstl

Yes you are asking alot.

The javascript posted works fine for me . Quite excellent in fact. If its not working for you make sure the image paths are all correct

Yes if you have that many images to deal with you would want to generate a page like the one posted for each set of images or an array of images read from a database. That way you can build ONE page that can be built to handle searches or navigation through the many images.

A database table with all the image paths\names in it would work fine. Then you would read, loop through and write out a given set of images into a dynamic page of the one posted above. Changing the number of images shown at once to whatever you desire.

If you want a link to the full image then just have a link open a new window when they click on the main image that points directly to the image itself, rather then a html page, or asp page. (Like link directly to http://www.mysite.com/images/imagename.jpg )

yes after looking closely at the code i didn't realise i needed to put the image name in both

<td><a href="javascrip t:doPic('img2.jpg');"> <img src="img2.jpg" width=90 height=60 border=0></a></td>

and

<td><a href="javascrip t:doPic('img2.j pg');"><img src="img2.jpg" width=90 height=60 border=0></a></td>

quite how i managed to decide that it didn't need to go in both i don't know

The original idea was going to have the pictures open up larger in a seperate window - but i wanted to avoid navigating the person away from the website if at all possible. That's why i wanted the picture to open up in another html page that was linked into the photo album. But i migh tre-think that and add it in if i have time

at the moment we are using SQL database elsewhere on the site for other things so hopefully I can use this to help the user select different albums

@ idsanjeev

the reason i don't want to use the java window or a fader/slideshow feature is because each album is potentially 100+ photos, so I wanted to minimise caching and loading times

thanks for all your help :)

photo thumbnail and full view pages

photo thumbnail and full view pages

Comment

Comment

Comment

Comment

Comment

Comment