Jquery Image preview plugin

Question

I`m using this "plugin" found on web to preview some images in a php/linux website.

<script type="text/javascript">
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 != "") ? "<h3>" + this.img_title + "</h3>" : "";
        var image = (img_src) ? img_src : this.src;
        $("body").append("<div id='pimg'><img src='" + image + "' alt='Image preview' />" + desc + "</div>");
        $("#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();
}) 
</script>

<div class="images">
                  <a href="#" img_src='<?=TF?>/img/design/testimonials/Tuscg.png' class="pimg">View Testimonial</a>
            </div>

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.

Thanks!

Answer 1

Your code is fine. You just need to add this to your CSS styles ( DEMO )

#pimg{position:absolute;display:none;}

Aside from that, you'll just need to modify this code to the correct x/y coordinates you desire.

$("#pimg").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");

Answer 2

Take a look at this updated fiddle: http://jsfiddle.net/Wp6bG/1/

In the example (modifed based on Dutchie432's original fiddle), if you resize the width of the screen, the preview will switch from right to left if the preview goes offscreen. You can modify the code to handle all other screen edges (top/left/bottom.)