Question

I have a problem with an image preview that comes up when you hover over a thumbnail. I can change the distance between the preview and the cursor, but if a thumbnail is close to the side of the window, the preview cant fit and you only see part of it.. hope that makes sense…

is there a way to make it so that if the preview doesnt fit, it will show up on the other side of the cursor?….

Here is the script…

this.imagePreview = function() {
    /* CONFIG */
    xOffset = 10;
    yOffset = 30;
    // these 2 variable determine popup's distance from the cursor
    // you might want to adjust to get the right result
    /* END CONFIG */
    $("a.preview").hover(function(e) {
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='preview'>
  <img src='" + this.href + "' alt='Image preview' />" + c + "</p>");
        $("#preview")
            .css("top", (e.pageY - xOffset) + "px")
            .css("left", (e.pageX + yOffset) + "px")
            .fadeIn("slow");
    },
    function() {
        this.title = this.t;
        $("#preview").remove();
    });
    $("a.preview").mousemove(function(e) {
        $("#preview")
            .css("top", (e.pageY - xOffset) + "px")
            .css("left", (e.pageX + yOffset) + "px");
    });
};
// starting the script on page load
$(document).ready(function() {
    imagePreview();
});

EDIT:
see what i am getting,

http://img202.imageshack.us/img202/4991/browserpreviewf.jpg

my image at the right corner of the page so when i hover the img my preview goes even further right that is besides the page scrollbar half the preview is available…. How to get the preview to the left of the cursor..

Answer 1

I would suggest using a tooltip plugin which does all the dirty positioning work for you. There are dozens available, I will show you how to do it with jQuery Tooltip.

Provided that you have the following markup:

  <ul>
    <li><a href="bigimage.jpg"><img src="preview.jpg" /></a></li>
    <li><a href="big2.jpg"><img src="prev2.jpg" /></a></li>
  </ul>

I think you get the idea (link to big image, preview image is the link). Then you could use the tooltip plugin as follows:

$(document).ready(function() {
    $('img').tooltip({
        bodyHandler: function() {
            return $("<img/>").attr("src", $(this).parent().attr("href"));
        }
    });
});

(It has plenty of options which you all can test at the demo page).

This may need some explanation. Every time a tooltip shall be displayed, the plugin executes the bodyHandler function. We use this function to generate the HTML the tooltip will conatin. So the magic that happens here is, that we extract the big image url from the hyperlink and create a new image with the same src on the fly. This image then gets displayed as the tooltip.

Of course you could generate any (nested) HTML there, including titles, etc, but for the demonstration purpose, this should be enough.

You can check out the result here!

(All sytling you see is pure CSS, so don’t worry, you can adjust this to your requirements)