title: Jquery Image preview plugin
body: <p>I`m using this "plugin" found on web to preview some images in a php/linux website. </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function pimg()
  {
      this.xOffset = 5;
      this.yOffset = 50;
      $("a.pimg").hover(function (e)
      {
          this.img_title = this.title;
          this.title = "";
          var img_src = $(this).attr('img_src');
          var desc = (this.img_title != "") ? "&lt;h3&gt;" + this.img_title + "&lt;/h3&gt;" : "";
          var image = (img_src) ? img_src : this.src;
          $("body").append("&lt;div id='pimg'&gt;&lt;img src='" + image + "' alt='Image preview' /&gt;" + desc + "&lt;/div&gt;");
          $("#pimg").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
          $("#pimg").fadeIn(700);
      }, function ()
      {
          this.title = this.img_title;
          $("#pimg").remove();
      });
      $("a.pimg").mousemove(function (e)
      {
          $("#pimg").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
      });
  };
  $(document).ready(function($){
      pimg();
  }) 
  &lt;/script&gt;
  </code></pre>
  
              
  
  <pre><code>&lt;div class="images"&gt;
                    &lt;a href="#" img_src='&lt;?=TF?&gt;/img/design/testimonials/Tuscg.png' class="pimg"&gt;View Testimonial&lt;/a&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>What I want is to make the image preview to appear inside the visible browser window and not create new space for it ( in cases like the link is in the right bottom of the browser window ). I know I have to play with the positioning, but how can do it dinamically so that the image will appear only in the current viewable content of the browser window.</p>
  
  <p>Thanks!</p>