title: Load image with jQuery and append it to the DOM
body: <p>I'm trying to load an image from a given link </p>
  
  <p><code>var imgPath = $(imgLink).attr('href');</code></p>
  
  <p>and append it to the page, so I can <strong>insert it into a given element</strong> for an image viewer. 
  Even though I searched <em>Stackoverflow</em> and the <em>jQuery</em> docs without end, I can't figure it out.</p>
  
  <p>After I load the image, I want to set <strong>different values to it, like width, height</strong>, etc.</p>
  
  <p><strong>Update:</strong></p>
  
  <p>This is what I got. The problem I'm having is that I can't run jQuery functions on the <code>img</code> element.</p>
  
  <pre><code>function imagePostition(imgLink) {
  
  // Load the image we want to display from the given &lt;a&gt; link       
  // Load the image path form the link
  var imgPath = $(imgLink).attr('href');
  
  // Add image to html
  $('&lt;img src="'+ imgPath +'" class="original"&gt;').load(function() {
  
      $(imgLink).append(this);
  
      var img = this;
  
      // Resize the image to the window width
      // http://stackoverflow.com/questions/1143517/jquery-resizing-image
  
      var maxWidth = $(window).width();       // window width
      var maxHeight = $(window).height();     // window height
      var imgWidth = img.width;               // image width
      var imgHeight = img.height;             // image height
      var ratio = 0;                          // resize ration
      var topPosition = 0;                    // top image position
      var leftPostition = 0;                  // left image postiton
  
      // calculate image dimension
  
      if (imgWidth &gt; maxWidth) {
          ratio = imgHeight / imgWidth;
          imgWidth = maxWidth;
          imgHeight = (maxWidth * ratio);
      }
      else if (imgHeight &gt; maxHeight) {
          ratio = imgWidth / imgHeight;
          imgWidth = (maxHeight * ratio);
          imgHeight = maxHeight;
      }
  
      // calculate image position
  
      // check if the window is larger than the image
      // y position
      if(maxHeight &gt; imgHeight) {
          topPosition = (maxHeight / 2) - (imgHeight / 2);
      }
      // x position
      if(maxWidth &gt; imgWidth) {
          leftPostition = (maxWidth / 2) - (imgWidth / 2);
      }
  
      $(imgLink).append(img);
  
      // Set absolute image position
      img.css("top", topPosition);
      img.css("left", leftPostition);
  
      // Set image width and height
      img.attr('width', imgWidth);
      img.attr('height', imgHeight);  
  
      // Add backdrop
      $('body').prepend('&lt;div id="backdrop"&gt;&lt;/div&gt;');
  
      // Set backdrop size
      $("#backdrop").css("width", maxWidth);
      $("#backdrop").css("height", maxHeight);
  
      // reveal image
      img.animate({opacity: 1}, 100)
      img.show()
  
  });
  
  };
  </code></pre>