need to open bpopup when an image is clicked

Question

I am trying to open the pop-up when an image is clicked, rather than on button click. How could it be done?

Its a gallery kind of thing, where the images are loaded categorically and when clicked on the image, a bpopup show up and the details of the products are shown

I tried that, Please check the fiddle file http://jsfiddle.net/psps/NhRHC/ The problem that I am facing now is it opens up in the first image click, but not in the second image.

HTML

<img id="my-button" src="http://placehold.it/200&text=A">
<img id="my-button" src="http://placehold.it/200&text=B"> 
<!-- Element to pop up -->
<div id="element_to_pop_up">
    <a class="b-close">x<a/>
    Some text
</div>

CSS

#element_to_pop_up { 
    background-color:#fc0;
    border-radius:15px;
    color:#000;
    display:none; 
    padding:20px;
    min-width:400px;
    min-height: 180px;
}
.b-close{
    cursor:pointer;
    position:absolute;
    right:10px;
    top:5px;
}

JS its in that jfiddle link.

Answer 1

Using jQuery, you can do it like this -

$('#div img').click(function(){ $("#popup").bPopup(); });

This statement will make the images in the container element with id "div" open up a bPopup when they are clicked.