Issues Making A Flyover Image Popup In A Greasemonkey Script

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 tha

Solution 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
);

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