I Have a list of images that is displayed in the html from the server using PHP code

Here is the PHP code that is inside a div:

while($row = $result->fetch_assoc()) {
    echo "<div class='col-lg-3 col-md-4 col-xs-6 thumb'><a class='thumbnail' href='#'><img id='template" . $row["imageName"]. "' class='img-responsive' src='../images/templates/" . $row["imageName"].".". $row["imageExtension"]."' alt='error' width='333px' height='262px' class='img-thumbnail' onClick='changeImage()'></a></div>";
}

The PHP code loops every image in the server and creates another div and inside it is the img.

Now, my problem is how can I identify the specific image clicked? I could not use the document.getElementById(''); because in the first place I don't know the ID right? Although I made each of them unique IDs by adding the id='template" . $row["imageName"]. "' which means the supposed ID of each image is template[x] where x is the image name from the database.

I am struggling how I can identify the specific image that has been clicked by the user.

Is there any way I can identify the image?

I Have a list of images that is displayed in the html from the server using PHP code

Here is the PHP code that is inside a div:

while($row = $result->fetch_assoc()) {
    echo "<div class='col-lg-3 col-md-4 col-xs-6 thumb'><a class='thumbnail' href='#'><img id='template" . $row["imageName"]. "' class='img-responsive' src='../images/templates/" . $row["imageName"].".". $row["imageExtension"]."' alt='error' width='333px' height='262px' class='img-thumbnail' onClick='changeImage()'></a></div>";
}

The PHP code loops every image in the server and creates another div and inside it is the img.

Now, my problem is how can I identify the specific image clicked? I could not use the document.getElementById(''); because in the first place I don't know the ID right? Although I made each of them unique IDs by adding the id='template" . $row["imageName"]. "' which means the supposed ID of each image is template[x] where x is the image name from the database.

I am struggling how I can identify the specific image that has been clicked by the user.

Is there any way I can identify the image?

• javascript
• php
• jquery
• html
• twitter-bootstrap

5 Answers 5

Do this:

$("img").click(function(){
   alert("Image ID is: " + $(this).attr("id"));
});

This will show the ID of the image u clicked in a pop-up.

Basically the above code waits for a click on any img element on the page.

Once an img is clicked, u simply retrieve the 'id' attribute of the clicked element which can be referred to by $(this), and hence display it in an alert box.

If the images are loaded into the page via AJAX or some kind of dynamic method, you may need to use $(document).on(). Use the ".img-responsive" selector to select all images with class="img-responsive" for your page.

$(document).on("click", ".img-responsive", function() {
    alert("Image ID is: " + $(this).attr("id"));
}

jQuery:

$('.divclass img').click(function() {
   console.log('Clicked image ID ' + $(this).attr('id'));
});

.divclass img because (or ID as #divid img if you wish) I guess it would be more efficient to target images only in that specific div, and not in the whole document.

You can also execute other JavaScript functions, passing the ID of the image as a parameter, or even the whole element, for example:

someFunction($(this)); // Transfer the whole element as an argument.

or

someFunction($(this).attr('id')); // Transfer just the ID as an argument.

And the function itself:

function someFunction(image) {
    // Do some things with the image.
}

Best of luck!

$('.img-responsive').on('click',function(){
    $(this).attr("id");
});

It will create click listener for all images and we want to track for specific images only, images which has img-responsive class and once it got clicked we can easily access it using this

$("img").click(function(event){
   alert("Image ID is: " + event.target.id);
});

Demo Fiddle

event.target : The event.target property returns which DOM element triggered the event.The event parameter es from the event binding function.