Using PHP and JS to display images in div

Question

Disclaimer: this is for an assignment. I am not asking for explicit code. I only want enough information so that I may understand the task at hand and learn the associative parts.

I'm working on an assignment that requires me to accept a name and a picture through a form, put both into a database, then display all the names in the database below the form. The names are supposed to be clickable, and on click, display their respective picture in a div below the names.

I have gotten far enough to store the names and images in the database (I know, storing images in a database is bad, but it's part of the assignment.) The last part I have to finish is the linking and image display.

I have decided to give each name its own div, in a fairly reckless fashion:

for ($i = 0; $i < $nrows; $i++) {
    $name = htmlspecialchars(mysql_result($results, $i, "first_name")). " " .htmlspecialchars(mysql_result($results, $i, "last_name"));
    echo "<div id='".$name."'>";
    echo $name;
    echo "</div>";
}

So this works like a table, except each div has a unique ID (the name of the person, though I could change this to a numeric ID.) I figure it's fairly elementary to give an on-click function to each div, based on its unique id, but I'm not certain if I should do that within the bounds of the loop or outside...

Furthermore, I'm not exactly sure how to set up that on-click function to select the image of the specific name. Each image is stored as a LONGBLOB and as such needs to be encoded into an image form before being displayed. I know that base64_encode should work for this, but I can't seem to put it together in my head.

Please let me know if you need more of my code - I'll be happy to supply it. Otherwise, thank you for your time and your assistance.

Edit #1 (11:44am, 2/18/13):

$('#$name').click(function() {
    $("#image-div").html("<img src='data:image/jpeg;base64,'.base64_encode(mysql_result($results, $i, 'photo')).'>");
});

@roXon I left out the attempts at implementing an image display. I'll add what I've been working on. — idigyourpast
– idigyourpast, Commented Feb 18, 2013 at 19:43
in your edit, are you sure you're not mixing JS with PHP syntax? — Roko C. Buljan
– Roko C. Buljan, Commented Feb 18, 2013 at 19:47
Is it because you're ending the src='' attribute too early? Shouldn't the closing single quote of src='' come after the base64_encode? And also...think twice about encode vs. decode. If its stored encoded...you would want to decode it. — rnirnber
– rnirnber, Commented Feb 18, 2013 at 19:50
@mimber It's stored as binary data in the database, or at least I believe it is. I'm not sure about the quotes - these multiple quotes always confuse the hell out of me :/ — idigyourpast
– idigyourpast, Commented Feb 18, 2013 at 19:57
@howderek I'm asking if anyone can explain the concepts of this implementation to me, as I'm not finding what I need elsewhere. — idigyourpast
– idigyourpast, Commented Feb 18, 2013 at 19:58

prodigitalson · Accepted Answer · 2013-02-18 20:16:43Z

1

Give the divs a class then you can use jQuery.on to assign your click handler via a class selector
To retrive your images you need to create a controller to push the image down to the client with the proper content-type header; this makes your image tags look somehting like: <img src="image.php?name=theimagename" />

UPDATE:

you dont want to put the id directly in the js... you want to use some sort of attribute you can get at from the handler. For example:

<div id="theimagename" data-image-id="1">
</div>

Then from within the handler you can get the value of data-image-id and send it along to php.

edited Feb 18, 2013 at 20:16

answered Feb 18, 2013 at 19:47

prodigitalson

60.6k10 gold badges106 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

idigyourpast Over a year ago

So since the image name is determined dynamically, how do I pass that into the image.php file? Or, do I use the variable name at the end of your string, so something like "image.php?name=$image"?

prodigitalson Over a year ago

You can use the variable, however keep in mind you have to query on the value with mysql so i would recommend using the primary key that is unique as opposed to a field that might have multiple query results.

idigyourpast Over a year ago

Okay, I think I have a valid controller, but the click handler is something I'm still unfamiliar with. As best as I can tell, this should work: $('#$id').click(function() { $("#image-div").html("<img src='get.php?id=$id'>"); }); But it causes my page to throw a 500 error.

karancan · Accepted Answer · 2013-02-18 19:49:15Z

0

For each of the <div id="name">, also add onclick handler like this:

<div onclick="getImage(this.id)" id="name">

Then the getImage() function can have the following:

function getImage(name){
  console.log(id)
  //Now you have the name of the image you need
}

answered Feb 18, 2013 at 19:49

karancan

2,1625 gold badges24 silver badges36 bronze badges

Collectives™ on Stack Overflow

Using PHP and JS to display images in div

Disclaimer: this is for an assignment. I am not asking for explicit code. I only want enough information so that I may understand the task at hand and learn the associative parts.

Edit #1 (11:44am, 2/18/13):

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Disclaimer: this is for an assignment. I am not asking for explicit code. I only want enough information so that I may understand the task at hand and learn the associative parts.

Edit #1 (11:44am, 2/18/13):

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related