테스트 사이트 - 개발 중인 베타 버전입니다

마우스오버시 이미지 미리보기 질문이요~

· 14년 전 · 4212
아래소스는 이미지에 마우스오버하면 이미지미리보기 구현중인데요..
이미지첨부파일출력부분에서 얻은 이미지파일 경로를 가져다가 미리보기에 뿌렸는데요
PHP소스에서 jquery로 뿌리는 가운데에 뭔가 잘못되엇는지..
미리보기가 안나옴니다..뭐가잘못되었는지 부탁드립니다..왠종일해도 안되네요..ㅜㅠ

// lib 파일
function get_it_image($img, $width=0, $height=0, $id=""){
global $cfg, $cart_dir;
$str = get_image("data/item/$img", $width, $height);
if ($id) {
$str = "<a href='./?doc=$cart_dir/item.php&it_id=$id' class='preview' title=''>$str</a>";
}
return $str;
}
//php 파일
<script src="jquery.js" type="text/javascript"></script>
<style>
a{text-decoration:none;color:#f30;}
img{border:none;}

/* */
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
</style>
<?
// 첨부파일 출력
$data_path = $g4['path']."/data/file/$bo_table";

for ($i=0; $i<=count($view[file]); $i++) {
$file_view = $view[file][$i][file];
$file = $data_path ."/".$file_view;

if (preg_match("/\.(jp[e]?g|gif|png)$/i", $file) && file_exists($file)) { //이미지 파일이 있다면
$w = $view[file][$i][image_width];
$h = $view[file][$i][image_height];

if ($w < 300 && $h < 300) //사이즈 지정
echo "<img src='$file' border='0'>\n"; //지정 사이즈보다 작을때는 원본 그대로 출력
else
echo "<img src='$file' width='300' border='0'>\n"; //사이즈지정 - 비율유지를 위하여 세로는 지정안함.
echo "<p>\n";
}
}
?>
<script type="text/javascript">
this.imagePreview = function(){

// 마우스오버시 마우스에서 이미지위치
xOffset = 10;
yOffset = 30;
// 마우스오버할떄만()
$("a.preview").hover(
function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";

var pp = '<?=$file?>';
var img2 = "<img src='"+ pp +"'>";
var newObj = $(img2);
$("body").append("<p id='preview'>"+ pp +"<p/>" + c +" ");
$("#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();
});
</script>

<? echo ".get_it_image($row[it_id]."_m", $img_width , $img_height, $row[it_id]).";?>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
284508
284499
284492
284490
284484
284481
284478
284476
284474
284472
284470
284458
284457
284454
284453
284447
284446
284444
284441
284440