10 replies to this topic

[Tidders]

I apologise in advance if this has already been asked, I did look but couldn't find it.

I am new to building websites so learning with this project. I am building a website that sells go-kart gear and equipment for a friend. I have the basic layout covered and the images in place in the shop area under their corresponding categories. I have added an alt text on the image so the viewer can see what the image is they are viewing.

What I would like to do is have it so the user can click on an image to bring up a smaller page with a larger image on it, along with the description and price and then the checkout feature.

Is there a HTML code I can use to do this?

Thanks in advance for any and all help

[Macster12]

not sure if I caught it all, but from what I got is when they open the page it goes to the items own description page..

Step 1: First you need them linked to pages.. so obviously you need that first. Then you would just have the image point to that page.

Step 2: in the head section of the webpage that the image takes you to you can add this script:

<script>
window.resizeTo(300, 300);
</script>

This should be a temporary fix for now.

[Tidders]

Thanks so much for the reply, worked great. Appreciate it!

[N4Z.]

Have you considered a light box?

A light box could be your more professional approach, it looks sexy and you don't have to worry about opening new windows to display a larger image, it opens in the same window still displaying the content behind.

Take a look: http://www.huddletog...ects/lightbox2/

It is fairly easy to install and can really improve the look of your website

[Macster12]

@Naz hah, me and you think alike !! LOL. I though the same idea that you did, but he then said it would have to show description, picture, and checkout feature, something I greatly feel lightbox would make the whole website making harder lol.

Especially if he is newer to the website making thing. I love lightbox and I use it alot but I wouldn't use it if it had to store everything he wanted in it, unless he knew how to edit the javascript and stuff.

[N4Z.]

You havent got to edit the javascript in lightbox, to add a description/caption it's just another tag.

<a href="images/imagename.gif" rel="lightbox" title="CAPTION/DESCRIPTION GOES HERE"><img src="images/imagethumb.gif" width="100" height="40" alt="" /></a>

But yeah, if he's new to web coding etc. it may be a little difficult but he really should trial it offline just to teach himself a bit.

[Macster12]

oh no I knew about that stuff lol, I just wasn't sure if he would be able to handle it. Lol.

I think a trial offline would be the best idea Naz. He could use what I showed him and then use the lightbox and set it up and see how it is, make the fixes and stuff and he is set lol.

[Tidders]

Thank you both for your replies, I will have a play around with that tomorrow!

[N4Z.]

Tidders, on Sep 30 2009, 06:18 PM, said:

Thank you both for your replies, I will have a play around with that tomorrow!

Any time Tidders

[Macster12]

That's what were all here for

[claytron]

Using basic HTML:
This will make the image appear without an Image border and open in a new window when the image is clicked on.

<img src="IMAGE LINK HERE"
BORDER=0 ALT="Description of hover link here!"onClick="window.open('LOCATION OF IMAGE TO BE OPENED', 'WindowC', 'width=1024, height=760,scrollbars=yes');"</a>

Can resize the new window that opens by just plugging in new width and height of course

Edited by claytron, 05 October 2009 - 02:54 PM.