Jquery图像预览插件问题 [英] Jquery image preview plugin issue

问题描述

当您将鼠标悬停在a上时出现图片预览时出现问题缩略图。我可以更改预览和光标之间的距离，但如果缩略图靠近窗口的一侧，预览不适合，你只能看到它的一部分..希望有意义......

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();
});

编辑：
看看我得到了什么，

see what i am getting,

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

我的图片位于页面的右下角所以当我将鼠标悬停在img时，我的预览更加正确这是除了页面滚动条的一半预览可用....如何获得光标左侧的预览..

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..

推荐答案

我建议使用工具提示插件来完成所有脏定位工作。有数十种可用，我将向您展示如何使用它 jQuery Tooltip 。

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.

如果您有以下标记：

  <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).

这可能需要一些解释。每次显示工具提示时，插件都会执行 bodyHandler 函数。我们使用此函数生成工具提示将符合的HTML。因此，这里发生的神奇之处在于，我们从超链接中提取大图像网址，并在运行中创建具有相同src的新图像。然后该图像显示为工具提示。

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.

当然，您可以在那里生成任何（嵌套）HTML，包括标题等，但出于演示目的，这应该是足够。

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

您可以查看结果这里！

（你看到的所有sytling都是纯CSS，所以不用担心，你可以根据自己的要求进行调整）

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)

这篇关于Jquery图像预览插件问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！