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

페이지 정보

shadow2fox 1,534 2 2 2021.03.14 23:49

평점

  • - 평점 : 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
  • 내사랑
  • 하늘구장
10
shadow2fox - 회원등급 : 자연/Level 142 - 포인트 : 2,533,042
레벨 142
경험치 3,022,469

Progress Bar 45%

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

댓글2

내사랑님의 댓글

내사랑 2021.03.15 15:19

올려 주셨군용 퇴근 후에 적용해야겠네요 아주 많이 감사드립니다

하늘구장님의 댓글

하늘구장 2021.03.15 00:03

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

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

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

Total 743538 페이지
제목 글쓴이 날짜 조회 추천
이윰  댓글+2🏆 글 작성 시 alt 태그 게시글 제목으로 DB에 저장하기 shadow2fox 2021.05.05 1,413 2
그누•영카트  🏆 영카트 5.4.5.4 shadow2fox 2021.05.04 1,187 0
그누•영카트  댓글+2🏆 그누보드 5.4.5.4 shadow2fox 2021.05.04 1,307 2
그누•영카트  🏆 영카트 5.4.5.3 shadow2fox 2021.04.05 1,000 0
그누•영카트  댓글+2🏆 그누보드 5.4.5.3 shadow2fox 2021.04.05 1,407 2
그누•영카트  영카트 5.4.5.2 shadow2fox 2021.03.17 999 0
그누•영카트  댓글+2🏆 그누보드 5.4.5.2 shadow2fox 2021.03.17 1,639 2
JavaScript  댓글+2🏆 🚩 이미지 원본 크기로 보기 shadow2fox 2021.03.14 1,535 2
이윰  댓글+4🏆 다중 태그 입력 올바르게 shadow2fox 2021.03.12 1,918 2
이윰  댓글+1🏆 PHP 8.x Fatal error : 중괄호 사용으로 인한 json.class.php 오류 shadow2fox 2021.02.17 1,796 1
이윰  댓글+3🏆 PHP 8.x 지원을 위한 암호화, 복호화 함수 shadow2fox 2021.02.16 2,533 3
그누•영카트  🏆 영카트 5.4.5.1 shadow2fox 2021.02.06 1,226 0
그누•영카트  🏆 영카트 5.4.4.9.1 shadow2fox 2021.02.06 1,297 0
그누•영카트  댓글+2🏆 그누보드 5.4.5.1 shadow2fox 2021.02.06 1,487 2
이윰  댓글+2🏆 게시글 작성 중복 방지하기 shadow2fox 2021.02.03 1,649 2
그누•영카트  🏆 영카트 5.4.4.9 shadow2fox 2021.01.26 1,200 0
그누•영카트  댓글+1🏆 그누보드 5.4.4.9 shadow2fox 2021.01.26 1,682 1
그누•영카트  🏆 영카트 5.4.4.8 shadow2fox 2021.01.19 1,309 0
그누•영카트  댓글+1🏆 그누보드 5.4.4.8 shadow2fox 2021.01.19 1,976 1
그누•영카트  🏆 영카트 5.4.4.7.1 shadow2fox 2021.01.14 1,442 0