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

Question

Я использую этот «плагин», найденный в сети, для предварительного просмотра некоторых изображений на сайте php / linux.

<script type="text/javascript">
function pimg()
{
    this.xOffset = 5;
    this.yOffset = 50;
    $("a.pimg").hover(function (e)
    {
        this.img_title = this.title;
        this.title = "";
        var img_src = $(this).attr('img_src');
        var desc = (this.img_title != "") ? "<h3>" + this.img_title + "</h3>" : "";
        var image = (img_src) ? img_src : this.src;
        $("body").append("<div id='pimg'><img src='" + image + "' alt='Image preview' />" + desc + "</div>");
        $("#pimg").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
        $("#pimg").fadeIn(700);
    }, function ()
    {
        this.title = this.img_title;
        $("#pimg").remove();
    });
    $("a.pimg").mousemove(function (e)
    {
        $("#pimg").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
    });
};
$(document).ready(function($){
    pimg();
}) 
</script>

<div class="images">
                  <a href="#" img_src='<?=TF?>/img/design/testimonials/Tuscg.png' class="pimg">View Testimonial</a>
            </div>

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

Спасибо!

Answer 1

Ваш код в порядке.Вам просто нужно добавить это в ваши стили CSS ( DEMO )

#pimg{position:absolute;display:none;}

Кроме того, вам просто нужно изменить этот код в соответствии с желаемыми координатами x / y, которые вы хотите.

$("#pimg").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");

Answer 2

Посмотрите на эту обновленную скрипку: http://jsfiddle.net/Wp6bG/1/

В примере (модифицированном на основе оригинальной скрипки Dutchie432), если вы измените ширину экрана, предварительный просмотр будет переключаться справа налево, если предварительный просмотр выходит за пределы экрана. Вы можете изменить код для обработки всех остальных краев экрана (вверху / слева / внизу).