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