www.webdeveloper.com
Results 1 to 14 of 14

Thread: JavaScript:window.open function error

  1. #1
    Join Date
    Sep 2007
    Posts
    136

    JavaScript:window.open function error

    Hello, this is small php gallery code which generates thumbnails of an images and when clicked on Thumbnail bigger image is displayed.

    Now i want to add some Function which will open an image in a popup window with no Scrolbars, Adress bar, etc... and having fixed size (500,500) and i did something like this:

    PHP Code:
    <BR>
    <table align="center" border="0" cellpadding="0" cellspacing="0" width="530" height="50">
    <TR><TD height="50"><img src="images/gallery_ge_pgtitle.jpg"></TD></TR>
    </table>
    <?php
    function createThumbs$pathToImages$pathToThumbs$thumbWidth )
    {
     
      
    $dir opendir$pathToImages );

     
      while (
    false !== ($fname readdir$dir ))) {
        
        
    $info pathinfo($pathToImages $fname);
        
        if ( 
    strtolower($info['extension']) == 'jpg' )
        {
         

          
          
    $img imagecreatefromjpeg"{$pathToImages}{$fname});
          
    $width imagesx$img );
          
    $height imagesy$img );

          
          
    $new_width $thumbWidth;
          
    $new_height floor$height * ( $thumbWidth $width ) );

          
          
    $tmp_img imagecreatetruecolor$new_width$new_height );

          
          
    imagecopyresized$tmp_img$img0000$new_width$new_height$width$height );

          
          
    imagejpeg$tmp_img"{$pathToThumbs}{$fname});
        }
      }
      
      
    closedir$dir );
    }
    createThumbs("images/upload/","images/upload/thumbs/",100);



    function 
    createGallery$pathToImages$pathToThumbs )
    {
      
      
    $output .= "<table border=\"0\" cellspacing=\"4\" align=\"center\" cellpadding=\"12\" width=\"500\">";
      
    $output .= "<tr>";

      
      
    $dir opendir$pathToThumbs );

      
    $counter 0;
      
      while (
    false !== ($fname readdir($dir)))
      {
        
        if (
    $fname != '.' && $fname != '..')
        {
          
    $output .= "<td style=\"border-top:1px #CCCCCC solid; border-bottom:1px #CCCCCC solid; border-left:1px #CCCCCC solid; border-right:1px #CCCCCC solid;\" valign=\"middle\" align=\"center\"><a href=\"JavaScript:window.open('{$pathToImages}{$fname}', 'mywindow', 'toolbar=no, width=500, height=500' return false);\">";
          
    $output .= "<img src=\"{$pathToThumbs}{$fname}\" border=\"0\" />";
          
    $output .= "</a></td>";

          
    $counter += 1;
          if ( 
    $counter == ) { $output .= "</tr><tr>"; }
        }
      }
      
      
    closedir$dir );

      
    $output .= "</tr>";
      
    $output .= "</table>";
      print 
    "$output";

    }
    createGallery("images/upload/","images/upload/thumbs/");
    ?>


    You Will see that URL looks Like this :

    Code:
    $output .= "<td style=\"border-top:1px #CCCCCC solid; border-bottom:1px #CCCCCC solid; border-left:1px #CCCCCC solid; border-right:1px #CCCCCC solid;\" valign=\"middle\" align=\"center\"><a href=\"javascript:window.open('{$pathToImages}{$fname}', 'mywindow', 'toolbar=no, width=500, height=500' return false);\">";
          $output .= "<img src=\"{$pathToThumbs}{$fname}\" border=\"0\" />";
          $output .= "</a></td>";

    and it gives me error, no popup window appears


    Thanks.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <a href=\"{$pathToImages}{$fname}\" onclick=\"window.open('{$pathToImages}{$fname}', 'mywindow', 'toolbar=no, width=500, height=500'); return false;\">";
    Last edited by Fang; 04-21-2008 at 04:32 AM.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Sep 2007
    Posts
    136
    uhm..

    Thank You Friend !!

  4. #4
    Join Date
    Sep 2007
    Posts
    136
    and..

    how can i specify the TITLE of an opening page?

    because it displayes Full Path to an image.

    and also the image in the window is not Centered. how can i center image?

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The title is specified in the title element:
    Code:
    <title>Page title</title>
    Center image in css
    Code:
    img {display:block; margin:auto;}
    At least 98% of internet users' DNA is identical to that of chimpanzees

  6. #6
    Join Date
    Sep 2007
    Posts
    136
    but as you see i have a window which is opened using JavaScript.. when Thumbnail created and clicked on it in URL if u look at it i have something like


    Code:
    <a href=\"{$pathToImages}{$fname}\"; onclick=\"window.open('{$pathToImages}{$fname}', 'mywindow', 'toolbar=no, status=no, top=100, left=100, width=750, height=750'); return false\">

    so there is no .php or .html file specified, hope you understand how does this code work. thats why i do not understand where i can specify title and alignment of an image.

  7. #7
    Join Date
    Sep 2007
    Posts
    136
    so i thought about to do something like this:

    Code:
    $output .= "
    
    	<SCRIPT LANGUAGE=\"JavaScript\">
    		function openindex()
          	{
    		OpenWindow=window.open(\"\", \"newwin\", \"height=500, width=500,toolbar=no,scrollbars=\"+scroll+\", menubar=no\");
    		OpenWindow.document.write(\"<TITLE>Gallery</TITLE>\")
    		OpenWindow.document.write(\"<BODY BGCOLOR=white>\")
    		OpenWindow.document.write(\"{$pathToImages}{$fname}\")
    		OpenWindow.document.write(\"</BODY>\")
    		OpenWindow.document.write(\"</HTML>\")
    		OpenWindow.document.close()
    		self.name=\"main\"
         	}
    	       </SCRIPT>
          			<td style=\"border-top:1px #CCCCCC solid; border-bottom:1px #CCCCCC solid; border-left:1px #CCCCCC solid; border-right:1px #CCCCCC solid;\" valign=\"middle\" align=\"center\">
         			<a href=\"\" onclick=\"openindex();\">";
    
          		$output .= "<img src=\"{$pathToThumbs}{$fname}\" border=\"0\" />";
          			$output .= "</a></td>";
          		$counter += 1;
         	 if ( $counter % 3 == 0 ) { $output .= "</tr><tr>"; }


    But it comes with an uknonw error..

    1. if i have this :

    OpenWindow.document.write(\"{$pathToImages}{$fname}\")


    then no Pop up window comes when clicking on an image..

    but if i have :


    OpenWindow.document.write(\"<h1>THis a Popup Window</h1>\")


    then it works... why does it comes with an error when i want to input an image?


    also when i see a Source of the page. it show me that $pathToImages $fname was successfully imported.

    thank you

  8. #8
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Show the source html document

    What does {$pathToImages}{$fname} produce in the document?
    At least 98% of internet users' DNA is identical to that of chimpanzees

  9. #9
    Join Date
    Sep 2007
    Posts
    136
    This is Code:

    Code:
    <SCRIPT LANGUAGE=\"JavaScript\">
    		function openindex()
          	{
    		OpenWindow=window.open(\"\", \"newwin\", \"height=500, width=500,toolbar=no,scrollbars=\"+scroll+\", menubar=no\");
    		OpenWindow.document.write(\"<TITLE>Gallery</TITLE>\")
    		OpenWindow.document.write(\"<BODY BGCOLOR=white>\")
    		OpenWindow.document.write(\"<img src=\"{$pathToImages}{$fname}\">\")
    		OpenWindow.document.write(\"</BODY>\")
    		OpenWindow.document.write(\"</HTML>\")
    		OpenWindow.document.close()
    		self.name=\"main\"
         	}
    	       </SCRIPT>


    This is is Source output:


    Code:
    <SCRIPT LANGUAGE="JavaScript">
    		function openindex()
          	{
    		OpenWindow=window.open("", "newwin", "height=500, width=500,toolbar=no,scrollbars="+scroll+", menubar=no");
    		OpenWindow.document.write("<TITLE>Gallery</TITLE>")
    		OpenWindow.document.write("<BODY BGCOLOR=white>")
    		OpenWindow.document.write("<img src="images/upload/IMG_5293.jpg">")
    		OpenWindow.document.write("</BODY>")
    		OpenWindow.document.write("</HTML>")
    		OpenWindow.document.close()
    		self.name="main"
         	}
    	       </SCRIPT>
    
          			<td style="border-top:1px #CCCCCC solid; border-bottom:1px #CCCCCC solid; border-left:1px #CCCCCC solid; border-right:1px #CCCCCC solid;" valign="middle" align="center">
         			<a href="" onclick="openindex(); Return False;"><img src="images/upload/thumbs/IMG_5293.jpg" border="0" /></a></td>

  10. #10
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Create a valid document in the popup
    JavaScript is case sensitive
    Code:
    // Not
    OpenWindow.document.write(\"<img src=\"{$pathToImages}{$fname}\">\")
    // use single quotes and double quotes for attribute values
    OpenWindow.document.write('<img src="{$pathToImages}{$fname}">')
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>popup</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    var popup = null;
    function openindex(image) {
    str ="<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">\n"+
    "<html lang=\"en\">\n"+
    "<head>\n"+
    "<title>Gallery<\/title>\n"+
    "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n"+
    "<style type=\"text/css\">\n"+
    "body {background:#fff;}\n"+
    "<\/style>\n"+
    "<\/head>\n"+
    "<body>\n"+
    "<div><img src=\""+image+"\" alt=\"\"><\/div>\n"+
    "<\/body>\n"+
    "<\/html>";
    
    var properties = "resizable=yes,scrollbars=no,status=no,width=500,height=500";
    if(popup == null || popup.closed) {
        popup = window.open("", "imageWindow", properties);
        }
    else {
        popup.close();
        popup = window.open("", "imageWindow", properties);
        }
    popup.document.write(str);
    popup.document.close();
    popup.focus();
    }
    </script>
    
    <style type="text/css">
     
    </style>
    
    </head>
    <body>
    <p><a href="images/upload/thumbs/IMG_5293.jpg" onclick="openindex(this.href); return false;"><img src="images/upload/thumbs/IMG_5293.jpg" border="0" /></a></p>
    </body>
    </html>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  11. #11
    Join Date
    Sep 2007
    Posts
    136
    i realy do not understand what you did?

    when i just copy past this code instead of mine it gives me php error

    "T_STRING"

    could you please insert it in my php code?
    and show me that way?

    Thank You

  12. #12
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    You only have to replace the image paths with {$pathToThumbs}{$fname}
    At least 98% of internet users' DNA is identical to that of chimpanzees

  13. #13
    Join Date
    Sep 2007
    Posts
    136
    i made it this way and it works Perfect:

    PHP Code:

    <BR>
    <table align="center" border="0" cellpadding="0" cellspacing="0" width="530" height="50">
    <TR><TD height="50"><img src="images/gallery_ge_pgtitle.jpg"></TD></TR>
    </table>
    <?php

    $lang_id 
    = &$_REQUEST['lang_id'];
    if (isset(
    $lang_id) && $lang_id == "geo") { $close="CLOSE"; } else { $close="დახურე"; }
    function 
    createThumbs$pathToImages$pathToThumbs$thumbWidth )
    {

      
    $dir opendir$pathToImages );


      while (
    false !== ($fname readdir$dir ))) {
      
        
    $info pathinfo($pathToImages $fname);
      
        if ( 
    strtolower($info['extension']) == 'jpg' )
        {
       

        
          
    $img imagecreatefromjpeg"{$pathToImages}{$fname});
          
    $width imagesx$img );
          
    $height imagesy$img );

        
          
    $new_width $thumbWidth;
          
    $new_height floor$height * ( $thumbWidth $width ) );

        
          
    $tmp_img imagecreatetruecolor$new_width$new_height );

        
          
    imagecopyresized$tmp_img$img0000$new_width$new_height$width$height );

        
          
    imagejpeg$tmp_img"{$pathToThumbs}{$fname});
        }
      }
     
      
    closedir$dir );
    }
    createThumbs("images/upload/","images/upload/thumbs/",135);



    function 
    createGallery$pathToImages$pathToThumbs )
    {
      
      
    $output .= "<table border=\"0\" cellspacing=\"4\" align=\"center\" cellpadding=\"12\" width=\"500\">";
      
    $output .= "<tr>";
      
     
      
    $dir opendir$pathToThumbs );

      
    $counter 0;
      
    $output.=" <SCRIPT LANGUAGE=\"JavaScript\">
            function openindex(imgname)

              {
            OpenWindow=window.open(\"\", \"newwin\", \"height=700, width=750,toolbar=no,scrollbars=\"+scroll+\", menubar=no, top=100\");
            OpenWindow.document.write(\"<HTML>\")
            OpenWindow.document.write(\"<HEAD>\")
            OpenWindow.document.write(\"<TITLE>Gallery</TITLE>\")
            OpenWindow.document.write(\"</HEAD>\")
            OpenWindow.document.write(\"<STYLE>\")
            OpenWindow.document.write(\".asdad {font-size:14px; font-family: Tahoma; color: #C30000; Font-weight:Bold; text-decoration:none;}\")
            OpenWindow.document.write(\"</STYLE>\")
            OpenWindow.document.write(\"<BODY BGCOLOR=#CCCCCC topmargin='0' leftmargin='0' rightmargin='0'>\")
            OpenWindow.document.write(\"<div align=right style='padding-top:15px; padding-right:15px;'><a class='asdad'  href='JavaScript:self.close();'>x</a></div>\")
            OpenWindow.document.write(\"<table border='0' cellspacing='0' cellpadding='0' width='100%' align='center' width='750' height='700'>\")
            OpenWindow.document.write(\"<tr>\")
            OpenWindow.document.write(\"<td align='center'>\")
            OpenWindow.document.write(\"<img src=\"+imgname+\">\")
            OpenWindow.document.write(\"</td>\")
            OpenWindow.document.write(\"</tr>\")
            OpenWindow.document.write(\"</table>\")
            OpenWindow.document.write(\"</BODY>\")
            OpenWindow.document.write(\"</HTML>\")
            OpenWindow.document.close()
            self.name=\"main\"              
             }
               </SCRIPT>"
    ;

      while (
    false !== ($fname readdir($dir)))
      {
      
        if (
    $fname != '.' && $fname != '..')
        {
         
    $output .= "

      
                      <td style=\"border-top:1px #CCCCCC solid; border-bottom:1px #CCCCCC solid; border-left:1px #CCCCCC solid; border-right:1px #CCCCCC solid;\" valign=\"middle\" align=\"center\">
                      <a href=\"JavaScript:Gallery(
    $fname)\" onclick=\"openindex('{$pathToImages}{$fname}')\" Return false;>";

                      
    $output .= "<img src=\"{$pathToThumbs}{$fname}\" border=\"0\" />";
                    
    $output .= "</a></td>";
                  
    $counter += 1;
              if ( 
    $counter == ) { $output .= "</tr><tr>"; }
        }
      }
     
      
    closedir$dir );

      
    $output .= "</tr>";
      
    $output .= "</table>";
      print 
    "$output";

    }
    createGallery("images/upload/","images/upload/thumbs/");
    ?>
    Thank You Dude !!

  14. #14
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Read up on modern coding practices, you're stuck in the '80s
    At least 98% of internet users' DNA is identical to that of chimpanzees

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles