Open Images In Small Window

Dev Shed Forums Sponsor:

September 9th, 2004, 08:58 PM

jamesbak

Contributing User

Join Date: Nov 2003

Posts: 124

Time spent in forums: 3 h 49 m 26 sec
Reputation Power: 5

Open Images In Small Window

I have seen sites where by when a user clicks on an image it opens in a separate smaller window that exactly fits the image. I also noted that this window can be closed.

How can I do this? Please advise. Thanks

September 10th, 2004, 02:31 PM

edwinbrains

Retired Moderator

Dev Shed God 4th Plane (6500 - 6999 posts)

Join Date: Jan 2004

Location: London, UK

Posts: 6,670

Folding Points: 85411 Folding Title: Advanced Folder

Time spent in forums: 1 Week 6 Days 23 h 36 m 40 sec
Reputation Power: 92

The image will need to be a link, like this:

Code:

<a href="javascript:enlarge('largeimage.htm');"><img src="images/image.gif" width="50" height="50" alt="Click to enlarge" /></a>

Then at the top of that page, you'd need the following javascript:

Code:

<script type="text/javascript">
function enlarge(x)  {
	window.open(x, 'largeimage','menubar=no,status=no,scrollbars=no,toolbar=no,resizable=no,width=500,height=350');
}
</script>

You can easily change the "no" to a "yes" if you want to change the appearance of the new window.

Then, just make sure you have a largeimage.htm, with the <img> tag, and also the following CSS:

Code:

<style type="text/css">
<!--
body {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
-->
</style>

You need that to get rid of the border.

__________________
- Edwin -

The General Rules Thread | The General FAQ Thread

Last edited by edwinbrains : October 14th, 2004 at 10:56 AM. Reason: woops, small error in the code

October 14th, 2004, 10:01 AM

jamesbak

Contributing User

Join Date: Nov 2003

Posts: 124

Time spent in forums: 3 h 49 m 26 sec
Reputation Power: 5

How Can I Make The Window To Auto Resize??

How do I customize the window to auto resize for each of the photos as they will be different sizes. Is it also possible to add descriptions to the photo?

Please take a look at what I did (attached). Thank you for your help.

Attached Files

openwindow.zip (44.4 KB, 79 views)

October 14th, 2004, 10:55 AM

edwinbrains

Retired Moderator

Join Date: Jan 2004

Location: London, UK

Posts: 6,670

Time spent in forums: 1 Week 6 Days 23 h 36 m 40 sec
Reputation Power: 92

The following code should work for resizing:

Code:

<a href="javascript:enlarge('largeimage.htm',600,480);"><img src="images/image.gif" width="50" height="50" alt="Click to enlarge" /></a>

Code:

<script type="text/javascript">
function enlarge(x,w,h)  {
	window.open(x, 'largeimage','menubar=no,status=no,scrollbars=no,toolbar=no,resizable=no,width='+w+',height='+h);
}
</script>

What do you mean by descriptions? You could add some text to the alt tag.

October 14th, 2004, 12:19 PM

jamesbak

Contributing User

Join Date: Nov 2003

Posts: 124

Time spent in forums: 3 h 49 m 26 sec
Reputation Power: 5

Quote:

Originally Posted by edwinbrains

The following code should work for resizing:

Code:

<a href="javascript:enlarge('largeimage.htm',600,480);"><img src="images/image.gif" width="50" height="50" alt="Click to enlarge" /></a>

Code:

<script type="text/javascript">
function enlarge(x,w,h)  {
	window.open(x, 'largeimage','menubar=no,status=no,scrollbars=no,toolbar=no,resizable=no,width='+w+',height='+h);
}
</script>

What do you mean by descriptions? You could add some text to the alt tag.

For the description, I meant like below the photo to explain what the photos is about. Basically I want to use this a catalogue and people might want to know the specifics of this product or whatever. You get what I mean?

Thanks for the help, I do appreciate.
Jim

October 14th, 2004, 03:31 PM

jamesbak

Contributing User

Join Date: Nov 2003

Posts: 124

Time spent in forums: 3 h 49 m 26 sec
Reputation Power: 5

I dont think the auto resizing is working or I have things wrong! The windows appear too big.

The 2 window is too large and also the window for the first image does not fit the image either. Here is the code I used:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Open in a small window</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
function enlarge(x,w,h) {
window.open(x, 'largeimage','menubar=no,status=no,scrollbars=no,toolbar=no,resizable=no,width='+w+',height='+h);
}
</script>

</head>

<body>
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="80"><a href="javascript:enlarge('largeimage.htm',600,480);"><img src="goat1.jpg" alt="Click to enlarge" width="80" height="66" border="0"></a></td>
<td width="15"> </td>
<td width="70"><a href="javascript:enlarge('hen.htm');"><img src="hen1.jpg" width="70" height="97" border="0"></a></td>
<td> </td>
</tr>
</table>
</body>
</html>

October 15th, 2004, 01:17 PM

edwinbrains

Retired Moderator

Join Date: Jan 2004

Location: London, UK

Posts: 6,670

Time spent in forums: 1 Week 6 Days 23 h 36 m 40 sec
Reputation Power: 92

Quote:

Originally Posted by jamesbak

I've used the exact code that you're using and the first link works fine. It opens a window that is 600x480 big (as specified in the link). The second one doesn't work because you've not added the dimensions. You need to edit the link to include the appropiate width/height.

Code:

<a href="javascript:enlarge('hen.htm',500,400);"><img src="hen1.jpg" width="70" height="97" border="0"></a>

Don't forget that these htm files will have a white border around them by default, unless you use the css code at the top of this thread to get rid of that.

October 15th, 2004, 01:19 PM

edwinbrains

Retired Moderator

Join Date: Jan 2004

Location: London, UK

Posts: 6,670

Time spent in forums: 1 Week 6 Days 23 h 36 m 40 sec
Reputation Power: 92

Quote:

Originally Posted by jamesbak

I understand what you mean, but where do you want the description? Just make the largeimage.htm and hen.htm files include a description as well as the image.

October 15th, 2004, 08:00 PM

jamesbak

Contributing User

Join Date: Nov 2003

Posts: 124

Time spent in forums: 3 h 49 m 26 sec
Reputation Power: 5

Great, thanks!

Quote:

Originally Posted by edwinbrains

I understand what you mean, but where do you want the description? Just make the largeimage.htm and hen.htm files include a description as well as the image.

Thank you so much. You have proved what I was doubting and I have learned a great deal from this.

I appreciate

#10

October 16th, 2004, 02:32 AM

edwinbrains

Retired Moderator

Join Date: Jan 2004

Location: London, UK

Posts: 6,670

Time spent in forums: 1 Week 6 Days 23 h 36 m 40 sec
Reputation Power: 92

Glad I could help

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: