javascript 이미지 미리보기

이미지 미리보기, 어떻게 보면 간단한것인데 무조건 한쪽 방향에만 나오게 한다면 

윈도우 사이즈에 따라 상하 좌우가 포지션이 잘못잡혀 사진이 안보이게 된다.

이때 마우스 포인터위치를 잡아서 미리보기 섹션이 어디로 보여질지 판단하면 된다.

 

#preview {

     z-index: 99999;

     position:absolute;

     border:0px solid #ccc;

     background:#333;

     padding:1px;

     display:none;

     color:#fff;

}



this.imagePreview = function(){ 

 /* CONFIG */

 xOffset = 10;

 yOffset = 30;



 /* END CONFIG */

 $(".img_thumb").hover(function(e){

 this.t = this.title;

 this.title = ""; 

 var c = (this.t != "") ? "<br/>" + this.t : "";

 $("body").append("<p id='preview' style='position:absolute;z-index:99999'><img src='"+this.src+"' 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();

    }); 

 $(".img_thumb").mousemove(function(e){

 $("#preview")

 .css("top",(e.pageY - xOffset) + "px")

 .css("left",(e.pageX + yOffset) + "px");

 }); 



};