마우스오버시 이미지 미리보기 질문이요~ 정보
마우스오버시 이미지 미리보기 질문이요~본문
아래소스는 이미지에 마우스오버하면 이미지미리보기 구현중인데요..
이미지첨부파일출력부분에서 얻은 이미지파일 경로를 가져다가 미리보기에 뿌렸는데요
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]).";?>
이미지첨부파일출력부분에서 얻은 이미지파일 경로를 가져다가 미리보기에 뿌렸는데요
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]).";?>
댓글 전체