CODEWITHSUNDEEP
phpjqueryhtmlimagemobile
Orion
Orion

Reputation: 227

Get the value of the selected image

Currently I'm working on a mobile version of an article publishing application. I want to let the user search for their image like you are searching through images on Google Images(Fill in the keywords, click an image, swipe back and forth between images)

The user can select their keyword(s) and after that an selection of images will be shown(like a gallery/slideshow). When they swipe through these images and stop at an particular image I would like to know that current ID value (that is coming from the database). I am not getting any information if I use the 'value' field in an <img> tag or an <input type='image' /> tag furthermore I can't think of any other solution at the moment.

This sounds a bit abstract, although I still hope that someone can give me a suggestion

EDIT:

For example, when I'm only trying it with 1 image I have these 2 possibilities:

$sql = "SELECT *
                  FROM picture
                  WHERE picture_id = :picture";

$con->query($sql);
$con->bind(":picture", $picture_id);
$con->execute();

$record = $con->getRow();

echo "<input type='image' name='image' value=".$record["picture_id"]." src=\"http://www.mysite.com/img/".$record['picture_directory'].$record['picture_name']."\" />";

or when I use:

echo "<img name=\"image\" src=\"http://www.mysite.com/img/".$record['picture_directory'].$record['picture_name']."\" alt=\"Smiley face\" value=". $record["picture_id"]. " height='42' width='42'>";

When I submit the form to the next page, I am not getting the value of the 'name' attribute

Upvotes: 0

Views: 5861

Answers (3)

Bill Criswell
Bill Criswell

Reputation: 32921

Why not use a hidden input and a regular image tag? Just make sure it's inside the form.

<input type="hidden" name="picture_id" value="<?php echo $record["picture_id"] ?>">

A few things, just adding a value attribute to an HTML element won't make it behave like an input. Also, using a value on an input type image just doesn't work. You will have the X and Y of where the image would have been clicked associated with the input's name (I believe).

Upvotes: 0

0x_Anakin
0x_Anakin

Reputation: 3269

What you could do is use html5 data attributes. In your php code generate your images similar to this:

foreach($images as $key => $img){
   echo '<img src="'.$img['path'].'" data-image-id="'.$img['image_id'].'">'
}

or even use the elements default id attribute

foreach($images as $key => $img){
   echo '<img src="'.$img['path'].'" id="img'.$img['image_id'].'">'
}

Eitherway what you should do next is when the user stops sliding / swiping check the images position offset relative to the container to get the id of the current image. Or depending on your slider keep track of the current image index being shown.

These might come handy:

jquery .offset() http://api.jquery.com/offset/

jquery .position() http://api.jquery.com/position/

Upvotes: 0

Milanzor
Milanzor

Reputation: 1930

You could use a data attribute:

<img src="example.png" data-picture_id="'.$record['picture_id'].'" />

and fill a hidden input field as soon as the user clicks the image:

<input type="hidden" name="selected_image" value="" />

//Bind click to images that have the data-picture_id attribute:
$("img[data-picture_id]").click(function(e){

  //Set the value of the hidden input field
  $("input[name='selected_image']").val($(this).data('picture_id'));
});

this way, you can use $_POST['selected_image'] to get the selected image's ID.

Upvotes: 2

Related Questions