Help with Coding

Post by **corpse** » Thu Nov 03, 2005 3:15 am

I want to make a page with thumbnail images on the side and when clicked to show a larger image in the middle. I have some code here, which I will post below, but I can't get it to work. If I get 1 image combo right, I can do the rest.

For this example, my thumbnail image is l.jpg and my larger image is li.jpg. Any help on where these images should go will be appreciated.

Here is the code, which I think is right.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
}
a img {
border:0;
}
#image-col {
width:180px;
height:100%;
overflow:auto;
background-color:#000099;
text-align:center;
float:left;
}
#image-col img {
width:100px;
height:100px;
border:2px solid #000000;
margin-top:20px;
}
#picture-container {
min-height:100%;
text-align:center;
position:relative;
margin-left:180px;
text-align:center;
}
* html #picture-container {
margin-left:177px;
}
</style>
<script type="text/javascript">

</script>
</head>

<body>
<div id="image-col">
<a href="images/li.jpg" onclick="showImg(this.href,'Large Image 1');return false"><img src="images/li.jpg" alt=""></a>
<a href="thumb2.jpg" onclick="showImg(this.href,'Large Image 2');return false"><img src="thumb2.jpg" alt=""></a>
<a href="thumb3.jpg" onclick="showImg(this.href,'Large Image 3');return false"><img src="thumb3.jpg" alt=""></a>
<a href="thumb4.jpg" onclick="showImg(this.href,'Large Image 4');return false"><img src="thumb4.jpg" alt=""></a>
<a href="thumb5.jpg" onclick="showImg(this.href,'Large Image 5');return false"><img src="thumb5.jpg" alt=""></a>
<a href="thumb6.jpg" onclick="showImg(this.href,'Large Image 6');return false"><img src="thumb6.jpg" alt=""></a>
<a href="thumb7.jpg" onclick="showImg(this.href,'Large Image 7');return false"><img src="thumb7.jpg" alt=""></a>
<a href="thumb8.jpg" onclick="showImg(this.href,'Large Image 8');return false"><img src="thumb8.jpg" alt=""></a>
<a href="thumb9.jpg" onclick="showImg(this.href,'Large Image 9');return false"><img src="thumb9.jpg" alt=""></a>
<a href="thumb10.jpg" onclick="showImg(this.href,'Large Image 10');return false"><img src="thumb10.jpg" alt=""></a></div>
<div id="picture-container"><img id="large-img" src="largeimg.jpg" width="400" height="400" alt="Larger Image"></div>
</body>
</html>

Post by **Psyche911** » Thu Nov 03, 2005 5:04 am

Wouldn't this fit better in programming discussion?

Post by **Foo** » Thu Nov 03, 2005 5:20 am

No. HTML is not programming.

Post by **AmIdYfReAk** » Thu Nov 03, 2005 6:11 am

Foo has a Very Valid point.

Post by **AmIdYfReAk** » Thu Nov 03, 2005 6:17 am

Err, i'm not sure if this is what you are asking.. but they should go on a directory Called images..

so you will have a filder, with the INdex.html, then a folder called images, witht he Full size and thumbnail in it.

again, i'm really not sure what you are infact asking here.

Post by **corpse** » Thu Nov 03, 2005 6:24 am

Well, I want a web page with thumbnails on the side and when you click them, you will get that image [only larger] in the middle of the page.

Yes, I have a folder called "X" and an index.html in it with a folder called images within that.

I just can't seem to get it to work. I need some help with where the images should go.

I know that the larger image should be the <a href="etc"> and the img src should be the thumbnail.

But there must be something else that I'm missing cause it doesnt work.

Post by **AmIdYfReAk** » Thu Nov 03, 2005 6:34 am

truthfully, it works fine here.. allthough you know that within the Div, you are only poining to the same picture right?

Post by **AmIdYfReAk** » Thu Nov 03, 2005 6:36 am

Change:
a href="images/li.jpg" onclick="showImg(this.href,'Large Image 1');return false"><img src="images/li.jpg" alt=""></a>

to

a href="images/li.jpg" onclick="showImg(this.href,'Large Image 1');return false"><img src="images/l.jpg" alt=""></a>

Post by **corpse** » Thu Nov 03, 2005 7:07 am

Sorry, I did have this changed on my test site here. Forgot to change it there.

It doesnt work for me at all. No image for the thumbnail or for the large picture. In fact, when I click where the thumbnail should be, it opens a new window [nothing on it of course].

If you have the time to walk me through it like I was 4, fine and appreciated. If not, I will suffer in silence.

At least until tomorrow. :icon25:

Post by **mik0rs** » Thu Nov 03, 2005 10:44 am

Foo wrote:No. HTML is not programming.

That needed to be large

Post by **glossy** » Thu Nov 03, 2005 3:40 pm

mik0rs wrote:
Foo wrote:No. HTML is not programming.
That needed to be large

you're all mean

Post by **corpse** » Fri Nov 04, 2005 1:59 am

AmIdYfReAk wrote:truthfully, it works fine here.. allthough you know that within the Div, you are only poining to the same picture right?

Seriously, you just copied this code and put in a picture and it worked??

What could be on my system or settings that is preventing me from seeing anything? I see the boxes on the left side where the thumbnails should be but there is just the little red X instead of the image. And when I click on one of the thumbnails, it takes me to a new page.......which is just a white page with a red X. It is supposed to open the larger image on the same page.

It is tomorrow

Post by **AmIdYfReAk** » Fri Nov 04, 2005 2:21 am

i saved the data intoa HTML, made a folder called Temp Saved the html in it, then made a filder called images and placed li.jpg in it, and the site worked when i opened it though internet explorer...

also, if you ARE running it off of your local harddrive, you will get a Security Warning through internet explorer saying that it Blocked Content, you need to right click on the tool bar that drops and Click on allow.

Post by **corpse** » Fri Nov 04, 2005 4:46 am

Yes, I did get that and I did click allow. Still doesnt work. WTF

I dont know if this makes any difference, but when I put the mouse on one of the thumbnails it shows this in the taskbar:

File:///C:/Documents%20and%20settings/username/My%20documents/test/images/li.jpg

Post by **AmIdYfReAk** » Fri Nov 04, 2005 5:43 am

the test folder is within My documents?

and your username for XP is username?

Post by **corpse** » Fri Nov 04, 2005 6:24 am

The test folder is in my documents and my username is not usrname......I just changed it for privacy here.

But the path is identical, I just changed the username to.......you know

Post by **corpse** » Sat Nov 12, 2005 6:51 pm

OK, I did get the above code to work. I have 2 more questions if you guys would be so kind.

1) Where the larger picture is, I want to make it display a little lower on the page, but I'm not sure what part of the code to change.

2) I want to put a little text under the larger image, but again, I'nm not sure where to put it.

Thanks in advance.

Post by **corpse** » Mon Nov 14, 2005 3:26 am

One other little thing.............if I want to change the size of the place holder [where the thumbnail images go] how do I go about doing that? It seems that no matter how I change the size of the thumbmail, the size of the place where it goes doesnt change.