www.webdeveloper.com
+ Reply to Thread
Results 1 to 14 of 14
  1. 04-21-2008 04:21 AM #1
    LogicOpinion
    LogicOpinion is offline Registered User
    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, $img, 0, 0, 0, 0, $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 % 4 == 0 ) { $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.
    Reply With Quote Reply With Quote
  2. 04-21-2008 04:30 AM #2
    Fang's Avatar
    Fang
    Fang is offline Resistance is futile
    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
    Reply With Quote Reply With Quote
  3. 04-21-2008 04:32 AM #3
    LogicOpinion
    LogicOpinion is offline Registered User
    Join Date
    Sep 2007
    Posts
    136
    uhm..

    Thank You Friend !!
    Reply With Quote Reply With Quote
  4. 04-21-2008 07:55 AM #4
    LogicOpinion
    LogicOpinion is offline Registered User
    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?
    Reply With Quote Reply With Quote
  5. 04-21-2008 09:46 AM #5
    Fang's Avatar
    Fang
    Fang is offline Resistance is futile
    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
    Reply With Quote Reply With Quote
  6. 04-22-2008 03:20 AM #6
    LogicOpinion
    LogicOpinion is offline Registered User
    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.
    Reply With Quote Reply With Quote
  7. 04-22-2008 04:37 AM #7
    LogicOpinion
    LogicOpinion is offline Registered User
    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
    Reply With Quote Reply With Quote
  8. 04-22-2008 05:03 AM #8
    Fang's Avatar
    Fang
    Fang is offline Resistance is futile
    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
    Reply With Quote Reply With Quote
  9. 04-22-2008 05:09 AM #9
    LogicOpinion
    LogicOpinion is offline Registered User
    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>
    Reply With Quote Reply With Quote
  10. 04-22-2008 05:44 AM #10
    Fang's Avatar
    Fang
    Fang is offline Resistance is futile
    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
    Reply With Quote Reply With Quote
  11. 04-22-2008 06:47 AM #11
    LogicOpinion
    LogicOpinion is offline Registered User
    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
    Reply With Quote Reply With Quote
  12. 04-22-2008 09:14 AM #12
    Fang's Avatar
    Fang
    Fang is offline Resistance is futile
    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
    Reply With Quote Reply With Quote
  13. 04-22-2008 09:29 AM #13
    LogicOpinion
    LogicOpinion is offline Registered User
    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, $img, 0, 0, 0, 0, $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 % 3 == 0 ) { $output .= "</tr><tr>"; }
        }
      }
     
          closedir( $dir );

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

    }
    createGallery("images/upload/","images/upload/thumbs/");
    ?>
    Thank You Dude !!
    Reply With Quote Reply With Quote
  14. 04-22-2008 09:44 AM #14
    Fang's Avatar
    Fang
    Fang is offline Resistance is futile
    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
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

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

     

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

Forum Rules

 HTML5 Development Center



Recent Articles