Проблемы, вызывающие появление всплывающего изображения в скрипте Greasemonkey - PullRequest
Новая
       9

Проблемы, вызывающие появление всплывающего изображения в скрипте Greasemonkey

1 голос
/ 09 декабря 2011

Я начал писать скрипт Greasemonkey для начала изучения JavaScript.Сценарий работает просто, когда вы наводите указатель мыши на миниатюру изображения, если увеличиваете его до всплывающего окна.

И я почти закончил.Но есть несколько ошибок ...

  1. , когда происходит событие mouseenter, оно порождает всплывающее окно и также загружает то же изображение на самой веб-странице!Таким образом, я думаю, что это мешает исполнению части mouseleave.

  2. Как динамически установить ширину и высоту всплывающего окна в соответствии с конкретными измерениями загружаемого изображения?

  3. В части '/ thumbs / 75x60 /' я хочу использовать подстановочный знак * для замены '75x60' (как в * x *), чтобы любой размер миниатюрного изображения былподвержен влиянию.Как мне это сделать?

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

1 Ответ

1 голос
/ 10 декабря 2011

Если вы не хотите, чтобы изображение загружалось на той же странице, не делайте этого! : 

window.location.href = bigimg;

Или вы хотели, чтобы изображение там было так же, как и всплывающее окно?

*

~~~ * 1006 Что касается замены подстановочного знака, это легко. Изменения: 

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

Кому: 

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


~~~
Изменение размера всплывающего окна становится сложным Вы действительно хотите всплывающее окно при наведении курсора мыши? Подойдет ли увеличенное изображение эстакады?

Я не рекомендую использовать фактическое всплывающее окно (window.open()) для отображения больших изображений. Из-за блокировок безопасности и межсайтовых ограничений это может быть очень проблематично. Но это возможно с Greasemonkey.

Вместо этого я рекомендую вам показать изображение в псевдо-всплывающем диалоге. Сделайте это, вставив <div>, то есть position: absolute; и имеет высокий z-index.

Событие mouseenter тогда изменит src изображения внутри div.

Собираем все вместе, вот полный скрипт Greasemonkey, который генерирует простые всплывающие изображения при наведении мыши:

Вы можете увидеть код в действии на 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 () );
...