How can I catch on-click event on an iron-image?

700 views
Skip to first unread message

Escobita

unread,
Aug 7, 2015, 6:46:06 PM8/7/15
to Polymer
Hi!,

I am creating an image gallery and I am using Polymer 1.0. How can I catch on-click event on an iron-image?. My code looks like this:
  <iron-image class="card" style="background-color: lightgray;"
        preload src$="{{getImagePath(item.gsx$filename.$t)}}"></iron-image>

 I really appreciate your help, 

aurelien

unread,
Aug 10, 2015, 2:27:01 PM8/10/15
to Polymer
Hello Escobita,

Can you share please a bit more about that integrate in a page?

Thanks! 


AD

Kelly St. John

unread,
Aug 10, 2015, 9:05:00 PM8/10/15
to Polymer
Not to hijack this thread, but she is likely having a similar issue to me (only instead of iron-image, my question is about an iron-list item (ok...so maybe a touch more complex due to dynamic template nature of list item creation?) 

Maybe two birds with one stone here?  If so, here is my full description:  http://stackoverflow.com/questions/31888111/tap-listener-for-polymer-iron-list-item

Cheers,
Kelly
Message has been deleted

Escobita

unread,
Aug 11, 2015, 1:46:27 PM8/11/15
to Polymer
Hi aurelien and Kelly St. Jhon,

I solved my problem changing a compatibility issue I had.  Compatibility note: The syntax differs from 0.5, which required curly brackets ({{}}) around the event handler name.
Now my code looks like this:

  <img class="card"
          style="background-color: lightgray;"
          preload src$="{{getImagePath(item.gsx$filename.$t)}}"
          on-click="onCardClick">

Polymer({
  is:"my-portfolio",
 ...
  },
  onCardClick: function(){
      console.log("Card Clicked:");
  },
  ready: function() {
    }
});




aurelien

unread,
Aug 11, 2015, 5:40:43 PM8/11/15
to Polymer
Thanks for the sharing, I will try to integrate some to a website :-)


AD 

ling...@gmail.com

unread,
Jan 23, 2016, 4:58:12 AM1/23/16
to Polymer
It does not work for me. Can anyone help?
My code:
<paper-card xheading="[[product.name]]" ximage="[[product.url]]" elevation="1">
  <img src$="{{product.url}}" class="product-image" on-click="{{_onCardClick}}"></img>
  <div class="card-content">
...

_onCardClick: function(){
     console.log('Click image event triggered.');  
   }

Rob Dodson

unread,
Jan 24, 2016, 1:24:05 PM1/24/16
to ling...@gmail.com, Polymer
declarative event handlers don't use {{ }}, it should be on-click="_onCardClick"

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/e963b400-9960-4981-afef-2782428d4604%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Reply all
Reply to author
Forward
0 new messages