Проблема с плагином предварительного просмотра изображений Jquery

У меня возникла проблема с предварительным просмотром изображения, который появляется при наведении курсора на миниатюру. Я могу изменить расстояние между превью и курсором, но если миниатюра находится близко к краю окна, превью не помещается, и вы видите только ее часть... надеюсь, это имеет смысл...

есть ли способ сделать так, чтобы, если превью не подходит, оно отображалось по другую сторону курсора?....

Вот сценарий...

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

EDIT: посмотрите, что я получаю,

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

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


preview image jquery thumbnails
person ACP    schedule 07.04.2010    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Я бы посоветовал использовать плагин всплывающей подсказки, который сделает за вас всю грязную работу по позиционированию. Доступны десятки, я покажу вам, как это сделать с подсказка jQuery.

При условии, что у вас есть следующая разметка:

  <ul>
    <li><a href="bigimage.jpg"><img src="preview.jpg" /></a></li>
    <li><a href="big2.jpg"><img src="prev2.jpg" /></a></li>
  </ul>

Я думаю, вы поняли идею (ссылка на большое изображение, изображение для предварительного просмотра — это ссылка). Затем вы можете использовать плагин всплывающей подсказки следующим образом:

$(document).ready(function() {
    $('img').tooltip({
        bodyHandler: function() {
            return $("<img/>").attr("src", $(this).parent().attr("href"));
        }
    });
});

(У него есть множество опций, которые вы все можете протестировать на демонстрационной странице).

Это может потребовать некоторого объяснения. Каждый раз, когда должна отображаться всплывающая подсказка, плагин выполняет функцию bodyHandler. Мы используем эту функцию для создания HTML-кода, который будет содержать всплывающая подсказка. Итак, волшебство, которое происходит здесь, заключается в том, что мы извлекаем URL-адрес большого изображения из гиперссылки и создаем новое изображение с тем же src на лету. Затем это изображение отображается в виде всплывающей подсказки.

Конечно, вы можете сгенерировать там любой (вложенный) HTML, включая заголовки и т. д., но для демонстрационных целей этого должно быть достаточно.

Вы можете проверить результат здесь!

(Все символы, которые вы видите, это чистый CSS, так что не волнуйтесь, вы можете настроить его под свои требования)

person Leo    schedule 13.04.2010

arrow_upward
1
arrow_downward

Приведенный ниже пример НЕ ТОЧНО то, что вы спрашиваете... но он делает что-то подобное...

if(e.pageX <= $(document).width()/2){
    $("#preview")
        .css({"top": (e.pageY - xOffset) + "px",
             "left": (e.pageX + yOffset) + "px",
             "right":""});
}
else{
    $("#preview")
        .css({"top": (e.pageY - xOffset) + "px",
             "right": ($(document).width() - e.pageX + yOffset) + "px",
             "left":""});
}

Если курсор находится в правой части страницы, предварительный просмотр переместится влево. Если курсор находится в левой части страницы, он переместится вправо.

Вам придется немного поиграть с логикой и позиционированием, чтобы все получилось правильно.

person David Murdoch    schedule 13.04.2010

arrow_upward
0
arrow_downward

Вы можете поиграть с шириной окна, используя (например):

window.innerWidth

У вас есть переменная xOffset и ваша e.pageY, чтобы вы могли что-то вывести из этого.

if (e.pageX + xOffset > (window.innerWidth - <somevalue>){....

В сторону: вы хотите сделать это:

e.pageX + yOffset

т.е. добавить и X и Y значения?

person James Wiseman    schedule 07.04.2010

arrow_upward
0
arrow_downward

Вы также можете использовать

screen.availWidth

Свойство для получения ширины области отображения браузера...

Это свойство возвращает ширину за вычетом пространства, занимаемого полосами прокрутки и другими компонентами окна, которые могут присутствовать....

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

person SpikETidE    schedule 10.04.2010