title: dynamically assign with jquery css top and left for an image thumb
body: <p>i have a list of images displayed like this:</p>
  
  <pre><code>&lt;div id="imgContainer"&gt;
      &lt;ul id="thumbs"&gt;
          &lt;li class="trns"&gt;
              &lt;a class="magnify" href='/uploads/{{ item.pic1 }}' target="_blank"&gt;&lt;img class="thumb" src='/uploads/{{ item.pic1 }}'/&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="trns"&gt;
              &lt;a class="magnify" href='/uploads/{{ item.pic2 }}' target="_blank"&gt;&lt;img class="thumb" src='/uploads/{{ item.pic2 }}'/&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="trns"&gt;
              &lt;a class="magnify" href='/uploads/{{ item.pic3}}' target="_blank"&gt;&lt;img class="thumb" src='/uploads/{{ item.pic3 }}'/&gt;&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>i want to dynamically assign minus top and left values to half of the height and width, respectively so my thumbs will contain exactly the middle of the image</p>
  
  <p>something like this (of course it doesnt work)</p>
  
  <pre><code>$("#imgContainer").find("img.thumb").css({"top":"-"+this.height/2,"left":"-"+this.width/2"});
  </code></pre>
  
  <p>how can i do that?</p>
  
  <p>thanks</p>
  
  <hr>