...

View Full Version : Simplistic 'image in new window' JavaScript?



trepid_jesse
09-27-2003, 03:33 AM
A quick search on these forums will show that questions such as this are a dime a dozen. I apologize if my specific question has already been answered, but if it hasn't -- here's the deal:

I'm looking to make an image of pre-determined size (640x480) open in a window that's 640x480. There's no background behind the picture, there's no text, there's nothing. It's just going to be a picture contained in a 640x480 JS window. The only thing I would be looking to do is to make it so that clicking the large image closes the window.

I have a very basic understanding of the internal workings of such a script, but this is what I have so far:

HTML:


<a href="#" onclick="mapthumbnail('bahsnah-01.jpg')"><img src="bahsnah-01_small.jpg" border="0"></a>


JS:


function mapthumbnail(image)
{
window.open("image","closer","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=640, height=480")
}


The problem is that the image it's trying to display is "image" instead of the file bahsnah-01.jpg.

To see this not working, it's right here:
http://www.trepid.net/maps/images/bahsnah/

Click on the top left picture.

fredmv
09-27-2003, 03:38 AM
In the first argument of the open method, don't quote it - This is how it knows you're referencing a variable (the argument passed to the function).



window.open(image,"closer","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=640, height=480");

trepid_jesse
09-27-2003, 04:10 AM
It's working fine now, thanks to you.

I appreciate the help.

trepid_jesse
09-27-2003, 04:16 AM
I do have two other questions now, both pertaining to this pop-up window -- if you're able to help:

First, how would I eliminate the white space on the top and left side of the larger images. I'm assuming there is some hspace and vspace equivalent for JS?

Secondly, how would i accomplish the task of making the larger image close itself when clicked?

fredmv
09-27-2003, 04:41 AM
Sure, no problem. Here's something I wrote a while back:



<script type="text/javascript">
var w;

function openImage( url )
{
if( typeof(w) == "object" ) w.close();

w = window.open("", "", "");

with( w.window.document )
{
open();
write("<html><head><title>" + url + "</title></head><body style='border: 0px; padding: 0px; margin: 0px;'><a href='#' onclick='self.close();'><img src = '" + url + "' style='border: 0px;' alt='Close' /></a></body></html>");
close();
}

w.window.moveTo((screen.availWidth/2)-(w.document.images[0].width/2),(screen.availHeight/2)-(w.document.images[0].height/2));

return;
}
</script>


Then change your links to something like this:



<a href="file.jpg" onclick="openImage(this.href);return false;">Open image.</a>


Feel free to use it. :D

trepid_jesse
09-27-2003, 05:02 AM
That's great stuff, but is there a way to just apply:

style='border: 0px; padding: 0px; margin: 0px;'

To the effects that the function is having on the opened thumbnail?

I tried adding it, the way it is contained in the <body> tag, to my function, but there was some error referencing the script saying an "Object was expected," or some such thing.

fredmv
09-27-2003, 05:05 AM
You can just use the function I put together and completely lose your old function -- This one also centers the new window and resizes it to fit the image. :thumbsup:

trepid_jesse
09-27-2003, 05:18 AM
I would, but I dunno..

Seems kind of weak to just use someone else's code for something, ya know?

Maybe I'm just an idiot, but I guess it'd just be cool if I could get this function to work the way I'm tryin to get it to.

So, anywho, the functionality of closing the window when clicking the image isn't really needed, but eliminating the whitespace is definitely something that needs to be done.

Is that "style" command not applicable to the window.open command, or there some things that need to be changed syntax-wise?

I appended that short style line onto the end of my current window.open element, but it didn't work. There were no errors, and the pop-up still opened, but there was still whitespace.

fredmv
09-27-2003, 05:19 AM
It's perfectly fine for you to use my code - You have full permission. No credit is required. Again, feel free to use it!

trepid_jesse
09-27-2003, 05:23 AM
Hah, ok.

I understand what you're saying, and that's great that you're willing to let me use it, and this may all end with me using it to accomplish the task, but it's like..

If for whatever reason I needed to edit it I may not understand what's exactly going on. I'm not saying that I couldn't look at it and probably discern what the function is doing, but that it's like I would always know that I just used something that someone else made.

I guess it's just more fulfilling if I'm able to construct my own even if it means getting help from places such as this. I'm not trying to be rude or dismiss the work you've done, but it's just something I need to do.

So, think you can help me figure out a way to get rid of that whitespace without using your script?

fredmv
09-27-2003, 05:27 AM
Well -- The the reason you can't get rid of it is because you're opening the image only -- My script opens a blank document and dynamically writes to it, and uses CSS to remove all margins in the document, then writes the image, so it fits perfectly into the window. In your case, you can't add any extra CSS or HTML since you're opening only the image. You could modify your script to do this, but it would end up looking very similar to mine, plus mine resizes the window to fit the image, and centers the new window...

trepid_jesse
09-27-2003, 05:43 AM
I'm just led to believe there's a simple way to get rid of the whitespace with JS because it's JavaScript that is, in essence, generating the whitespace.

One of the main reasons for not just wanting to jump over to your function is having to change all of the lines in the various HTML pages to reflect the change.

If you don't have the time or something to show me a way to get rid of the white space in my current function, could you possibly point me in the direction of a tutorial?

I'm not trying to sound ungrateful.. I just don't want to consume all of your time.

Added: Ahhh, ok. I'm talking with a friend of mine.. and complications are just adding to the matter. Using your script will be the best choice, but a new feature is in need of implementing.

The feature is just basically allowing for a line of text under a given picture -- like a caption.

fredmv
09-27-2003, 05:46 AM
One of the main reasons for not just wanting to jump over to your function is having to change all of the lines in the various HTML pages to reflect the change.

You could always change the name of my function to the name of yours! :thumbsup:

trepid_jesse
09-27-2003, 05:56 AM
Yeah, but the thing is..

Mine:


<a href="#" onclick="mapthumbnail('bahsnah-01.jpg')"><img src="bahsnah-01_small.jpg" border="0"></a>


Yours:


<a href="file.jpg" onclick="openImage(this.href);return false;">Open image.</a>


There are.. other things that would need to be changed.

fredmv
09-27-2003, 06:01 AM
Change the function name to this:



<script type="text/javascript">
var w;

function mapthumbnail( url )
{
if( typeof(w) == "object" ) w.close();

w = window.open("", "", "");

with( w.window.document )
{
open();
write("<html><head><title>" + url + "</title></head><body style='border: 0px; padding: 0px; margin: 0px;'><a href='#' onclick='self.close();'><img src = '" + url + "' style='border: 0px;' alt='Close' /></a></body></html>");
close();
}

w.window.moveTo((screen.availWidth/2)-(w.document.images[0].width/2),(screen.availHeight/2)-(w.document.images[0].height/2));

return;
}
</script>


Then just call it like you normally would:



<a href="#" onclick="mapthumbnail('bahsnah-01.jpg');"><img src="bahsnah-01_small.jpg" border="0"></a>


:D

trepid_jesse
09-27-2003, 06:04 AM
Well, that worked, but..

There's still whitespace on the right, all of the browser options are available, it's resizeable, etc.

http://www.trepid.net/maps/images/bahsnah/

fredmv
09-27-2003, 06:08 AM
Weird, there shouldn't be any margins at all. I'll have to look at it a bit more, my code should be fine. As for the window features, everything should be off by default, but try changing that line to this:



w = window.open("", "", "resizeable=0,menubar=0,location=0,status=0");

trepid_jesse
09-27-2003, 06:11 AM
Yeah, it's all working now except for the fact that the window size isn't reduced to the size of the image, but instead it's whatever the resolution is.

Just click one of the thumbnails to see what I mean; although, I'm sure you know.

fredmv
09-27-2003, 06:13 AM
Alright - Change the function to this:



function mapthumbnail( url )
{
if( typeof(w) == "object" ) w.close();

w = window.open("", "", "");

with( w.window.document )
{
open();
write("<html><head><title>" + url + "</title><script type="text/javascript">window.onload = function(){ window.resizeTo(document.images[0].width, document.images[0].height); }<\/script></head><body style='border: 0px; padding: 0px; margin: 0px;'><a href='#' onclick='self.close();'><img src = '" + url + "' style='border: 0px;' alt='Close' /></a></body></html>");
close();
}

w.window.moveTo((screen.availWidth/2)-(w.document.images[0].width/2),(screen.availHeight/2)-(w.document.images[0].height/2));

return;
}


That should work.

trepid_jesse
09-27-2003, 06:17 AM
Error on page.


Line: 13
Char: 63
Error: Expected ")"
Code: 0
URL: http://www.trepid.net/maps/images/bahsnah


Next



Line: 188
Char: 1
Error: Object expected
Code: 0
URL: http://www.trepid.net/maps/images/bahsnah


Next



Line: 188
Char: 1
Error: Object expected
Code: 0
URL: http://www.trepid.net/maps/images/bahsnah


The "Next" denotes clicking the "Next" button on the little error window.

fredmv
09-27-2003, 06:23 AM
Ah, sorry about that. I should have tested the code before giving it to you. I'll check the previous code and debug it.

trepid_jesse
09-27-2003, 06:25 AM
If you need to reference those lines in regards to their placement these errors were based on the first image of bahsnah -- the one on the top left.

fredmv
09-27-2003, 06:29 AM
Alright -- I tested it out -- It should work now.



var w;

function mapthumbnail( url )
{
if( typeof(w) == "object" ) w.close();

w = window.open("", "", "scrollbars=0,status=0,toolbars=0,menubar=0");

with( w.window.document )
{
open();
write("<html><head><title>" + url + "</title></head><body onload='window.resizeTo(document.images[0].width,document.images[0].height);' style='border: 0px; padding: 0px; margin: 0px;'><a href='#' onclick='self.close();'><img src = '" + url + "' style='border: 0px;' alt='Close' /></a></body></html>");
close();
}

w.window.moveTo((screen.availWidth/2)-(w.document.images[0].width/2),(screen.availHeight/2)-(w.document.images[0].height/2));

return;
}

trepid_jesse
09-27-2003, 06:31 AM
That's just, outstanding.

Thanks for everything. I'm sure I'll have more questions in the future.

fredmv
09-27-2003, 06:35 AM
No problem - If you have more questions, feel free to ask. :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum