마우스오버시 이미지 미리보기 질문이요~ > 그누4 질문답변

그누4 질문답변

그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드4 바로가기
기존 게시물은 열람만 가능합니다.

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

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

본문

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

댓글 전체

© SIRSOFT
현재 페이지 제일 처음으로