Solved

Image Pop Up in new Window (same size as image)

Posted on 2012-03-21
2
246 Views
Last Modified: 2012-04-27
Is there a way to make an image open in a new window showing a larger image of the same image? I want to make the window the same size of the image. I have lots of images (maps) so I hoping to use a javascript of something like (onclick open _blank)
0
Comment
Question by:Turfimage
2 Comments
 
LVL 16

Accepted Solution

by:
Rose Babu earned 200 total points
ID: 37752243
Hi,

get the image's height and width and use the same in the popupwindow property as like below.
<script language="javascript" type="text/javascript">
function imgPopup(imgURL) {
	x = new Image;
	x.src = imgURL;

	imgW = x.width;
	imgH = x.height;

	newwindow = window.open(imgURL, 'name', 'height=' + imgH + ',width=' + imgW + '');
	if (window.focus) {
		newwindow.focus()
	}
}
</script>


<img src="http://whatisprogramming.com/files/2011/10/javascript1.jpg" 
     onclick="imgPopup('http://whatisprogramming.com/files/2011/10/javascript1.jpg')" />

<img src="http://nabtron.com/wp-content/uploads/2011/09/javascript1.png" 
     onclick="imgPopup('http://nabtron.com/wp-content/uploads/2011/09/javascript1.png')" />

Open in new window

Hope this will work for you.
0
 

Author Comment

by:Turfimage
ID: 37904060
Yes this works.... Is there a way to make the new window pop up be ' resizable=yes '
  and add a 'menubar=yes' In this script?
0

Featured Post

Save on storage to protect fatherhood memories

You're the dad who has everything. This Father's Day, make sure your family memories are protected. My Passport Ultra has automatic backup and password protection to keep your cherished photos and videos safe. With up to 3TB, you have plenty of room to hold the adventures ahead.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The viewer will learn how to count occurrences of each item in an array.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now