Search code examples
jqueryflickr

Change image source by text detection

I'm currently developping a graphic overlay application that shows Flickr content.

I want to replace images from users who have opted-out.

My html structure is as follow:

<ul>
  <li>
    <div class="imgbk">
      <img src='http://farm6.static.flickr.com/5312/7057785005_2966a34f1f.jpg'/>
      <a href='http://www.flickr.com/photos/85152114@N00/7057785005'>Link</a>
    </div>
  </li>
</ul>

The string to be tested in this example is 85152114@N00 located in the href.

The href structure is always the same: flickr.com / photos / userID / ImageID

Until now, this was done server side, but huge traffic on my website forced me to do this client side. My jQuery knowledge is limited so I'm asking for help!

Solution

  • Thanks guys, Here is my new code based on your answers:

    var OptOutArray = ["85152114@N00", "00000000@N00"];

$('img').each(function() {
  var matches = $(this).next().attr("href").split('/')[4];
  if ($.inArray(matches, OptOutArray) > -1) {
    $(this).attr("src", "http://core.flickeflu.com/doh.gif");
  }
});​

    Example here : http://jsfiddle.net/jgYs8/