how to?, Launch jpg in new window with no boarders 1

Spyder1000 · Jun 26, 2005

Basically I want to click on a thumbnail and launch a picture in a new window with no boarders or controls only the 'close window' X.

From other websites i've noticed it seems to be something along the lines of:

Code:

<a HREF="javascript:Zoom('[URL unfurl="true"]http://localhost/big.jpg',640,480)">[/URL]
<img src="[URL unfurl="true"]http://localhost/small.jpg"[/URL] border="1" width="111" height="77"></a>

But I just can't make it work.

BabyJeffy · Jun 26, 2005

Here is a sample page that shows how you can do this:

Code:

<html>
<head>
<title>Test Harness</title>
<style type="text/css">
img {width:200px; height:150px; margin:10px; border:3px #f00 dotted;}
</style>

<script type="text/javascript">
<!--
function showPop(_imageName) {
	_path='/path/to/main/images/directory/from/root/';
	_extension='.jpg';
	_params='width=640,height=480';	
	myWin=window.open(_path+_imageName+_extension,_imageName,_params);
}
onload=init;
function init() {
	_collection=document.getElementsByTagName('img');
	for (var loop=0; loop<_collection.length; loop++) {
		if (_collection[loop].className=='thumbNail') {
			_collection[loop].onclick = function() {
				showPop(this.src.substring(this.src.lastIndexOf('/')+1,this.src.lastIndexOf('.')));
			};
		}
	}
}
//-->
</script>

</head>
<body>
<img src="/path/to/thumbnail/image1.jpg" class="thumbNail"/>
<img src="/path/to/thumbnail/image2.jpg" class="thumbNail"/>
<img src="/path/to/thumbnail/image3.jpg" class="thumbNail"/>
</body>
</html>

You merely add a class (in this case, thumbNail) to every image that you wish to have a "popup" showing a large version. If the user has javascript enabled, then this will add the "popup" functionality (otherwise it will not).

The rest is just configuration. You need to name the large images and the thumbnail images the same name... but they live in different directories. The code figues out the name of the image... and goes to get it from a common directory of "same named" larger images.

The code I have posted is mean't to be an example... you could use it to explore exactly what functionality you want. If you decide to go on with this code... drop a new thread in the Javascript forum.

Cheers,
Jeff

Spyder1000 · Jun 28, 2005

thanks, that works out great.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

how to?, Launch jpg in new window with no boarders 1

Spyder1000

Technical User

BabyJeffy

Programmer

Spyder1000

Technical User

Similar threads

Part and Inventory Search

Sponsor