소스올리고 다시 질문/무리여도 질문을 던져봅니다

IT까막눈오셨다

2016-03-01 (화) 00:23:56 3,574

마우스 대면 이미지 확대되는거요

저는 리스트 파일에서 썸네일 확대 미리보기 인데
어제부터 봐도 전혀안되네요 ㅋ
소스 올리고 다시 질문을 던져봅니다


<html>
    <head>
        <title>Test</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                  
                var xOffset = 10;
                var yOffset = 30;
 
                $(document).on("mouseover",".thumbnail",function(e){ //마우스 오버시
                     
                    $("body").append("<p id='preview'><img src='"+ $(this).attr("src") +"' width='400px' /></p>"); //보여줄 이미지를 선언                       
                    $("#preview")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px")
                        .fadeIn("fast"); //미리보기 화면 설정 셋팅
                });
                 
                $(document).on("mousemove",".thumbnail",function(e){ //마우스 이동시
                    $("#preview")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px");
                });
                 
                $(document).on("mouseout",".thumbnail",function(){ //마우스 아웃시
                    $("#preview").remove();
                });
                  
            });
        </script>
             
        <style>
            /* 미리보기 스타일 셋팅 */
            #preview{
                z-index: 9999;
                position:absolute;
                border:0px solid #ccc;
                background:#333;
                padding:1px;
                display:none;
                color:#fff;
            }
        </style>
    </head>
      
    <body>
        <img src="https://www.google.co.kr/images/srpr/logo11w.png" class="thumbnail" height='20px' />
    </body>
</html>

예전에 다른분이 비슷한 질문 올리신거

http://sir.kr/bbs/new.php?sfl=mb_id&stx=ica21

저 진한 검은색 부분을 그누로 어떻게 작성해야되는지 모르겠어요

이미지 주소만 한줄적는다고 되지는 않고 php문을 써야되는것 같은데

작은 팁이라도 답변 주심 감사하겠씁니다

이건 이미지 부분의 제 소스 list.skin.php

혹시나 ㅋ

<?php

if ($list[$i]['is_notice']) { // 공지사항 ?>

<?php } else {

$thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height']);

if($thumb['src']) {

$img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" width="'.$board['bo_gallery_width'].'" height="'.$board['bo_gallery_height'].'" class="list_img">';

} else {

$img_content = '<img src="'.$board_skin_url.'/img/noimage.gif" width="'.$board['bo_gallery_width'].'" height="'.$board['bo_gallery_height'].'" class="list_img">';

}

echo $img_content;

}

</a>

</div>

그누보드5

답변 1개 / 댓글 2개

채택된 답변

+20 포인트

작은별

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2016-03-01 (화) 03:47:13

언젠간 써먹을 일이 있겠다 싶어서 올려주신 소스로 한 번 만들어봤는데 잘 뜨네요.

나중에 정리해서 스킨으로 올려놓겠습니다.

답변에 대한 댓글 2개

IT까막눈오셨다

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2016-03-01 (화) 08:34:45

무리한 부탁을 들어주셔서 정말 감사합니다~

IT까막눈오셨다

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2016-03-01 (화) 17:57:26

사진이 선명하니 잘 나오네요 굿굿굿! 대만족

답변을 작성하려면 로그인이 필요합니다.

소스올리고 다시 질문/무리여도 질문을 던져봅니다

답변 1개 / 댓글 2개

답변에 대한 댓글 2개

공유하기