Forum Home
Press F1
 
Thread ID: 62144 2005-09-28 04:09:00 Javascript Probelm CorbinH (37) Press F1
Post ID Timestamp Content User
391467 2005-09-28 04:09:00 Well, my dad after 3 years of not having a website has decided to revieve his old one . Since i know a little bit about web pages I'm helping him with it . I'm trying to make a picture gallery (he owns a construction company so its pictures of his buildings) . Right now i have to pic gallery done . I have it saved as a . php file and a . htm file . Now im tryin to launch it through a javascript link so that it goes to a certain picture when the page load . It's just a page with a picture a Previous and NExt button, and a close window button . the code for the picture page is:


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 5 . 0">
<meta name="ProgId" content="FrontPage . Editor . Document">
<meta name="Microsoft Theme" content="marble-elegant 111, default">
<meta name="Microsoft Border" content="tlb, default">
<title>Image Gallery</title>
</head>


<body background=" . net/_themes/marble-elegant/parchmtl . jpg"" target="_blank">hdcinc . net bgcolor="#FFFFE1" text="#004F4F" link="#006C6C" vlink="#800080" alink="#003399"><!--msnavigation--><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td><!--mstheme--><font face="Georgia">




<p align="center">
&nbsp;</p>




<!--mstheme--></font></td></tr><!--msnavigation--></table><!--msnavigation--><table dir="ltr" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td valign="top" width="1%"><!--mstheme--><font face="Georgia">


<p>&nbsp;</p>


<!--mstheme--></font></td><td valign="top" width="24"></td><!--msnavigation--><td valign="top"><!--mstheme--><font face="Georgia">

<h2 align="center"><!--mstheme--><font color="#003333"><font color="#6C6C00">Image Gallery</font><!--mstheme--></font></h2>
<script LANGUAGE="JavaScript">
<!--
which_image_loaded = 0;
NUMBER_OF_IMAGES = 27;
ImageNames = new Array;
ImageNames . length = NUMBER_OF_IMAGES - 1;
for (counter = 0; counter < NUMBER_OF_IMAGES; counter++)
{ file_number = counter + 1;
filename = ("/images/gallery/" + file_number + " . jpg");
ImageNames[counter] = filename; }

function changeImage(direction)

{ which_image_loaded += direction;
if (which_image_loaded < 0)
which_image_loaded = NUMBER_OF_IMAGES - 1;

if (which_image_loaded == NUMBER_OF_IMAGES)
which_image_loaded = 0;

document . myimage1 . src = ImageNames[which_image_loaded];
}

//--></script>


<p align="center">
<img SRC="gallery1 . jpg" NAME="myimage1" BORDER="0"
WIDTH="524" HEIGHT="284" HSPACE="10" VSPACE="10">&nbsp;&nbsp; </p>

<p align="center"> &nbsp; </p>

<p align="center"> &nbsp; </p>

<form>
<div align="center"><center><p><input TYPE="button" VALUE="&lt;&lt; Previous"
onClick="changeImage(-1);"> <input TYPE="button" VALUE="Next &gt;&gt;"
onClick="changeImage(1);"> <br><input type="button" value="Close Window"
onclick="window . close()">
</p>
</center></div>
</form>
<!--mstheme--></font><!--msnavigation--></td></tr><!--msnavigation--></table><!--msnavigation--><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td><!--mstheme--><font face="Georgia">
<p>&nbsp;</p>

<!--mstheme--></font></td></tr><!--msnavigation--></table></body>
</html>

and the script for the button im tryin to make is
<FORM>
<p align="center">
<INPUT type="button" value="Image gallery"

onClick="window . open('gallery . php','image_gallery','width=7 50,height=560,res

izable=no,scrollbars=no,toolbar=no,location=no,dir ectories=no,status=no,menubar=no')">

so pretty muchly in the same folder (on the server) i have the files gallery . php, gallery . htm, and 1 . jpg - 27 . jpg . So how do i make it when u click on a little thumbnail picture it opens a new window and has the thing with the picture next previous and close buttons but instead of opening 1 . jpg it opens any other . jpg file? Some one please help

thanks to any one who helps

-Corbin 		CorbinH (37)
391468 2005-09-28 05:55:00 please someone help CorbinH (37)
391469 2005-09-28 13:46:00 bump CorbinH (37)
391470 2005-09-28 15:16:00 Not realy sure what you want, do you want to click the jpeg then open it up even larger than WIDTH="524" HEIGHT="284" or am I not seeing the thumbnail page with the code you pasted. Rob99 (151)
391471 2005-09-28 22:30:00 uhhhg do u mean the html for the thumbnail pages... the html for hte thumbs is


<table border="0" cellspacing="0" cellpadding="0" id="fpGalleryTable_9602">
<tr>
<tr> <td height="10"> </td>
</tr>
<tr />
<td valign="top" style="border-left-style: solid; border-left-width: 1; border-left-color:black">
<table border="0" cellpadding="2" cellspacing="0" align="center" width="120">
<tr>
<td valign="top" align="center" height="86">
<a href="../../razorback3.jpg">
<img border="0" vspace="5" hspace="12" src="razorback3.jpg" width="100" height="65" title="" /></a>
</td>
</tr>
<tr>
<td valign="top" >
<P>Razorback Carpet</P>
<P>Currently under construction</P> </td>
</tr>
</table>
</td>
<td valign="top" style="border-left-style: solid; border-left-width: 1; border-left-color:black">
<table border="0" cellpadding="2" cellspacing="0" align="center" width="120">
<tr>
<td valign="top" align="center" height="86">
<a href="../../duke3.jpg">
<img border="0" vspace="5" hspace="12" src="duke3.jpg" width="100" height="66" title="" /></a>
</td>
</tr>
<tr>
<td valign="top" >
<P>Duke Power Plant</P>
<P>Warehouse building</P> </td>
</tr>
</table>
</td>
<td valign="top" style="border-left-style: solid; border-left-width: 1; border-left-color:black">
<table border="0" cellpadding="2" cellspacing="0" align="center" width="120">
<tr>
<td valign="top" align="center" height="86">
<a href="../../duke1.jpg">
<img border="0" vspace="5" hspace="12" src="duke1.jpg" width="100" height="66" title="" /></a>
</td>
</tr>
<tr>
<td valign="top" >
<P>Malvern, AR </P>
<P>Administration Building</P> </td>
</tr>
</table>
</td>
<td valign="top" style="border-left-style: solid; border-left-width: 1; border-left-color:black">
<table border="0" cellpadding="2" cellspacing="0" align="center" width="120">
<tr>
<td valign="top" align="center" height="86">
<a href="../../Malvern CC 1.jpg">
<img border="0" vspace="5" hspace="12" src="Malvern CC 1.jpg" width="100" height="65" title="" /></a>
</td>
</tr>
<tr>
<td valign="top" >
<P>Malvern Community Center</P>
<P>Public use facility.</P> </td>
</tr>
</table>
</td>
<td valign="top" style="border-left-style: solid; border-left-width: 1; border-left-color:black;
border-right-style: solid; border-right-width: 1; border-right-color:black">
<table border="0" cellpadding="2" cellspacing="0" align="center" width="120">
<tr>
<td valign="top" align="center" height="86">
<a href="../../Malvern CC 3.jpg">
<img border="0" vspace="5" hspace="12" src="Malvern CC 3.jpg" width="100" height="66" title="" /></a>
</td>
</tr>
<tr>
<td valign="top" >
<P>Malvern Community Center</P>
<P>Back of building</P> </td>
</tr>
</table>
</td>
<tr> <td height="10"> </td>
</tr>
<tr />
<td valign="top" style="border-left-style: solid; border-left-width: 1; border-left-color:black">
<table border="0" cellpadding="2" cellspacing="0" align="center" width="120">
<tr>
<td valign="top" align="center" height="86">
<a href="../../Malvern CC 4.jpg">
<img border="0" vspace="5" hspace="12" src="Malvern CC 4.jpg" width="100" height="66" title="" /></a>
</td>
</tr>
<tr>
<td valign="top" >
<P>Malvern Community Center</P>
<P>Front entrance</P> </td>
</tr>
</table>
</td>
<td valign="top" style="border-left-style: solid; border-left-width: 1; border-left-color:black">
<table border="0" cellpadding="2" cellspacing="0" align="center" width="120">
<tr>
<td valign="top" align="center" height="86">
<a href="../../maintenance1.jpg">
<img border="0" vspace="5" hspace="12" src="maintenance1.jpg" width="100" height="65" title="" /></a>
</td>
</tr>
<tr>
<td valign="top" >
<P>Lakeside School </P>
<P>Lakeside School Maintenance Building</P> </td>
</tr>
</table>
</td>
<td valign="top" style="border-left-style: solid; border-left-width: 1; border-left-color:black">
<table border="0" cellpadding="2" cellspacing="0" align="center" width="120">
<tr>
<td valign="top" align="center" height="86">
<a href="../../Lakeside fine arts 2.jpg">
<img border="0" vspace="5" hspace="12" src="Lakeside fine arts 2.jpg" width="100" height="65" title="" /></a>
</td>
</tr>
<tr>
<td valign="top" >
<P>Lakeside Schools</P>
<P>Lakeside Schools Fine Arts Building</P> </td>
</tr>
</table>
</td>
<td valign="top" style="border-left-style: solid; border-left-width: 1; border-left-color:black">
<table border="0" cellpadding="2" cellspacing="0" align="center" width="120">
<tr>
<td valign="top" align="center" height="86">
<a href="../../Lakeside fine arts 1.jpg">
<img border="0" vspace="5" hspace="12" src="Lakeside fine arts 1.jpg" width="100" height="60" title="" /></a>
</td>
</tr>
<tr>
<td valign="top" >
<P>Lakeside Schools</P>
<P>Lakeside Schools Fine Arts Building</P> </td>
</tr>
</table>
</td>
<td valign="top" style="border-left-style: solid; border-left-width: 1; border-left-color:black;
border-right-style: solid; border-right-width: 1; border-right-color:black">
<table border="0" cellpadding="2" cellspacing="0" align="center" width="120">
<tr>
<td valign="top" align="center" height="86">
<a href="../../Lakeside Fieldhouse2.jpg">
<img border="0" vspace="5" hspace="12" src="Lakeside Fieldhouse2.jpg" width="100" height="63" title="" /></a>
</td>
</tr>
<tr>
<td valign="top" >
<P>Lakeside Schools </P>
<P>Lakeside Schools Indoor Practice Facility</P> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="5" />
</tr>
</table

and im going to change the links to where it open the gallery... the thing is i have the gallery made (code in 1st post) but now i cant figure out how to get it to know ok this picture was opened we need to open it in the gallery instead of just opening the first picture like it always does... I know i could go threw and make it just seperate html pages with just 1 picture per page and links to the next and previous page but that would take a alot of time 		CorbinH (37)
391472 2005-09-28 23:14:00 Do you have a working site up right now? I cant quite understand what you want to do.

I know it has something to do with working out how to make next and previous image links work with js (not too hard, but might as well utilise php instead since it looks like its supported on your hosting plan). So yeah, link up and I can probably help. 		sal (67)
391473 2005-09-28 23:33:00 the page where the thumbnails are is hdcinc.net

the page where the image gallery is is hdcinc.net

the image gallery can also be opened through hdcinc.net which thats just a button that opens the gallery in a window... but im tryin to get it to where when you click on a picture on the real_p.htm page it opens the image gallery on the picture you clicked instead of the first picture... Please help ive tried alot of different things (note: right now the links on the real_p.htm page just go to the actual image file instead of the gallery) 		CorbinH (37)
391474 2005-09-29 01:32:00 Where you have

<a href="../../razorback3.jpg">
<img border="0" vspace="5" hspace="12" src="razorback3.jpg" width="100" height="65" title="" /></a>

You need something like this

<a href="javascript:;" onClick="MM_openBrWindow('razorback3.htm','big','width=660, height=550')"><img src="images/where ever it is.JPG" width="160" height="120" border="0"></a>
And this before the <body>

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->

Here is a demo (www.silvertech.co.nz) 		Rob99 (151)
391475 2005-09-29 01:43:00 OK, I think I understand it now, you have the gallery, but want each thumbnail to open straight to the large version with next and previous being functional. I think the easiest way to mush what you have already is to use php and GET (I presume you have access to php functionality because of your previous posts). I have made up an example of how it works (nz.neopages.org), and there is source (nz.neopages.org).

For example, to open straight to image 12, the gallery link for the image 12 thumbnail would be nz.neopages.org see the pattern? Of course, this would be hosted on your own webspace...

PS: As always, my anal-retentiveness has momentarily converted your FrontPage source to human-readable XHTML source, eugh. 		sal (67)
391476 2005-09-29 03:45:00 Well, thank you both for your help, but i think i might just do it a different way... Now my dad decided he wants it where it only shows the pictures for a certain building... I have a probelm now too though. Can someone tell me how to get the script to know when the image 1.jpg is loaded to say abc but when 2.jpg is loaded to say xyz? Like havea littel text area under the picture. Please help me and thanks to Rob, and Sal (yes i know i would use my own server to host the stuff). CorbinH (37)
1 2