[JavaScript] 이미지 원본 크기로 보기
페이지 정보
shadow2fox
2,304 2 2
2021.03.14 23:49:38
짧은주소
-
https://yadolee.com/tip/849 주소복사
본문
📝 이미지 원본 크기로 보기
자바스크립트와 jQuery를 사용할 수 있는 환경이라면 아래 소스의 선택 엘리먼트와 팝업 함수의 제목만 입맛에 맞도록 바꾸어 적용하면 된다.
{code:js}
$(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);
});
{/code}$('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 커서 스타일을 추가하며 이미지를 클릭하면 팝업창을 닫는다.
탬플릿언더바를 이용하는 이윰빌더일 경우 게시글 제목을 잘라서 팝업 제목으로 사용한다.
{code:js}
$(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);
});
{/code}$('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
-
내사랑
-
하늘구장
레벨 154
경험치 3,577,770
Progress Bar 94.1%
- 가입일 : 2015-03-10 12:21:44
- 서명 : 인간에게 가장 큰 선물은
자기 자신에게 기회를 주는 것이다.
- 크리스 가드너, Chris Gardner -
- 자기소개 : There's never a shortcut to happiness.
-
1 [생활 정보] [판매중] 샤인머스켓 정품 2kg 3수 (10,440원 / 무료) +12026-02-05
-
1 [생활 정보] [판매중] 해태 홈런볼41g*8개+구운감자24g*10개[총18개] +12026-02-03
-
2 [생활 정보] [판매중] 쿠크다스 화이트 128g 4팩 + 쿠크다스 커피 128g 4팩 (13,520원 / 무료) +22026-02-03
-
[좋은 생각] 자기를 아는 사람2026-02-02
-
[좋은 생각] 애쓰지 않고 편안하게2026-02-02
-
[좋은 생각] 천성적으로 타고나지 않았더라도 마음을 다해 내 것으로 만들 수 있는 것2026-02-02
-
[좋은 생각] 표를 세는 사람이 모든 것을 결정한다2026-02-02
-
1 [좋은 생각] 희망 도토리2026-02-02
-
[생활 정보] 가격이 착하다 싶더니 할인이 사라지고 일반가 30,900원으로 판매하네요2026-01-28
-
[일일 메모장] 안타까운 소식입니다. 민주 진영의 거목이였던 이해찬 전 대표님 정말 고생 많으셨습니다. 이제 편히 쉬십시오.2026-01-25
-
[자유 게시판] 올 한 해도 잘 부탁드립니다. 새해 복 많이 받으세요.2026-01-06
-
[일일 메모장] 무슨 말이 필요할까요 삼가 조의를 표하며 고인의 명복을 빕니다 영면하세요2026-01-05
-
[생활 정보] 이번 년도도 잘 정리해 주셨네요 감사드립니다2026-01-01
-
[자유 게시판] 새해 맞기 전 마지막 날을 좀 더 멋지게 보내고 싶은데 늘 마음 뿐이네요 활기차고 신난 새해로 시작되시길 빌어요 올 한 해도 화이팅입니다2026-01-01
-
[자유 게시판] 메리 크리스마스 행복이 넘쳐 흘러 기쁨을 만끽하는 하루 그런 날 되세요2025-12-25
-
[자유 게시판] 1990년대를 살았던 우리들의 꽃피던 시절은 시끌벅쩍하고 그토록 화려했던 것 같습니다. 세상에 맞선 용기는 사라지고 조심성만 커져 버린 오늘의 삶이지만 어제보다 더 나은 오늘, 오늘 보다 더 나은 미래를 그리는 그런 삶을 그려 나가길 기원합니다. 메리 크리스마스! 행복한 성탄절되세요!!2025-12-24
댓글2
내사랑님의 댓글
하늘구장님의 댓글
축하합니다. 첫 댓글로 1경험치를 획득하였습니다.
축하합니다. 행운의 73경험치를 획득하였습니다.