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!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

opening pictures with window.open()

Status
Not open for further replies.
airswit

airswit

Programmer
Apr 19, 2003
23
US
hey, i am doing some thumbnail pictures, where when you click on them, they open in a new window, with correct size and all that. now, i want there to be no border on the page. do i have to make a separate html file, then have the url for that, with no border?! this is the javascript i have in the func now:

window.open("pic.jpg",'',[options]);
 
Sort by date Sort by votes


>> do i have to make a separate html file, then have the url for that, with no border?!

Simple answer? Yes - if you want it to display the same in all browsers.

Most browsers will have a default margin. You might consider using a template page, and call it with the imagename as a parameter... something like "picshow.asp?img=wibble.gif&width=100&height=20"... that way you wouldn't need a different page for each image... You don't even need to use server-side coding, as you can pick up on these parameters client-side, too.

Hope this helps,
Dan
 
Upvote 0 Downvote
er, try document.write:
Code: 
win=window.open("","","width=100") //fill in any attribute
win.document.write("<html><body leftmargin=0 topmargin=0><img src='"+pic.jpg+"'></body></html>")

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
note:
i guess there are two more margins i left out:
rightmargin
bottommargin

set them also to 0....

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
thank u...

know what, i just now finished a project that required this kind of popup, but i used ur method, this method struck me just now...

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
okay, one last thing: how can i use a variable as the link to the pic? i mean, i want to send to the function a string, then use that to open the pic. right now, for the func i have:
Code: 
//l is for Source
//x is for horiz size
//y is for vert size

function openwind(l,x,y){
if (!x)
	x = 800;
if (!y)
	y = 600;

options = "toolbar=0,status=0,menubars=0,scrollbars=0,resizable=0,location=0,directories=0,width="+x+"

,height="+y;			//set all window options

wind = window.open("","",options);//display new window
wind.moveTo( (screen.width/2-x/2), (screen.height/2-y/2) );//center window on screen
wind.document.write("<html><body leftmargin=0 rightmargin=0><img src=l></body></html>")

}
 
Upvote 0 Downvote
Something like this should do the trick:

Code: 
function openwind(l, x, y) {
	var width = x || 800;
	var height = y || 600;
	var options = 'width=' + width + ',height=' + height;
	var wind = window.open('', '', options);
	wind.moveTo( (screen.width/2-width/2), (screen.height/2-height/2) );
	wind.document.open();
	wind.document.write('<html><body style="border:0px;margin:0px;"><img src="' + l + '"></body></html>');
	wind.document.close();
}

I've removed some of the redundant entries in the "options" string - if you specify anything there (which you are with width and height), then you don't need to specify any options you don't want - which saves space. Also, I've included a neat trick for determining if parameters are passed in, and giving a default value otherwise.

Apart from that, and a document.open() and close() call, the source you have was pretty much OK... I think the only thing you were missing was the " '+l+' " to include the "l" parameter as the image source.

Hope this helps,
Dan


 
Upvote 0 Downvote
sweet, thanks a lot. just as a question, what are the document.open() and document.close() lines for? i tried without them, and it still worked, but is that bad practice, or what?
 
Upvote 0 Downvote

>> i tried without them, and it still worked, but is that bad practice, or what?

Some browsers (especially older versions of Netscape) require you use them... Personally, I would say that it is bad practice to omit them ;o)

Dan


 
Upvote 0 Downvote
Hi BillyRayPreachersSon

Searching through the forum and found your post on this thread below:
Code: 
function openwind(l, x, y) {
    var width = x || 800;
    var height = y || 600;
    var options = 'width=' + width + ',height=' + height;
    var wind = window.open('', '', options);
    wind.moveTo( (screen.width/2-width/2), (screen.height/2-height/2) );
    wind.document.open();
    wind.document.write('<html><body style="border:0px;margin:0px;"><img src="' + l + '"></body></html>');
    wind.document.close();
}

As airswit stated at the start of this thread, I have the same issue.

My question is (and sorry if this is obvious to most), where do I put your code to make the popup activate?

This is a line from a web page that is currently used and compiled in FrontPage 2000:
Code: 
<td width="20%" align="center"><a href="gallery/143.jpg"><img border="0" src="gallery/143_small.jpg" width="110" height="73"></a></td>

Please can you assist?

I look forward to any replies
Kindest regards
Lee

VisFox Version 6 User / Windows ME
 
Upvote 0 Downvote

If you modify your A tag from this:

Code: 
<a href="gallery/143.jpg">

to this:

Code: 
<a href="gallery/143.jpg" onclick="openwind(this.href, 800, 600); return(false);">

if the user has JavaScript enabled, the window will pop up the correct size... otherwise the image will load in the current window.

You can put the image size as the second and third parameters where I currently have 800 and 600.

Hope this helps,
Dan
 
Upvote 0 Downvote
Hi Dan

Thank you for the reply. I've tried your suggestion, but nothing happens when you click on the image. Am I missing something?

From this:
Code: 
<td width="20%" align="center"><a href="gallery/143.jpg"><img border="0" src="gallery/143_small.jpg" width="110" height="72"></a></td>

To this:
Code: 
<td width="20%" align="center"><a href="gallery/143.jpg" onclick="openwind(this.href, 800, 600); return(false);"><img border="0" src="gallery/143_small.jpg" width="110" height="73"></a></td>

Look forward to hearing from you

Lee..

VisFox Version 6 User / Windows ME
 
Upvote 0 Downvote
Do you definately have the "openwind" function accessible to the page

Not being an expert in this field, please could you explain what this means?

Lee

VisFox Version 6 User / Windows ME
 
Upvote 0 Downvote
well, in that updated code that you put in ur post, it had a call to 'openwind()' func, so you need to include that in a javascript portion of the html. that's what he meant. u cant access a function that don't exist in ur html file
 
Upvote 0 Downvote

>> please could you explain what this means?

Yes - you have to have the "openwind" function either on the page itself, or linked into the page via an external JavaScript library.

Think of a simple analogy - how would you unlock a lock without the key to go in the lock? How would you run the code without the function that you're trying to run?

Dan
 
Upvote 0 Downvote
Thank you for the replies and I see where your coming from. As I did mention, Not being an expert in this field... and not having had any experience with this type of set up before, can you either give me some idea what the code/function would like or point me in the best direction where to look?

Thanks both
Lee

VisFox Version 6 User / Windows ME
 
Upvote 0 Downvote
the openwind() func is about half way up the page, the working version, but that is mine, and you can't use it!!! just kidding, its the web, u can use whatever u can get ur hands on! anyway, this script is used, least on my page, to have a thumbnail that, when you click it, opens up a new window with the right size of the larger pic. now, the whole file would look something like this:

Code: 
<html><head><script type="javascript" source="openwind.js"></script></head>

<a href="javascript:void(0);" onclick="openwind('bigger_pic.jpg',700,400); return false;"><img src="small_pic.jpg"></a>

</html>
where openwind.js is the file that contains the openwind() function, and the pic names, hopefully you can get those.

hope that helps a bit!
 
Upvote 0 Downvote
Hi airswit

Well I tried this:

Code: 
<script type="javascript" source="openwind.js"></script>
Between the <head> </head> tags

Then...
Code: 
<a href="javascript:void(0);" onclick="openwind('sunset2.gif',700,400); return false;"><img src="sunset2.gif" width="255" height="161"></a>

Changing your image to mine (sunset2.gif) but unfortunately, nothing happens when you upload it.

By the way, I copied the image into the root folder and also the "Images" folder but still got the same result

It has to be something easy I'm missing here, or have I lost the plot!!

Thanks as always
Lee...

VisFox Version 6 User / Windows ME
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
104
ggriffit
ggriffit
JPSeo
  • Locked
  • Question
Another cjhild_process.exec issue with complex shell command
Replies
0
Views
74
JPSeo
JPSeo
waubain
  • Locked
  • Question
id tag not loading new data with new ajax call 1
Replies
4
Views
121
waubain
waubain
Disskyz
  • Locked
  • Question
Need help with javascript date 1
Replies
4
Views
110
Smurfmania
Smurfmania
chelares
  • Locked
  • Question
Issues with Tables
Replies
2
Views
85
Offera
Offera

Part and Inventory Search

Sponsor

Back
Top