leo Posted November 12, 2012 Share Posted November 12, 2012 im having problems trying to load the new images into another window, the image link will not open. i do not understand how the show_image.php file works with this and how the creat_window javascript function works with this. Please take a look at my code below... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> <title>Images</title> <script language="Javascript"> <!-- // Hide from old browsers. // Make a pop-up window function: function create_window (image, width, height) { // Add some pixels to the width and height: width = width + 10; height = height + 10; // If the window is already open, // resize it to the new dimensions: if (window.popup && !window.popup.closed) { window.popup.resizeTo(width,height); } // Set the window properties: var specs = "location=no, scrollbars=no, menubars=no, toolbars=no, resizable=yes, left=0, top=0, width=" + width + ", height=" + height; // Set the URL: var url = "show_image.php?image=" + image; // Create the pop-up window: popup = window.open(url,"ImageWindow", specs); popup.focus(); } // End of function. //--></script> </head> <body> <p>Click on an image to view it in a separate window.</p> <table align="center" cellspacing="5" cellpadding="5" border="1"> <tr> <td align="center"><b>Image Name</b></td> <td align="center"><b>Image Size</b></td> </tr> <?php # Script 10.4 - images.php // This script lists the images in the uploads directory. $dir = 'uploads'; // Define the directory to view. $files = scandir($dir); // Read all the images into an array. // Display each image caption as a link to the Javascript function: foreach ($files as $image) { if (substr($image, 0, 1) != '.') { // Ignore anything starting with a period. // Get the image’s size in pixels: $image_size = getimagesize("$dir/$image"); // Calculate the image’s size in kilobytes: $file_size = round( (filesize("$dir/$image")) / 1024) . "kb"; // Make the image’s name URL-safe: $image = urlencode($image); // Print the information: echo "\t<tr>\t\t<td><a href=\"javascript:create_window('$image',$image_size[0],$image_size[1])\">$image</a></td> \t\t<td>$file_size</td>\t</tr>\n"; } // End of the IF. } // End of the foreach loop. ?> </table> </body> </html> Link to comment Share on other sites More sharing options...
Larry Posted November 12, 2012 Share Posted November 12, 2012 You should start by opening your browser's console to see if there's a Javascript error. Link to comment Share on other sites More sharing options...
leo Posted November 12, 2012 Author Share Posted November 12, 2012 Its saying create_window is not defined, i copied the code directly from you book, is there any syntax errors here? thanks Link to comment Share on other sites More sharing options...
leo Posted November 12, 2012 Author Share Posted November 12, 2012 and i get this error message... Timestamp: 12/11/2012 14:26:48 Error: [Exception... "'Javascript component does not have a method named: "onStatusChange"' when calling method: [nsIWebProgressListener::onStatusChange]" nsresult: "0x80570030 (NS_ERROR_XPC_JSOBJECT_HAS_NO_FUNCTION_NAMED)" location: "<unknown>" data: no] Link to comment Share on other sites More sharing options...
Larry Posted November 12, 2012 Share Posted November 12, 2012 Try getting rid of the space between "create_window" and ( where it's defined. Also make sure that your function definition exactly matches your function call. To be safe, copy one of the two and paste it onto the other. Link to comment Share on other sites More sharing options...
artsyL Posted July 17, 2013 Share Posted July 17, 2013 Hi, My web console (firebug) is not catching any errors (I also tried it in Chrome console), so I can't figure out why images are not loading. The pop-up window seems to be working (no errors, it pops up in different sizes according to the file). Here is the script: it's exactly what is in the book (though the charset is utf-8 for various reasons, and the upload folder is actually two levels up). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS Images</title> <script language="javascript"> <!-- //hide from old browsers //Make a pop-up window function: function create_window (image, width, height) { //Add some pixels to the width and height: width = width + 10; height = height + 10; //if the window is already open, resize it to new dimensions if (window.popup && !window.popup.closed) { window.popup.resizeTo(width, height); } //Set the window properties var specs = "location = no, scrollbars = no, menubars = no, toolbars = no,resizable = yes,left=0,top=0, width=" + width + ", height=" + height; //set the URL: var url = "show_image.php?image=" + image; //Creat the pop-up window: popup = window.open(url,"ImageWindow",specs); popup.focus(); }//end of function: //--></script> </head> <body> <p>Click on an image to view it in a separate window</p> <table align="center" cellspacing="5" cellpadding="5" border="1"> <tr> <td align="center"><b>Image Name</b></td> <td align="center"><b>Image Size</b></td> </tr> <?php #Script 10.4 - Images.php //This script lists the images in the uploads directory. $dir = '../../uploads';//Define the directory to view $files = scandir($dir);//read all the images in an array //Display each image caption as a link to the JavaScript function foreach ($files as $image) { if(substr($image, 0, 1) !='.'){//Ignore anything starting with a period //Get the image's size in pixels: $image_size = getimagesize ("$dir/$image"); //Calculate the image's size in kilobytes: $file_size = round ( (filesize("$dir/$image"))/1024) . "kb"; //Make the image's name URL-safe: $image = urlencode($image); //Print the information echo "\t<tr> \t\t<td><a href=\"javascript:create_window('$image',$image_size[0],$image_size[1])\">$image</a></td> \t\t<td>$file_size</td> \t</tr>\n"; }//end of the IF }//end of the FOREACH loop ?> </table> </body> </html> Link to comment Share on other sites More sharing options...
artsyL Posted July 17, 2013 Share Posted July 17, 2013 see below... Link to comment Share on other sites More sharing options...
artsyL Posted July 17, 2013 Share Posted July 17, 2013 Spoke too soon. Still having issues with the image retrieval. I has a dumb today. Here is the show_image script: <?php # Script 10.5 show_image.php //this page displays an image $name = FALSE; //flag variable: //Check for an image name in the URL: if(isset($_GET['image'])) { //full image path $image = "../../uploads/{$_GET['image']}"; //Check that the image exists and is a file if (file_exists($image) &&(is_file($image))) { //make sure it has an image's extension $ext = strtolower ( substr ($_GET['image'], -4)); if(($ext == '.jpg') OR ($ext == 'jpeg') OR ($ext == '.png')) { //set the name as this image $name = $_GET['image']; }//end of $ext IF }//end of file_exists IF }//end of isset($_GET[image) IF //If there was a problem, use the default image if (!$name) { $image = 'images/unavailable.png'; $name = 'unavailable.png'; } //Get the image information $info = getimagesize($image); $fs = filesize($image); //Send the content information header("Content-Type:{$info['mime']}\n"); header("Content-Disposition: inline; filename=\"$name\"\n"); header("Content-Length: $fs\n"); //send the file readfile($image); ?> Link to comment Share on other sites More sharing options...
Larry Posted July 17, 2013 Share Posted July 17, 2013 Just to confirm, images.php is listing the images but clicking on any link creates the popup without any image showing? Link to comment Share on other sites More sharing options...
artsyL Posted July 18, 2013 Share Posted July 18, 2013 Yes, that is correct. I have been able to get the images to display in a table, so I'm sure that the directory is correct and that the images are there. (my php skills have strange and wild strengths and weaknesses) Link to comment Share on other sites More sharing options...
margaux Posted July 18, 2013 Share Posted July 18, 2013 Is there anything in the pop up window? Any text or error message? Try looking at the source code to see if that helps. Link to comment Share on other sites More sharing options...
artsyL Posted July 18, 2013 Share Posted July 18, 2013 Should I be including <img src="">... anywhere? Did I miss something (it feels like I have combed through this thing a dozen times)? There is no text or error message in the pop up window (I did download the "image not available" png). The page source info for the pop up window is absolutely nothing. This is the page source info from images.php: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS Images</title> <script language="javascript"> <!-- //hide from old browsers //Make a pop-up window function: function create_window (image, width, height) { //Add some pixels to the width and height: width = width + 10; height = height + 10; //if the window is already open, resize it to new dimensions if (window.popup && !window.popup.closed) { window.popup.resizeTo(width, height); } //Set the window properties var specs = "location = no, scrollbars = no, menubars = no, toolbars = no,resizable = yes,left=0,top=0, width=" + width + ", height=" + height; //set the URL: var url = "show_image.php?image=" + image; //Creat the pop-up window: popup = window.open(url,"ImageWindow",specs); popup.focus(); }//end of function: //--></script> </head> <body> <p>Click on an image to view it in a separate window</p> <table align="center" cellspacing="5" cellpadding="5" border="1"> <tr> <td align="center"><b>Image Name</b></td> <td align="center"><b>Image Size</b></td> </tr> <tr> <td><a href="javascript:create_window('1',640,480)">1</a></td> <td>110kb</td> </tr> <tr> <td><a href="javascript:create_window('10',48,48)">10</a></td> <td>7kb</td> </tr> <tr> <td><a href="javascript:create_window('100',492,420)">100</a></td> <td>58kb</td> </tr> <tr> <td><a href="javascript:create_window('101',492,420)">101</a></td> <td>58kb</td> </tr> <tr> <td><a href="javascript:create_window('102',492,420)">102</a></td> <td>58kb</td> </tr> <tr> <td><a href="javascript:create_window('103',1024,768)">103</a></td> <td>606kb</td> </tr> <tr> <td><a href="javascript:create_window('11',48,48)">11</a></td> <td>7kb</td> </tr> <tr> <td><a href="javascript:create_window('12',48,48)">12</a></td> <td>7kb</td> </tr> </table> </body> </html> Link to comment Share on other sites More sharing options...
Larry Posted July 19, 2013 Share Posted July 19, 2013 What's the source of the popup window? Link to comment Share on other sites More sharing options...
artsyL Posted July 19, 2013 Share Posted July 19, 2013 The page source info page is completely blank. The address bar says: www/.../show_image.php?image=1. I'm using a hosted server. The scripts I downloaded from the book site do not work either. They result in exactly the same page source info etc. as in my last post. Could this be a server issue? Also, my javascript skills are iffy. I'm having no problems displaying images with straight-up php. Link to comment Share on other sites More sharing options...
artsyL Posted July 19, 2013 Share Posted July 19, 2013 Did I not understand your question? Link to comment Share on other sites More sharing options...
Larry Posted July 20, 2013 Share Posted July 20, 2013 Is this available online for us to test it? And, if so, at what URL? Link to comment Share on other sites More sharing options...
artsyL Posted July 20, 2013 Share Posted July 20, 2013 Here is the test site (I'm a freshly minted digital librarian and not so freshly minted archivist, so I'm learning new skills). (removed by user) It has the scripts from the book and my attempts (prefaced with JS). Thanks! Link to comment Share on other sites More sharing options...
artsyL Posted July 22, 2013 Share Posted July 22, 2013 Totally by accident, I discovered that because the image names are id numbers without image extensions, the images will not show. So here's my question. For security, is it best to strip the "make sure there is an image extension" portion of the show_images script, or should I change my upload method to include the extensions? Why? Link to comment Share on other sites More sharing options...
Larry Posted July 22, 2013 Share Posted July 22, 2013 Excellent catch! I was just looking at your code and didn't see anything obvious. The problem is that without the extensions, the browser doesn't know how to handle the file. If you aded the extension to the filename header: header("Content-Disposition: inline; filename=\"$name\"\n"); it should work again. As for the security implications, it really depends upon the application. If you've verified that the uploaded file is an image, and it's being displayed in the browser, I would generally keep the extension on it. Link to comment Share on other sites More sharing options...
artsyL Posted July 22, 2013 Share Posted July 22, 2013 Thank you! So, just for fun I stripped the file extension IF, and it now displays everything on my browser. If I decide to be lazy and leave it like this (If I apply this to my project I will have to change and test a bunch of pages to make it work everywhere), is it going to slow down the server/browser? Will it be a huge issue in lesser used browsers (so far it works in FF and Chrome)? By the way, do you have a book that teaches how to include navigation features in the pop-up (like pan, zoom, etc)? Link to comment Share on other sites More sharing options...
artsyL Posted July 22, 2013 Share Posted July 22, 2013 This my abridged script with an image instead of a file name, and without the file extensions, in case you are interested. Thanks again! Love the book and the forum site! The Javascript <script language="JavaScript"> <!-- // Hide from old browsers. // Make a pop-up window function: function create_window (image, width, height) { // Add some pixels to the width and height: width = width + 10; height = height + 10; // If the window is already open, // resize it to the new dimensions: if (window.popup && !window.popup.closed) { window.popup.resizeTo(width, height); } // Set the window properties: var specs = "location=no, scrollbars=no, menubars=no, toolbars=no, resizable=yes, left=0, top=0, width=" + width + ", height=" + height; // Set the URL: var url = "show_image.php?image=" + image; // Create the pop-up window: popup = window.open(url, "ImageWindow", specs); popup.focus(); } // End of function. //--></script> The rest from Images //make the query $q = 'SELECT * FROM images $r = mysqli_query($dbc, $q); //count the number of returned rows $num = mysqli_num_rows($r); if ($num >0) {//if it ran ok display records //Print how many images there are echo "<p>There are currently $num objects/works in your collection.</p>\n"; echo '<table align="center" cellspacing="5" cellpadding="5" border="1" width="85%"> <tr> <td align="left"><b>Image</b></td> <td align="left"><b>Object/Work information</b></td> </tr>'; //fetch and print all the records: $dir = '../../uploads'; // Define the directory to view. while ($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) { $image = $row['img_id']; //if (substr($image, 0, 1) != '.') { // Ignore anything starting with a period. // Get the image's size in pixels: $image_size = getimagesize ("$dir/$image"); // Calculate the image's size in kilobytes: $file_size = round ( (filesize ("$dir/$image")) / 1024) . "kb"; // Make the image's name URL-safe: $image = urlencode($image); echo '<tr>'; echo "<td align=\"left\" width=\"25%\"><figure><a href=\"javascript:create_window('$image',$image_size[0],$image_size[1])\"><img src='../../uploads/$image' />"; echo '<figcaption><p>Click on the image to view in a separate window.</p></figcaption></figure></td> <td align="left"> <div><table> <tr><td style="width: 20%">Title:</td><td> '.$row['title_display'].' </tr> echo '</table></div> </td> </tr>'; } echo '</table>'; mysqli_free_result ($r); }else{//if no records returned echo '<p class="error">there are currently no images.</p>'; } mysqli_close($dbc); ?> And show_images.php <?php # Script 10.5 - show_image.php // This page displays an image. $name = FALSE; // Flag variable: // Check for an image name in the URL: if (isset($_GET['image'])) { // Full image path: $image = "../../uploads/{$_GET['image']}"; $name = $_GET['image']; } // If there was a problem, use the default image: if (!$name) { $image = 'images/unavailable.png'; $name = 'unavailable.png'; } // Get the image information: $info = getimagesize($image); $fs = filesize($image); // Send the content information: header ("Content-Type: {$info['mime']}\n"); header ("Content-Disposition: inline; filename=\"$name\"\n"); header ("Content-Length: $fs\n"); // Send the file: readfile ($image); ?> Link to comment Share on other sites More sharing options...
Larry Posted July 24, 2013 Share Posted July 24, 2013 Thanks for sharing that and thanks for the nice words! Link to comment Share on other sites More sharing options...
Recommended Posts