Get clicked image in clicked function?

[eappell]

I'm trying to figure out how to get the actual image that was clicked (not the option) within the clicked callback. I can see how to get the clicked option, but not the actual image, which I need because I want to run some code on each image as it is clicked... Thanks!

[rvera]

You do this.val(), look at this jsfiddle, hope it helps

http://jsfiddle.net/Km55L/1/

[eappell]

I knew about getting the value of the option, and I do use that. But I am trying to implement the jQuery UI "transfer" effect, and for that I need a reference to the image itself - the DOM object - so I can attach the effect to it. I don't think I can get a reference to the actual "img" object clicked using this.val(), can I?

I guess, barring that, would it be possible to set the id of each image generated using the value of the option so that I could get the reference to the image using the value? (i.e. value = '1234', so img = $('#img1234'))

[sridharraman]

Hi @eappell, I am trying to get the actual image object. Were you able to do it?

[eappell]

@sridharraman No, I was never able to get this to work for me. I ended up using a Kendo UI gallery component for this particular functionality, and it worked well. Still in use today.

[rvera]

@sridharraman once you access your select element with jquery e.g. var select_element = $("#my-select-element") you can simply do select_element.data('picker').picker and it will return the whole ul element for the picker, from there you can access all the images with regular jquery images.

[sridharraman]

@eappell, okay, I managed to do it by getting the selector option objects and getting the data attribute from each of option.

Sample:

$("select option:selected").each ->
  console.log($(this).data("img-src"))

[rvera]

@sridharraman you can also access the picker options programmatically

eg

var select_element = $("#my-select-element")
var picker = select_element.data('picker').picker
// Do a jquery to find all the selected elements
picker.picker.find("thumbnail.selected img")
// Or peek at the internal picker options and check which are selected
picker.picker_options[0].is_selected()

[eappell]

Awesome! Glad this eventually got solved!

[nnsense]

I just wanted to say Thank you @rvera for the jfiddle posted on 22 Apr 2014, I was struggling trying to achieve that, I think that example should be on project's main page!