Enlarging pictures

[TechNetiuM]

Hi, iam building my own site and i have pictures on there, i dont know any coding but i was hoping you guys might be able to help me out with a code so that when you click the pictures it opens them in a new window in full size. Thanx for your help.

Phil

[John]

So you have a thumbnail and when a user clicks on it you want it to be enlarged?

You can provide a direct link to the image

<a href="yourimage.gif><img src="yourthumbnail.gif" /></a>

or rather than opening the image in a whole new window you could use a javascript popup by placing this code some where between your head tags

<script type="text/javascript">
<!--
function openwindow(){
	window.open ("yourimage.gif", "Enlarged Image", "toolbar=no, location=no, directories=no, status=no, scrollbars=yes, resizable=no, copyhistory=no, width=400, height=200");
}
//-->
</script>

Then you can link your thumbnail this way

<a href="javascript:openwindow()"><img src="yourthumbnail.gif" /></a>

And that would create a 400x200px box with your image in it, if the image you want to display is larger than those dimensions of course you can edit the open.window arguments (meaning the width, height, resizable, ect...)

[xtraze]

Thanks for the popup thing but as I am using Joomla I'm having an easy way to do these things. But I wanted the Pop-up thing for some times before I got the BOT, anyway it can come in handy and if I need it I'll come to codecall.

[Matt]

Regarding thumbnails:
You may already know this, but an image has height and width properties so you can change it's rendered size on the page. Unfortunately, it takes the same amount of time to load as the larger version, so it may work better for you just to create a resized copy of your original image to have as your thumbnail. Anyway, here is some code...

<img src="myimage.gif" height="200" width="300">

[Jordan]

Originally Posted by Matt

Regarding thumbnails:
You may already know this, but an image has height and width properties so you can change it's rendered size on the page. Unfortunately, it takes the same amount of time to load as the larger version, so it may work better for you just to create a resized copy of your original image to have as your thumbnail. Anyway, here is some code...

<img src="myimage.gif" height="200" width="300">

Also, using this method will distort the image and it will probably be very bad quality. Using the "Scale" or "Image Resize" function of a image editor is a much better idea.

[xtraze]

Yeah, It is better to make 2 Images, 2 BIG and one small.
So you can show the small image and link to the BIG size Image.

I enjoyed this instructional thread..since I am always wanting to change the size of images to fit in my websites.