[JavaScript] 이미지 원본 크기로 보기
페이지 정보
shadow2fox
1,954 2 2
2021.03.14 23:49:38
짧은주소
-
https://yadolee.com/tip/849 주소복사
평점
본문
📝 이미지 원본 크기로 보기
자바스크립트와 jQuery를 사용할 수 있는 환경이라면 아래 소스의 선택 엘리먼트와 팝업 함수의 제목만 입맛에 맞도록 바꾸어 적용하면 된다.
$('body').on('click','img.zoomable',function()은 zoomable 클래스를 지닌 img를 클릭할 때 image_popup함수를 호출한다.
function image_popup(url)는 호출된 이미지의 크기를 구하여 사용자 해상도 넓이의 중앙에 맞게 띄우고 팝업 내 이미지에 zoom-out 커서 스타일을 추가하며 이미지를 클릭하면 팝업창을 닫는다.
탬플릿언더바를 이용하는 이윰빌더일 경우 게시글 제목을 잘라서 팝업 제목으로 사용한다.
$(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);
});
$('body').on('click','img.zoomable',function()은 zoomable 클래스를 지닌 img를 클릭할 때 image_popup함수를 호출한다.
function image_popup(url)는 호출된 이미지의 크기를 구하여 사용자 해상도 넓이의 중앙에 맞게 띄우고 팝업 내 이미지에 zoom-out 커서 스타일을 추가하며 이미지를 클릭하면 팝업창을 닫는다.
탬플릿언더바를 이용하는 이윰빌더일 경우 게시글 제목을 잘라서 팝업 제목으로 사용한다.
추천인 2
-
내사랑
-
하늘구장
레벨 147
경험치 3,236,680
Progress Bar 39.42%
- 가입일 : 2015-03-10 12:21:44
- 서명 : 인간에게 가장 큰 선물은
자기 자신에게 기회를 주는 것이다.
- 크리스 가드너, Chris Gardner -
- 자기소개 : There's never a shortcut to happiness.
-
[골라먹는 요리] 제육볶음2025-06-29
-
[좋은 생각] 선한 것은 약자를 도우려는 사람들이다2025-06-29
-
[좋은 생각] 확신에 모든 것을 잃었고 경계심에 모든 것을 지켜 냈다2025-06-29
-
[좋은 생각] 타인에게 할 것은 기대가 아니라 감사다2025-06-29
-
[좋은 생각] 시작하는 데 있어서 나쁜 시기라는 것은 없다2025-06-29
-
[좋은 생각] 세 가지 헛된 확신이 우리를 가로막는다2025-06-29
-
[좋은 생각] 술을 먹고 해결하려고 하지 마세요2025-06-29
-
[공유 자료실] Everything 1.4.1.1028 - 실시간 파일/폴더 검색 프로그램2025-06-28
-
[일일 메모장] 공감되는 말씀입니다2025-06-03
-
[일일 메모장] 그 어떤 후보도 내게 직접적인 득이 될 수 없다면 내 친지와 내 이웃에게 득이 될 것 같은 후보를 뽑으시고 여러모로 따져 보고 헤아려 보아도 그런 자질을 갖춘 이를 찾을 수 없다면 내 나라에 더 득이 되어 줄 후보를 뽑으셨으면 좋겠습니다 어쩌면 내 코가 석 자라는 말도 자유가 없다면 배 부른 소리 일 수 있습니다 어느 개념있는 배우에 대한 기사로 갈음하고 싶습니다 {글} 꼭 소중한 투표 행사하셨으면 합니다2025-06-03
-
[자유 게시판] 저 또한 소중한 하나 표를 행사하려 합니다 좋은 결과를 기대하고 싶습니다2025-06-03
-
[이슈와 관심] 29일 시청했으나 이제서야 댓글을 답니다 속이 타들어가는 느낌과 메스꺼움 그리고 온전치 않은 정신에 불편한 감정을 다스릴 수 없는 시기라 무슨 말을 피력하기가 참 어렵습니다 당분간은 이 상태일 듯 하네요 그럼에도 불구하고 뉴스타파의 노고에 박수를 보냅니다2025-06-01
-
[이슈와 관심] 미약하나마 동참했습니다2025-05-04
-
[생활 정보] 음 180원 다른 운을 기대해봐야겠네요2025-04-26
-
[생활 정보] 나라가 혼돈의 시기를 겪다 보니 봄을 만끽할 겨를 조차 느낄 수 없었네요 정보 감사합니다2025-04-07
-
[생활 정보] 새해 복 많이 받으십시오2025-01-31
댓글2
내사랑님의 댓글
하늘구장님의 댓글
축하합니다. 첫 댓글로 1경험치를 획득하였습니다.
축하합니다. 행운의 73경험치를 획득하였습니다.