/    Sign up×
Community /Pin to ProfileBookmark

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:

[code=php]
<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/”);
?>

[/code]

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>”; [/CODE]

and it gives me error, no popup window appears

Thanks.

to post a comment
JavaScript

13 Comments(s)

Copy linkTweet thisAlerts:
@FangApr 21.2008 — &lt;a href="{$pathToImages}{$fname}" onclick="window.open('{$pathToImages}{$fname}', 'mywindow', 'toolbar=no, width=500, height=500'); return false;"&gt;";
Copy linkTweet thisAlerts:
@LogicOpinionauthorApr 21.2008 — uhm..

Thank You Friend !!
Copy linkTweet thisAlerts:
@LogicOpinionauthorApr 21.2008 — 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?
Copy linkTweet thisAlerts:
@FangApr 21.2008 — The title is specified in the title element:&lt;title&gt;Page title&lt;/title&gt;
Center image in css
img {display:block; margin:auto;}
Copy linkTweet thisAlerts:
@LogicOpinionauthorApr 22.2008 — 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">[/CODE]


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.
Copy linkTweet thisAlerts:
@LogicOpinionauthorApr 22.2008 — 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>"; }[/CODE]




But it comes with an uknonw error..

  • 1. if i have this :


  • [B]OpenWindow.document.write("{$pathToImages}{$fname}")[/B]


    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
    Copy linkTweet thisAlerts:
    @FangApr 22.2008 — Show the source html document

    What does [I]{$pathToImages}{$fname}[/I] produce in the document?
    Copy linkTweet thisAlerts:
    @LogicOpinionauthorApr 22.2008 — 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>

    [/CODE]




    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>
    [/CODE]
    Copy linkTweet thisAlerts:
    @FangApr 22.2008 — Create a valid document in the popup

    JavaScript is case sensitive
    <i>
    </i>// Not
    OpenWindow.document.write("&lt;img src="{$pathToImages}{$fname}"&gt;")
    // use single quotes and double quotes for attribute values
    OpenWindow.document.write('&lt;img src="{$pathToImages}{$fname}"&gt;')

    &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
    &lt;html lang="en"&gt;
    &lt;head&gt;
    &lt;title&gt;popup&lt;/title&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

    &lt;script type="text/javascript"&gt;
    var popup = null;
    function openindex(image) {
    str ="&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;n"+
    "&lt;html lang="en"&gt;n"+
    "&lt;head&gt;n"+
    "&lt;title&gt;Gallery&lt;/title&gt;n"+
    "&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;n"+
    "&lt;style type="text/css"&gt;n"+
    "body {background:#fff;}n"+
    "&lt;/style&gt;n"+
    "&lt;/head&gt;n"+
    "&lt;body&gt;n"+
    "&lt;div&gt;&lt;img src=""+image+"" alt=""&gt;&lt;/div&gt;n"+
    "&lt;/body&gt;n"+
    "&lt;/html&gt;";

    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();
    }
    &lt;/script&gt;

    &lt;style type="text/css"&gt;

    &lt;/style&gt;

    &lt;/head&gt;
    &lt;body&gt;
    &lt;p&gt;&lt;a href="images/upload/thumbs/IMG_5293.jpg" onclick="openindex(this.href); return false;"&gt;&lt;img src="images/upload/thumbs/IMG_5293.jpg" border="0" /&gt;&lt;/a&gt;&lt;/p&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    Copy linkTweet thisAlerts:
    @LogicOpinionauthorApr 22.2008 — 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
    Copy linkTweet thisAlerts:
    @FangApr 22.2008 — You only have to replace the image paths with {$pathToThumbs}{$fname}
    Copy linkTweet thisAlerts:
    @LogicOpinionauthorApr 22.2008 — i made it this way and it works Perfect:

    [code=php]

    <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="&#4307;&#4304;&#4334;&#4323;&#4320;&#4308;"; }
    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/");
    ?>
    [/code]


    Thank You Dude !!
    Copy linkTweet thisAlerts:
    @FangApr 22.2008 — Read up on modern coding practices, you're stuck in the '80s
    ×

    Success!

    Help @LogicOpinion spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.19,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...