AJugOrNot Posted May 17, 2013 Share Posted May 17, 2013 Hi everyone, I am really enjoying your book Larry, thanks. My problem is I am on the page where you use the header function and javascript to display the images from the uploads folder. I have one picture and for some reason when I click it, it does nothing. Would anyone care to look at my code or give me some hints as to why it is not working? I have tried the following: Compare my code to Larry's code Used Larry's code Enabled pop-ups Moved the javascript folder to a different location (a folder above and then changing the a href to ../javascript) images.php <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Images</title> <script type="text/javascript" charset="utf-8" src="js/function.js"></script> </head> <body> <p>Click on an image to view it in a separate window.</p> <ul> <?php # Script 11.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"); // Make the image's name URL-safe: $image_name = urlencode($image); // Print the information: echo "<li><a href=\"javascript:create_window('$image_name',$image_size[0],$image_size[1])\">$image</a></li>\n"; } // End of the IF. } // End of the foreach loop. ?> </ul> </body> </html> function.js //Script 11.3 - function.js 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 ot 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 show_image.php <?php # Script 11.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'])) { // Make sure it has an image's extension: $ext = strtolower ( substr ($_GET['image'], -4)); if (($ext == '.jpg') OR ($ext == 'jpeg') OR ($ext == '.png')) { // Full image path: $image = "../uploads/{$_GET['image']}"; // Check that the image exists and is a file: if (file_exists ($image) && (is_file($image))) { // Set the name as this image: $name = $_GET['image']; } // End of file_exists() IF. } // End of $ext 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); here are how to folders are set up: xamp-->htdocs-->Learning-->(all php files)xamp-->htdocs-->Learning-->javascript-->function.jsxamp-->htdocs-->uploads I also created an xampp-->uploads folder, but the files do not upload there and the scripts do not see the pictures in that folder. Thanks for everyone's help....... Link to comment Share on other sites More sharing options...
HartleySan Posted May 17, 2013 Share Posted May 17, 2013 Do you get any PHP errors? If not, it's likely an error in your JS. I'd try using a browser with a JS debugger, and see if any errors pop-up. My personal suggestion is to load the page in Chrome, and then press Ctrl + Shift + J to load the JS console and check for errors. Please let us know what you find. Link to comment Share on other sites More sharing options...
Larry Posted May 17, 2013 Share Posted May 17, 2013 Just to confirm, one picture doesn't work but all the rest do? If so, what's the HTML source look like for the image that doesn't work? Link to comment Share on other sites More sharing options...
AJugOrNot Posted May 18, 2013 Author Share Posted May 18, 2013 I just have 1 image in the folder. The link comes up but when clicking it, nothing happens. It says that the function create_window is undefined when I try to debug in Chrome. I will try to do some more research on my javascript. Link to comment Share on other sites More sharing options...
HartleySan Posted May 18, 2013 Share Posted May 18, 2013 Is your JS file being properly linked to? Is it in a folder name js relative to the PHP script? Link to comment Share on other sites More sharing options...
AJugOrNot Posted May 18, 2013 Author Share Posted May 18, 2013 That was the issue, I named the folder javascript instead of js........such a stupid mistake lol. Thanks HartleySan, got it working. Link to comment Share on other sites More sharing options...
HartleySan Posted May 18, 2013 Share Posted May 18, 2013 Good job. Link to comment Share on other sites More sharing options...
Recommended Posts