在Greasemonkey脚本中制作跨接图像弹出窗口时出现的问题 [英] Issues making a flyover image popup in a Greasemonkey script

问题描述

我开始编写Greasemonkey脚本作为学习JavaScript的开始.该脚本的作用只是将鼠标指针悬停在缩略图上(如果将该图片放大到弹出窗口).

I started writing a Greasemonkey script as a start for learning JavaScript. What the script does is simply when you hover your mouse pointer over a thumbnail image, if enlarges that picture to a popup window.

我快完成了.但是有一些障碍...

And I'm almost done. But there's a few snags...

1. 当mouseenter事件触发时，它会产生一个弹出窗口，并且它也会在网页本身中加载该图像！我认为，这样也阻止了它执行mouseleave部分.

1. when the mouseenter event fires, it spawns a popup and it also loads that same image in the webpage itself! Thus preventing it from executing the mouseleave part too, I think.

如何根据加载图像的特定尺寸动态设置弹出窗口的宽度和高度?

How do I set the width and the height of the popup dynamically according to the particular measurements of the loading image?

在"/thumbs/75x60/"部分，我想使用*通配符替换"75x60"(如* x *)，以便缩略图图片的任何大小都会受到影响.我该怎么办?

In the '/thumbs/75x60/' part, I want to use the * wildcard to replace '75x60' (as in * x * ) so that any size of thumbnail pic would be affected. How do I do that?

请参见 http://jsfiddle.net/JWcB7/6/

HTML类似于:

<div id="profPhotos">
    <a class="profPhotoLink" href="...">
        <img width="95" height="130" src=".../thumbs/163x130/8f/fd/588x800_1319044306_9223981.jpg">
    </a>
    <br>
    <a class="profPhotoLink" href="...">
        <img width="75" height="60" src=".../thumbs/75x60/f0/d9/604x453_1319044306_9254715.jpg">
    </a>
    ... ...
</div>

JS是:

$('#profPhotos .profPhotoLink > img').bind
(
    "mouseenter mouseleave", myImageHover
);

function myImageHover (zEvent)
{
    if (zEvent.type == 'mouseenter')
    {
        var imgurl = this.src.toString();
        //need to replace '/thumbs/75x60/' part with '/photos/' to get the full size image
        var bigimg = imgurl.replace("/thumbs/75x60/", "/photos/");  
        window.location.href = bigimg;
        popup = window.open(bigimg,"popwindow","menubar=0,resizable=0,status=0,titlebar=0,toolbar=0,scrollbars=0,location=0,width=600,height=800") //how to set the width and the height dynamically
    }
    else
    {
        popup.close();
    }
}

推荐答案

如果您也不想将图像加载到同一页面中，请不要这样做！ :

If you don't want the image to load in the same page as well don't do this! :

window.location.href = bigimg;

还是您希望图像以某种方式出现在弹出窗口中?

Or did you want the image there somehow as well as the popup?

~~~
至于通配符替换，这很容易.更改:

~~~
As for the wildcard replace, that's easy. Change:

var bigimg = imgurl.replace("/thumbs/75x60/", "/photos/");

收件人:

var bigimg = imgurl.replace(/\/thumbs\/[0-9x]+\//i, "/photos/");  

~~~
调整弹出窗口的大小变得棘手，您真的要在鼠标悬停时使用 弹出窗口 吗?立交桥会更大吗?

~~~
Resizing the popup gets tricky Do you really want a popup on mouseover!!? Would a flyover larger image do?

我不建议使用实际的弹出窗口(window.open())来显示大图像.由于安全阻止和跨站点限制，这可能是正确的选择.但是使用Greasemonkey是可能的.

I do not recommend using an actual popup (window.open()) to show the large images. Because of security blocking and cross-site restrictions, this can be a right pain. But it's possible with Greasemonkey.

相反，我建议您在伪弹出对话框中显示图像.为此，插入一个position: absolute;且z-index高的<div>.

Instead, I recommend you show the image in a pseudo-popup dialog. Do this by inserting a <div> that's position: absolute; and has a high z-index.

然后，mouseenter事件将更改div中图像的src.

The mouseenter event would then change the src of the image inside the div.

将所有内容放在一起，下面是一个完整的Greasemonkey脚本，该脚本可在鼠标悬停时生成简单的弹出图像:

Putting it all together, here is a complete Greasemonkey script that generates simple popup images on mouseover:

您可以在jsBin上查看正在运行的代码.

// ==UserScript==
// @name    _Popup Image Flyover, Mark I
// @include http://YOUR_SERVER/YOUR_PATH/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
// ==/UserScript==

/*--- Create the div and the image that will be pointed to our large
    pictures.
*/
$("body").append ('<div id="idLargePicturePopupWindow"><img></div>');

/*--- In case the popup covers the current mouse position, it must also
    trigger the hover change.  This avoids certain annoying blinking
    scenarios.
*/
$('#idLargePicturePopupWindow').bind (
    "mouseenter mouseleave",
    {bInPopup: true},
    myImageHover
);

/*--- Activate the mouseover on the desired images on the target page.
*/
$('#profPhotos .profPhotoLink > img').bind (
    "mouseenter mouseleave",
    {bInPopup: false},
    myImageHover
);

function myImageHover (zEvent) {
    if (zEvent.type == 'mouseenter') {

        if ( ! zEvent.data.bInPopup) {

            var imgurl = this.src.toString();
            /*--- Need to replace '/thumbs/75x60/' part with '/photos/'
                to get the full size image.
            */
            var bigimg = imgurl.replace(/\/thumbs\/[0-9x]+\//i, "/photos/");

            $("#idLargePicturePopupWindow img").attr ('src', bigimg);
        }

        $("#idLargePicturePopupWindow").show ();
    }
    else {
        $("#idLargePicturePopupWindow").hide ();
    }
}


/*--- Here we add the CSS styles that make this approach work.
*/
GM_addStyle ( (<><![CDATA[
    #idLargePicturePopupWindow {
        position:               absolute;
        background:             white;
        border:                 3px double blue;
        margin:                 1ex;
        opacity:                1.0;
        z-index:                1222;
        min-height:             100px;
        min-width:              200px;
        padding:                0;
        display:                none;
        top:                    10em;
        left:                   10em;
    }
    #idLargePicturePopupWindow img {
        margin:                 0;
        margin-bottom:          -4px;
        padding:                0;
    }
]]></>).toString () );

这篇关于在Greasemonkey脚本中制作跨接图像弹出窗口时出现的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！