центрирование увеличенного изображения при наведении
Уважаемые гуру javascript, подскажите...
Собственно поставил Easy Image Preview with jQuery - увеличение изображения при наведении. Если изображение где-то у края браузера увеличенного изображения вообще не видно. Как сделать чтобы увеличенное изображение понимало, что если справа места до конца браузера не хватает по появится оно слева. И наоборот. И тоже самое с height. На всякий случай код: this.imagePreview = function(){ /* CONFIG */ xOffset = 0; yOffset = -400; // 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("fast"); }, 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(); }); и CSS: Код:
position: absolute; |
держи, если тебе уже не нужно, то остальным оставляю!
сам мучался часов 3, но в буржунете всётаки нашёл код this.screenshotPreview = function(){ /* CONFIG */ xOffset = 0; yOffset = 0; // these 2 variable determine popup's distance from the cursor // you might want to adjust to get the right result /* END CONFIG */ $("a.screenshot").hover(function(e){ this.t = this.title; this.title = ""; var c = (this.t != "") ? "<br/>" + this.t : ""; $("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>"); var posY; if (e.pageY - $(window).scrollTop() + $('#screenshot').height() >= $(window).height() ) { posY = $(window).height() + $(window).scrollTop() - $('#screenshot').height() - 15; } else { posY = e.pageY - 15; } $("#screenshot") .css("top",(posY) + "px") .css("left",(e.pageX - $('#screenshot').width() - 15) + "px") .fadeIn("fast"); }, function(){ this.title = this.t; $("#screenshot").remove(); }); $("a.screenshot").mousemove(function(e){ var posY; if (e.pageY - $(window).scrollTop() + $('#screenshot').height() >= $(window).height() ) { posY = $(window).height() + $(window).scrollTop() - $('#screenshot').height() - 15; } else { posY = e.pageY - 15; } $("#screenshot") .css("top",(posY) + "px") .css("left",(e.pageX - $('#screenshot').width() - 15) + "px"); }); }; // starting the script on page load $(document).ready(function(){ screenshotPreview(); }); |
Часовой пояс GMT +3, время: 19:32. |