Jump to content
Larry Ullman's Book Forums

Chapter 11: Show_Image.Php, Function.Js, And Images.Php Help


Recommended Posts

Hey Larry,

 

Love your book so far and I'm really enjoying it!

I ran into a problem I cannot solve. I created all three scripts(images.php, function.js, show_image.php) and I ran it through the hosting web server. On /shou/htdocs/images.php I would see the list of picture links, but when I would click on any of them, the unavailable picture will show, not the uploaded picture.

The funny thing is no error will show on my debugger. I'm at a dead end, could you please help me? Below are the scripts I wrote. Most of them are completely similar to yours but I add a few extra things to it.

 

images.php

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

 

<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 the image to view on a separate window.</p>

 

<ul>

 

<?php

 

$dir = "/shou/uploads";

 

//Read all the images into array

$files = scandir($_SERVER["DOCUMENT_ROOT"].$dir);

 

foreach($files as $image){

 

if(substr($image, 0, 1 ) != '.'){

 

//Get image's size in pixels

$image_size = getimagesize($_SERVER["DOCUMENT_ROOT"]."$dir/$image");

 

$image_name = urlencode($image);

 

echo "<li><a href =\"javascript: create_window('$image_name', $image_size[0], $image_size[1])\">$image</a></li>\n";

 

}

 

}

 

?>

 

</ul>

</body>

</html>

 

function.js

 

//Make a pop-up window function

function create_window (image, width, height) {

 

width = width + 10;

height = height + 10;

 

//If the window is already open,resize it to the new demensions:

if (window.popup && !window.popup.closed) {

 

window.popup.resizeTo(width, height);

 

}

 

//Set windows 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);

 

pop.focus();

 

}

 

show_image.php

 

<?php

 

$name = FALSE;

 

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 = "/shou/uploads/{$_GET['image']}";

 

if($_SERVER["DOCUMENT_ROOT"].file_exists($image) AND (is_file($_SERVER["DOCUMENT_ROOT"].$image))){

 

//Set the name as this image:

$name = $_GET['image'];

 

}

}

 

}

 

if(!$name){

$image = '/shou/htdocs/images/unavailable.jpg';

$name = 'unavailable.jpg';

 

}

 

//Get the image information:

$info = getimagesize($_SERVER["DOCUMENT_ROOT"].$image);

$fs = filesize($_SERVER["DOCUMENT_ROOT"].$image);

 

//Send the content information:

header("Content-Type: {$info['mime']}\n");

header("Content-Disposition: inline; filename=\"$name\"\n");

header("Content-Length: $fs\n");

 

//Send file:

readfile($_SERVER["DOCUMENT_ROOT"].$image);

Link to comment
Share on other sites

Sorry I meant this one.

 

show_image.php

 

<?php

 

$name = FALSE;

 

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 = "/shou/uploads/{$_GET['image']}";

 

if($_SERVER["DOCUMENT_ROOT"].file_exists($image) AND (is_file($_SERVER["DOCUMENT_ROOT"].$image))){

 

//Set the name as this image:

$name = $_GET['image'];

 

}

}

 

}

 

if(!$name){

$image = '/shou/htdocs/images/unavailable.jpg';

$name = 'unavailable.jpg';

 

}

 

//Get the image information:

$info = getimagesize($_SERVER["DOCUMENT_ROOT"].$image);

$fs = filesize($_SERVER["DOCUMENT_ROOT"].$image);

 

//Send the content information:

header("Content-Type: {$info['mime']}\n");

header("Content-Disposition: inline; filename=\"$name\"\n");

header("Content-Length: $fs\n");

 

//Send file:

readfile($_SERVER["DOCUMENT_ROOT"].$image);

Link to comment
Share on other sites

shousommers20, please read your question again. You said:

 

... how do I display the images instead of displaying the links in the images.php script?

 

You did not say, "How do I use clickable images instead of text links?" or, "How do I make clickable thumbnails?" etc.

In the future, please clearly state your question, and most of all, don't hint at the fact that someone helping is wrong because you did not say what you mean.

 

To answer your question, as benjamin said, you should wrap your img elements in a elements.

If you're looking to add some pizzazz to a picture gallery quickly and easily, you might want to check out some of the free thumbnail gallery libraries available for jQuery.

Link to comment
Share on other sites

HartleySan: Sorry to offended you. I'll watch what I'll say next time and I really do appreciate your help.

 

This is what I did so far in my images.php

 

echo "<li><a href =\"javascript: create_window('$image_name', $image_size[0], $image_size[1])\" />

<img src=\"javascript: create_window('$image_name', $image_size[0], $image_size[1])\" /></a></li>\n";

 

What I'm trying to accomplish is to have all the uploaded pictures diplayed as a clickable image. Once clicked then the javascript popup image window is diplayed. The list of images doesn't really look so good. I'm not up to jQuery yet. I'm learning by chapter by chapter.

Link to comment
Share on other sites

shou, it's okay. Thanks for the apology. More than anything, I can get kind of anal about forum etiquette.

 

Anyway, you're very close with your revised code.

The main thing to understand is that img elements are not clickable links by default and the src attribute does not work like the href attribute in a elements. In other words, don't assign the JS create_window function call to the src attribute of the img elements. Instead, just assign a standard link to the src attribute and you should get what you want (barring any other errors).

Link to comment
Share on other sites

No problem.

When I say "standard link", I mean the file name or path + file name of the image file, just as you assumed.

 

Also, the following statement is incorrect:

Since i'm using a foreach function to display multiple images, i can't specifically assign a image file to src.

 

If you look at the foreach loop code again, you'll notice that the variable $image_name within the foreach loop contains the name of a single image file each time through the for loop. In fact, this is the variable being used to load the image in the separate window that pops up via JS.

As such, if you simply assign that variable to the src attribute of the img tag as well, then you should be fine.

 

To be less abstract and provide some actual code, if you change the following line as follows, clickable images should be loaded. (Note that I didn't actually test the code.)

 

Before:
echo "<li><a href =\"javascript: create_window('$image_name', $image_size[0], $image_size[1])\">$image</a></li>\n";

After:
echo "<li><a href =\"javascript: create_window('$image_name', $image_size[0], $image_size[1])\"><img src=\"$image_name\" width="120" height="120"></a></li>\n";

 

Please also note that I hardcoded a width and height of 120 pixels in for each of the img elements, as they should be thumbnail-size.

Ideally, you'd want to have a second copy of all the images that are actually smaller in size, as the thumbnails will load a lot faster that way and if you use some professional image editing software to shrink them down, the images will also look better than images shrunken down by the browser.

 

Does that help?

Link to comment
Share on other sites

Yes, thank you with your explanation. I understand a little bit more. Unfortunately, your After: code did not work. I don't know if I'm correct, but shouldn't an img tag have an alt? And i do believe at the end of the img tag there should be a forward slash. Still, after those probable corrections, the clickable images has not shown.

Link to comment
Share on other sites

The alt attribute is optional, but recommended, yes. I was trying to keep the code simple for now. Also, the forward slash at the end of the img element is only required for strict XHTML parsing, which you're not doing anyway, so it doesn't matter. Having the forward slash versus not having it will not affect your code at all.

 

As for why it's not working, what is being displayed on your page? Are 120x120 pixel boxes with no images being displayed or nothing at all? If the empty boxes are displayed, are they clickable? When you were using just the original text links (i.e., the before code) and you clicked on a text link, was the image properly loaded in a new window?

 

Edit: Something else I just realized is that we never established whether margaux's recommendation got your code working or not. Was your code working properly after margaux's suggestion? I get the feeling that the problem has to do with the links to your files. In other words, you're not linking to the right folder, etc.

Link to comment
Share on other sites

Yes, from margaux's recommendation I fixed the problem. It's working fine and I'm getting the same results as the book.

 

As for the results of your code, I have a blank page. I looked on my debugger and this is what it has stated:

PHP Parse error: syntax error, unexpected T_LNUMBER, expecting ',' or ';' in home/shou/htdocs/images.php on line 36

 

I tried other ways to work with you code like:

echo "<li><a href =\"javascript: create_window('$image_name', $image_size[0], $image_size[1])\"><img src=\"$image_name\" width=\"120\" height=\"120\" alt=\"$image\" /></a></li>\n";

 

But that didn't work either.

Link to comment
Share on other sites

Ah, duh, I'm an idiot. I found the problem: unescaped double quotes in the img tag.

I apologize, but I always use single quotes instead of double quotes for this very reason; I always forget to escape double quotes in HTML echoed via PHP. Change my code as follows, and you should be fine:

 

Before:
echo "<li><a href =\"javascript: create_window('$image_name', $image_size[0], $image_size[1])\"><img src=\"$image_name\" width="120" height="120"></a></li>\n";
After:
echo "<li><a href =\"javascript: create_window('$image_name', $image_size[0], $image_size[1])\"><img src=\"$image_name\" width=\"120\" height=\"120\"></a></li>\n";

Link to comment
Share on other sites

HartleySan's code worked for me - I just needed to escape the double quotes for the height and width attributes. You might want to check your file names - if there are spaces in them, using urlencode will add characters to the $_GET['image'] variable and the filename won't be recognised.

Link to comment
Share on other sites

Thanks, margaux, but likely the problem was that shou copied my code verbatim and didn't understand the syntax error being output because I forgot to escape some of the double quotes.

Anyway, thanks for verifying that my code does indeed work when properly escaped.

Link to comment
Share on other sites

Awesome it works!!!

I made a few adjustments of my own.

 

on images.php:

I redirected the uploads file into the htdocs file.

Before:

$dir = "/shou/uploads";

After:

$dir = "/shou/htdocs/uploads";

 

I also redirected the img tag:

Before:

<img src=\"$image_name\" width=\"120\" height=\"120\"></a></li>\n";

After:

<img src=\"uploads/$image_name\" width=\"120\" height=\"120\"></a></li>\n";

 

On show_images.php

Then I changed the image path for this variable:

Before:

$image = "/shou/uploads/{$_GET['image']}";

After:

$image = "/shou/htdocs/uploads/{$_GET['image']}";

 

Thank you, HartleySan and Margaux for your guys help and being very patient.

Link to comment
Share on other sites

What do you mean by "social media"?

Most sites these days use thumbnails for galleries, and upon clicking on a thumbnail, the full-size image can be viewed. I think that technique is tried and true and still universal to this day.

 

With that said, most "trendy" social media sites tend to use jQuery solutions, as I suggested, which allow you to quickly and easily style a thumbnail gallery. You may want to consider that.

 

But again, I'm not exactly sure what you're asking, so please clarify.

Thank you.

Link to comment
Share on other sites

 Share

×
×
  • Create New...