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
Full Version: Clicking on an image to enlarge it
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:
This should be a temporary fix for now.
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:
CODE
<script>
window.resizeTo(300, 300);
</script>
window.resizeTo(300, 300);
</script>
This should be a temporary fix for now.
Thanks so much for the reply, worked great. Appreciate it!
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.huddletogether.com/projects/lightbox2/
It is fairly easy to install and can really improve the look of your website
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.huddletogether.com/projects/lightbox2/
It is fairly easy to install and can really improve the look of your website
@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.
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.
You havent got to edit the javascript in lightbox, to add a description/caption it's just another tag.
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.
CODE
<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.
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.
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.
Thank you both for your replies, I will have a play around with that tomorrow!
QUOTE (Tidders @ Sep 30 2009, 06:18 PM) 
Thank you both for your replies, I will have a play around with that tomorrow!
Any time Tidders
That's what were all here for
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.
Can resize the new window that opens by just plugging in new width and height of course
This will make the image appear without an Image border and open in a new window when the image is clicked on.
CODE
<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>
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
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.