SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast Diamax's Avatar
    Join Date
    Jul 2002
    Location
    North America
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Image Pop-up in NewWindow

    Hello guys!!

    Please take a look at this: http://www20.brinkster.com/diablomax/index.html
    I'm trying to get an image to pop-up in its own, separate window, when you click on the link.
    I'm not all that skilled, the code that I'm using I took it from another website, and I
    modified it such way to suit my needs. I made a .js file and I put the function in there as I
    like it better that way because it's more organized, and of course I reference that .js file
    into the head of the page as you can see.
    Well here I have some problems:

    The first problem is that all the images that I'm going to use will be 640x480 in size,
    and I want that the new window that pops up to be the same size as the image.
    As you see the actuall size of the new window is 640x480 (and same for the image), but because
    it adds some blank space around the picture, the image is not fully visible without scrolling,
    and cannot figure out how to make it such way that the window hugs the image preciselly,
    without the waste of space around it. Besides all that, because it adds unnecessary space
    around it doesn't fully dispaly the image, and as a result it adds scrollbars, that looks
    really bad.

    The second thing is that I want the new window to have fixed dimensions, I mean that I don't
    want it to be resizable, I don't want those borders to resize, and regarding to this I also
    want the maximize button to be grayed out. The only buttons that I want to be functional at
    the top are the close window button and the minimize to the taskbar button.

    Here it is the newwindow.js file:
    ========================================================
    function NewWindow(mypage, w, h, scroll) {
    var winl = (screen.width - w) / 2;
    var wint = (screen.height - h) / 2;
    var myname = mypage.split('.')[0];
    winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scroll+',resizable'
    win = window.open('', '', winprops)
    win.document.writeln("<html><head><title>"+myname+"</title></head>"+
    "<body onload='window.focus()'><form><iframe src=""+mypage+"" "+
    "width='100%' height='100%' frameborder=no></iframe>"+
    "</form></body></html>")
    win.document.close; // need to close after writing
    }
    ========================================================

    Here it's the code in the index.html page:
    ========================================================
    <html>
    <head>
    <script type="text/javascript" language="javascript" src="newwindow.js"></script>
    </head>
    <body>
    <a href ="myimage.jpg" onclick = "NewWindow('myimage.jpg','640','480','no');return false;">View Image</a>
    </body>
    </html>
    ========================================================

    Could you guys PLEASE help me!!?
    THANK YOU!!
    Duras mx

  2. #2
    SitePoint Enthusiast Diamax's Avatar
    Join Date
    Jul 2002
    Location
    North America
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello guys!

    I've found this piece of code, this is exactly what I need, but it gives a java error, I'm looking and I don't see where is missing that semicolon is complaining about...

    Can you please tell me what to do to get rid of that error?!

    ============================================

    <html>
    <head>
    <!---Head--->
    <script>
    function LoadPhoto(the_href) {

    var w = window.open('', 'Photo', 'width=630,height=420,left=0,top=0');
    w.document.writeln("<HTML><HEAD>");
    w.document.writeln("<TITLE>" + the_href + "</TITLE>");
    w.document.writeln("<STYLE> BODY { margin-left: 0; margin-top: 0 } </STYLE>");
    w.document.writeln("</HEAD><BODY><A HREF="javascript:self.close();"><IMG");
    w.document.writeln("SRC="" + the_href + """);
    w.document.writeln("onMouseOver=\"window.status='click image To Close this window'; Return True;\"");
    w.document.writeln("onMouseOut=\"window.status='';\"");
    w.document.writeln("BORDER=0 WIDTH=630 HEIGHT=420 VSPACE=0 HSPACE=0");
    w.document.writeln("ALT='click image to close this window'");
    w.document.writeln("></A>");
    w.document.writeln("</BODY></HTML>\n");
    w.document.close();
    w.focus();
    }
    </script>
    </head>
    <body>
    <!---Body--->
    //call it like this
    <A HREF="javascript:LoadPhoto('myimage.jpg')">Click here
    </a>
    </body>
    </html>

    ============================================
    Duras mx

  3. #3
    SitePoint Member
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice solution at codelifter.com

    http://www.codelifter.com/main/javas...magepopup.html

    Also, you have choice of Text Links, Button Links or Image Links.
    The script Automatically Sizes Popup Window to Image.

    Bye

  4. #4
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    var picwin = null, HTML;
    
    function LoadPhoto(sPic_url, sTitle)
    { 
    	if (picwin && !picwin.closed)
    		picwin.close();
    	HTML = '';
    	HTML += '<html><head><title> |||| ' + sTitle + ' |||| </title></head>'; 
    	HTML += '<body style="margin:0;" onclick="self.close()">';
    	HTML += '<img width="640" height="480" border="0" src="' + sPic_url + '" '; 
    	HTML += 'alt="click image to close this window">';
    	HTML += '</body></html>';
    
    	var l = (screen.availWidth - 640) / 2;
    	var t = (screen.availHeight - 480) / 2;
    	picwin = open('javascript&#58;opener.HTML', 'picwin', 'left='+l+',top='+t+',width=640,height=480,status=0');
    	if (picwin && !picwin.closed)
    		picwin.focus();
    	return false;
    }
    
    </script>
    </head>
    <body> 
    <a href="http://www.kcidesign.com/artwork/wallpaper/apple2_640X480.jpg" 
    onclick="return LoadPhoto(this.href,'APPLE')">Click here 
    </a>
    </body>
    </html>
    ::: certified wild guess :::


Bookmarks

Posting Permissions

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