title: How to change the CSS after image lazy loading (jQuery)?
body: <p>I've got the following problem: after the user clicks on a thumbnail image, a bigger image is loaded with lazy loading and opens up. The code to load the bigger image is:</p>
  
  <pre><code>&lt;img width="663" height="845" class="big" data-original="real/path/to/image" src="path/to/empty/small/picture"&gt;
  </code></pre>
  
  <p>When the user clicks on a thumbnail image, the following code is executed:</p>
  
  <pre><code>$("img.thumb").click(function() 
   {      
      var $cont = $(this).siblings('.item-content').children('.big'); 
      $cont.attr('src', $cont.attr("data-original"));
      setTimeout(function(){
          $cont.css({'height': 'auto', 'width': '100%'});
      }, 600);
   });
  </code></pre>
  
  <p>Each big image has to have the CSS <code>"height"</code> set to <code>"auto"</code>, and the <code>"width"</code> set to <code>"100%"</code> because I am making a responsive/fluid layout. The above code gets its <code>"src"</code> attribute value from the <code>"data-original"</code> attribute. But <code>"height: auto"</code> and <code>"width:100%"</code> are set in this example to <code>600ms</code> after the attributes do their replacing. This doesn't work, because I am using Isotope jQuery plugin (<a href="http://isotope.metafizzy.co/" rel="nofollow">http://isotope.metafizzy.co/</a>) for this and this plugin needs the real width and height of the element to position the grid properly. When <code>"height: auto"</code> and <code>"width:100%"</code> are set during the loading of an image, the plugin gets lost and makes positions the elements incorrectly. </p>
  
  <p>So how do code this to set those 2 CSS properties after the image has loaded?</p>