Issues making a flyover image popup in a Greasemonkey script

Question

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

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

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

See http://jsfiddle.net/JWcB7/6/

The HTML is like:

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

The JS is:

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

Answer 1

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/");

To:

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?

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.

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.

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

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

You can see the code in action at 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 () );