jQuery 미리보기 이미지 설정방법

 

안녕하세요. 은은한 개발자입니다.

 

이번 포스팅에선 마우스 오버 시 미리 보기 이미지가 나오는 방법에 대해 준비해봤습니다.

 

 

1. HTML 태그 

<a href="{이미지URL}" class="thumbnail">example.jpg</a>

먼저 위와 같은 이미지 링크가 있습니다.

 

 

2. CSS 설정

#preview {
  z-index: 1; /* 필요시 설정 */
  position: absolute;
  background: #999999;
  padding: 2px;
}

마우스 오버시 나타날 이미지의 CSS를 설정해줍니다. z-index의 경우 현재 CSS의 상태에 따라 필요할 경우 설정해주세요.

 

 

3. jQuery 설정

    $(document).ready(function () {

        var xOffset = 10;
        var yOffset = 30;

        // 마우스 오버시 미리보기 이미지 설정 및 위치 설정
        $(document).on("mouseover", ".thumbnail", function (e) { //마우스 오버시
            // 미리보기 이미지 설정
            var div = $("<div>", {id: "preview"});
            var img = $("<img>", {src: $(this).attr("href")});
            div.append(img);
            $("body").append(div);

            // 마우스 오버에 따른 위치 설정
            $("#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();
        });

    });

위의  jQuery 코드를 <script></script> 태그 안에 삽입하면 끝!