[JavaScript] 이미지 원본 크기로 보기
페이지 정보
shadow2fox
1,534 2 2
2021.03.14 23:49
짧은주소
-
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);
});
$('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
레벨 142
경험치 3,022,469
Progress Bar 45%
- 가입일 : 2015-03-10 12:21:44
- 서명 : 인간에게 가장 큰 선물은
자기 자신에게 기회를 주는 것이다.
- 크리스 가드너, Chris Gardner -
- 자기소개 : There's never a shortcut to happiness.
-
[뮤직 비디오 게시판] 슬픈 인연 - 나미 [Nami Vol.4] 1985년2024-03-28
-
1 [좋은 생각] 불행은 반드시 일시불로 오지2024-03-21
-
1 [좋은 생각] 항상 또 다른 기회는 있기 마련이다2024-03-21
-
[좋은 생각] 꿈이 없는 것도 비참하지만 안 되는 꿈을 잡고 있는 것도 비참하다2024-03-21
-
[좋은 생각] 널 만나고부터2024-03-21
-
[좋은 생각] 눈치 있게 살아야 한다2024-03-21
-
[좋은 생각] 실수를 인정하는 것2024-03-21
-
[골라먹는 요리] 부대볶음2024-03-21
-
[생활 정보] 80원의 행복이네요{이모티콘}2024-03-21
-
[자유 게시판] 같은 의견이에요2024-03-14
-
[자유 게시판] 다시 봐도 감동입니다{이모티콘}2024-03-11
-
[자유 게시판] 제가 라이브 시청을 하지 않아야 대활약을 해서 손흥민 선수를 위해 안타깝지만 자제 중입니다{이모티콘} 반더벤 또한 너무 잘하지 않았나 싶었네요2024-03-03
-
[자유 게시판] 하늘구장님 늘 감사드리며 마음을 담아 새해 인사를 전합니다 새해 복 많이 받으세요2024-02-09
-
[이슈와 관심] 최소 누군가는 가학 대통령으로 기억할 것 같습니다2024-01-29
-
[이슈와 관심] {글:링크} 배추도 매출도 아닌 배출로 들려서... 한동안 또 시끄러울 것 같습니다.2024-01-28
-
[생활 정보] 오늘 운을 다 쓴 느낌입니다 224원😚2024-01-27
댓글2
내사랑님의 댓글
올려 주셨군용 퇴근 후에 적용해야겠네요 아주 많이 감사드립니다
하늘구장님의 댓글
그누보드에서 제공된 이미지 팝업 기능을 사용치 않는 경우 아주 유용한 팁이네요 정말 감사합니다
축하합니다. 첫 댓글로 1경험치를 획득하였습니다.
축하합니다. 행운의 73경험치를 획득하였습니다.