Jump to content
Larry Ullman's Book Forums
Sign in to follow this  

Recommended Posts

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>

Share this post


Link to post
Share on other sites

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]

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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);

?>

Share this post


Link to post
Share on other sites

Just to confirm, images.php is listing the images but clicking on any link creates the popup without any image showing?

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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)?

Share this post


Link to post
Share on other sites

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);
		
?>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...