Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 25
  1. #1
    New Coder
    Join Date
    Sep 2003
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simplistic 'image in new window' JavaScript?

    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:
    Code:
    <a href="#" onclick="mapthumbnail('bahsnah-01.jpg')"><img src="bahsnah-01_small.jpg" border="0"></a>
    JS:
    Code:
    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.
    Jesse Davis
    www.trepid.net

  • #2
    Regular Coder
    Join Date
    Jul 2003
    Location
    Massachusetts
    Posts
    472
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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).

    Code:
    window.open(image,"closer","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=640, height=480");
    Moderator @ WebDeveloper.com
    Mentor @ WebXpertz.net

  • #3
    New Coder
    Join Date
    Sep 2003
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's working fine now, thanks to you.

    I appreciate the help.
    Jesse Davis
    www.trepid.net

  • #4
    New Coder
    Join Date
    Sep 2003
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Jesse Davis
    www.trepid.net

  • #5
    Regular Coder
    Join Date
    Jul 2003
    Location
    Massachusetts
    Posts
    472
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sure, no problem. Here's something I wrote a while back:

    Code:
    <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:

    Code:
    <a href="file.jpg" onclick="openImage(this.href);return false;">Open image.</a>
    Feel free to use it.
    Moderator @ WebDeveloper.com
    Mentor @ WebXpertz.net

  • #6
    New Coder
    Join Date
    Sep 2003
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Jesse Davis
    www.trepid.net

  • #7
    Regular Coder
    Join Date
    Jul 2003
    Location
    Massachusetts
    Posts
    472
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Moderator @ WebDeveloper.com
    Mentor @ WebXpertz.net

  • #8
    New Coder
    Join Date
    Sep 2003
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Jesse Davis
    www.trepid.net

  • #9
    Regular Coder
    Join Date
    Jul 2003
    Location
    Massachusetts
    Posts
    472
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's perfectly fine for you to use my code - You have full permission. No credit is required. Again, feel free to use it!
    Moderator @ WebDeveloper.com
    Mentor @ WebXpertz.net

  • #10
    New Coder
    Join Date
    Sep 2003
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Jesse Davis
    www.trepid.net

  • #11
    Regular Coder
    Join Date
    Jul 2003
    Location
    Massachusetts
    Posts
    472
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...
    Moderator @ WebDeveloper.com
    Mentor @ WebXpertz.net

  • #12
    New Coder
    Join Date
    Sep 2003
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by trepid_jesse; 09-27-2003 at 05:45 AM.
    Jesse Davis
    www.trepid.net

  • #13
    Regular Coder
    Join Date
    Jul 2003
    Location
    Massachusetts
    Posts
    472
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!
    Moderator @ WebDeveloper.com
    Mentor @ WebXpertz.net

  • #14
    New Coder
    Join Date
    Sep 2003
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, but the thing is..

    Mine:
    Code:
    <a href="#" onclick="mapthumbnail('bahsnah-01.jpg')"><img src="bahsnah-01_small.jpg" border="0"></a>
    Yours:
    Code:
    <a href="file.jpg" onclick="openImage(this.href);return false;">Open image.</a>
    There are.. other things that would need to be changed.
    Jesse Davis
    www.trepid.net

  • #15
    Regular Coder
    Join Date
    Jul 2003
    Location
    Massachusetts
    Posts
    472
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Change the function name to this:

    Code:
    <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:

    Code:
    <a href="#" onclick="mapthumbnail('bahsnah-01.jpg');"><img src="bahsnah-01_small.jpg" border="0"></a>
    Moderator @ WebDeveloper.com
    Mentor @ WebXpertz.net


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •