[JavaScript] 이미지 원본 크기로 보기

페이지 정보

shadow2fox shadow2fox 1,968 2 2 2021.03.14 23:49:38

평점

  • 평점 : 5점 (2명 참여)

본문

📝 이미지 원본 크기로 보기
자바스크립트와 jQuery를 사용할 수 있는 환경이라면 아래 소스의 선택 엘리먼트와 팝업 함수의 제목만 입맛에 맞도록 바꾸어 적용하면 된다.

$(document).ready(function() {
    $('img').load(function(){
        var img = $(this);
        var width = img[0].naturalWidth;
        console.log(width);
        var winwidth = $(".board-view-atc").width();
        console.log(winwidth);
        if(width > winwidth){
            if(!(img[0].closest('a'))) {
                img.addClass('zoomable');
                $('img.zoomable').css('cursor', 'zoom-in');
            }
        }
  })
});

function image_popup(url) {
    var imgObj = new Image();
    imgObj.src = url;
    var left = (screen.width - imgObj.width)/2;
    imageWin = window.open("", "profile_popup", "width=" + imgObj.width + "px, height=" + imgObj.height + "px, left=" + left +"px");
    imageWin.document.write("<html><body style='margin:0'>");
    imageWin.document.write("<a href=javascript:window.close()><img src='" + imgObj.src + "' style='max-width:100%;cursor:zoom-out'></a>");
    imageWin.document.write("</body><html>");
    imageWin.document.title = "{=cut_str(get_text(view.wr_subject), 120)}";
}

$('body').on('click','img.zoomable',function(){
    var img = $(this);
    var src = img.attr('src');
    image_popup(src);
});
$('img').load(function()은 이미지가 로딩될 때마다 이미지의 넓이를 검증하고 board-view-atc 클래스보다 크면 zoomable 클래스를 이미지에 추가하고 zoom-in 커서 스타일을 추가한다.

$('body').on('click','img.zoomable',function()은 zoomable 클래스를 지닌 img를 클릭할 때 image_popup함수를 호출한다.

function image_popup(url)는 호출된 이미지의 크기를 구하여 사용자 해상도 넓이의 중앙에 맞게 띄우고 팝업 내 이미지에 zoom-out 커서 스타일을 추가하며 이미지를 클릭하면 팝업창을 닫는다.
탬플릿언더바를 이용하는 이윰빌더일 경우 게시글 제목을 잘라서 팝업 제목으로 사용한다.
추천인 2
  • 012i1052u
    내사랑
  • skyfield4u
    하늘구장
shadow2fox
10
shadow2fox - 회원등급 : 자연/Level 147 - 포인트 : 2,613,666
레벨 147
경험치 3,240,414

Progress Bar 47.88%

- 가입일 : 2015-03-10 12:21:44
- 서명 : 인간에게 가장 큰 선물은 자기 자신에게 기회를 주는 것이다. - 크리스 가드너, Chris Gardner -
- 자기소개 : There's never a shortcut to happiness.

댓글2

내사랑님의 댓글

012i1052u
내사랑 2021.03.15 15:19
올려 주셨군용 퇴근 후에 적용해야겠네요 아주 많이 감사드립니다

하늘구장님의 댓글

skyfield4u
하늘구장 2021.03.15 00:03
그누보드에서 제공된 이미지 팝업 기능을 사용치 않는 경우 아주 유용한 팁이네요 정말 감사합니다

축하합니다. 첫 댓글로 1경험치를 획득하였습니다.

축하합니다. 행운의 73경험치를 획득하였습니다.

Total 762426 페이지

제목 글쓴이 날짜 조회 추천
그누•영카트  댓글+1🏆 첨부된 이미지 링크 없애기 루루아빠 2015.04.04 2,790 0
그누•영카트  🏆 Re: 첨부된 이미지 링크 없애기 루루아빠 2015.04.07 3,156 0
그누•영카트  🏆 Re: Re: 첨부된 이미지 링크 없애기 루루아빠 2015.04.07 3,280 0
기타  🏆 내용이 포함된 box의 넓이와 높이 조정하는 법 루루아빠 2015.04.08 3,494 0
이윰  댓글+1🏆 이윰 메뉴 설정에서 출력 순서로 인한 오류 발생시 루루아빠 2015.04.09 3,793 0
기타  🏆 "syntaxhighlighter"로 적힌 소스 쉽게 복사하기 루루아빠 2015.04.09 3,391 0
이윰  🏆 게시판 basic 스킨 목록 보기에서 가운데로 정렬하기 루루아빠 2015.04.10 3,272 0
기타  댓글+3🏆 아이프레임에 포함된 플래쉬(White flash방지) 로딩 완벽 해결법 루루아빠 2015.04.11 3,688 0
그누•영카트  🏆 썸네일 화질 설정법 루루아빠 2015.04.11 3,307 0
에디터  🏆 smarteditor2를 이용하여 이미지 업로드시 이미지 위에 타이틀 팝업창 없애기 루루아빠 2015.04.11 3,589 0
에디터  댓글+1🏆 smarteditor2 사진 첨부시 절대경로를 상대경로로 변경하기 루루아빠 2015.04.18 4,672 0
이윰  댓글+2🏆 게시판 카테고리 탭 형식으로 만들기 루루아빠 2015.04.21 3,528 0
이윰  🏆 관리자는 본문 내용 없이 글 작성하기 루루아빠 2015.04.22 3,369 1
이윰  🏆 사이드바 없애기 루루아빠 2015.04.22 3,242 1
이윰  🏆 좀 더 전문적으로 관리자 본문 내용 없이 글 작성하기 루루아빠 2015.04.22 3,071 1
그누•영카트  🏆 첨부 이미지 가운데로 정렬하기 루루아빠 2015.04.23 2,859 0
이윰  🏆 일반 회원과 특정 레벨 회원을 나타내는 변수 루루아빠 2015.04.23 2,904 0
에디터  🏆 smarteditor2 로 사진 첨부시 에디터 크기에 맞게 리사이즈 루루아빠 2015.04.23 3,585 0
이윰  🏆 이윰 조건문 변수 모음 루루아빠 2015.04.23 2,938 0
이윰  🏆 "카테고리"별 게시글 갯수 나타내기 루루아빠 2015.04.24 3,120 1
에디터  🏆 CKeditor4.x 에디터 상 엔터를 쉬프트+엔터 바꾸기 루루아빠 2015.04.24 3,514 0
이윰  🏆 메인일때만 사이드 레이아웃을 없애기 루루아빠 2015.04.24 2,817 0
에디터  🏆 CKeditor4.x 에 폰트 추가하기 루루아빠 2015.04.28 3,435 0
이윰  🏆 로그인 후에만 홈 들어가게 만들기 루루아빠 2015.04.28 2,791 0
이윰  🏆 반응형 이미지를 위한 태그 루루아빠 2015.04.29 3,012 1
그누•영카트  🏆 영카트 상품 증가 감소 선택 문자 바꾸기 루루아빠 2015.05.01 3,601 0
에디터  🏆 CKeditor4.x 소스 온전하게 보여주기 루루아빠 2015.05.06 3,835 1
이윰  🏆 모바일에서 이미지 넓이 높이 태그 제거하기 루루아빠 2015.05.07 2,780 1
기타  🏆 JWPlayer(6.9이상) 비디오 주위 파란색 테두리 없애기 루루아빠 2015.05.07 4,153 1
이윰  🏆 이윰 메뉴 설정시 사용중인 출력순서 에러 해결하기 루루아빠 2015.05.12 3,385 1