Jquery image preview plugin issue...

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

You can play around with the windows width using (for example):

window.innerWidth

You have an xOffset variable, and your e.pageY so you could infer something from this.

if (e.pageX + xOffset > (window.innerWidth - <somevalue>){....

Aside: do you mean to do this:

e.pageX + yOffset

I.e. add and X and Y values?

Answer 2

You can also use the

screen.availWidth

Property to get the browser's display area width...

This property returns the width minus the space taken up by scrollbars and other windows component that my be present....

And from the top of my head.... While setting the position of the preview instead of setting top and left, can you try setting for top and right when the calculated position of the tool tip is greater than the window's width..?

Answer 3

The example below isn't EXACTLY what you are asking...but it does something similar...

if(e.pageX <= $(document).width()/2){
    $("#preview")
        .css({"top": (e.pageY - xOffset) + "px",
             "left": (e.pageX + yOffset) + "px",
             "right":""});
}
else{
    $("#preview")
        .css({"top": (e.pageY - xOffset) + "px",
             "right": ($(document).width() - e.pageX + yOffset) + "px",
             "left":""});
}

If the cursor is on the right side of the page the preview will go left. If the cursor is on the left side of the page it will go right.

You will have to play with the logic and positioning a bit to get it right.

Answer 4

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)