0
php/linux 웹 사이트에서 일부 이미지를 미리보기 위해 "플러그인"을 사용하고 있습니다. 내가 원하는 무엇Jquery Image preview plugin
<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>
는 링크가 브라우저 창 오른쪽 하단에 같은 이미지 미리보기가 경우에 (그것을 위해 새로운 공간을 만들 보이는 브라우저 창 안에 표시하지 수 있도록하는 것입니다). 나는 포지셔닝과 함께 플레이해야한다는 것을 알고 있지만, 어떻게하면 이미지가 브라우저 윈도우의 현재 가시적 인 컨텐트에서만 나타날 수 있도록 dinamically 할 수 있습니다.
감사합니다.
내가 필요한 것은 px 또는 %에서 #pimg에 올바른 값을 지정하여 미리보기 이미지가 나타나도록하는 예제입니다 브라우저 창에서 볼 수있는 영역에서만, 창을 확장하거나 볼 수있는 영역 밖에서는 사용할 수 없습니다. –
왜 jquery를 체크하지 않는 것이 좋을까요? div의 경계와 창의 경계를 확인하십시오. position(). top','$ ("#pimg"), $ (window) .width(), $ (window) .position(). left','$ ("# pimg"). width()','$ ("# pimg"). – Dutchie432