Jump to content
Larry Ullman's Book Forums

Recommended Posts

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.js
xamp-->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

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

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

 Share

×
×
  • Create New...