title: Jquery plugin that can crop external images
body: <p>I am trying to crop Lazyload image to correct size. I have simple jquery plugin given below that can resize and crop the image to correct size by tweaking the image url. This jQuery code automatically crop the image to the correct size after Lazyload plugin load images. But it's not able to crop all images, it crop only one from all images.</p>
  
  <p><em>Fiddle</em>: <a href="http://jsfiddle.net/e0myc0po/4/" rel="nofollow">http://jsfiddle.net/e0myc0po/4/</a> <br/>
  <em>See that it has cropped only image no 3 !</em></p>
  
  <p><strong>JS:</strong></p>
  
  <p><em>External Resources</em>: <a href="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyloadxt/1.0.5/jquery.lazyloadxt.js" rel="nofollow">https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyloadxt/1.0.5/jquery.lazyloadxt.js</a></p>
  
  <pre><code>$.extend($.lazyLoadXT, {
      onload:myfunc
  });
  
  function myfunc(){
      var w = 200;
  var h = 150;
  $('#crop').find('img').each(function(n, image){
    var image = $(image);
    image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + w + '-h' + h +'-c')});
    image.attr('width',w);
    image.attr('height',h);
   });
  }
  
  function myfunc(){
      var w = 200;
  var h = 150;
  $('#another-crop').find('img').each(function(n, image){
    var image = $(image);
    image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + w + '-h' + h +'-c')});
    image.attr('width',w);
    image.attr('height',h);
   });
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>1
  &lt;div id="crop"&gt;
  &lt;img data-src=""/&gt;
  &lt;/div&gt;
  &lt;br/&gt;
  2
  &lt;div id="crop"&gt;
  &lt;img data-src=""/&gt;
  &lt;/div&gt;
  &lt;br/&gt;
  3
  &lt;div id="another-crop"&gt;
  &lt;img data-src=""/&gt;
  &lt;/div&gt;
  &lt;br/&gt;
  4
  &lt;div id="another-crop"&gt;
  &lt;img data-src=""/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So my question is why it's not crop all images and what is the solution is?<br/>
  Thanks.</p>