HTML, JS 이미지 클릭하면 새 탭으로 열기(feat. 티스토리)
수성비전자방입니다. 카카오 데이터센터 화재 이후 티스토리에 jQuery 3.5.1이 적용되면서 라이트박스(Lightbox. 이미지를 클릭하면 크게 볼 수 있는 기능.)에 오류가 발생했습니다. 라이트박스는 jQuery 1.12.4에 의존적이라는군요. 'jQuery 3.5.1에 호환되는 라이트박스가 있지 않을까?'라고 생각했는데 라이트박스 자체가 오래 전 업데이트가 끊겼네요. 그래서 저는 이미지를 클릭하면 새 탭으로 크게 볼 수 있도록 소스코드를 만들어 보았습니다. HTML, CSS, Javascript를 모두 사용하며, 단 jQuery는 사용하지 않습니다.(제가 jQuery를 잘 모르므로...) 티스토리를 기준으로 설명하지만 티스토리를 운영하지 않으시더라도 기능 구현하실 때 참고하실 수 있을 겁니다.
목차
1. HTML, Javascript 소스코드(index.html)
2. 티스토리 Lightbox 끄기(index.html)
3. 이미지에 마우스 올릴 때 커서 변경(style.css)
4. 결과 및 장단점
5. 글 마무리 및 종합 소스코드
6. 참고 자료
1. HTML, Javascript 소스코드(index.html)
1~2번 문단은 HTML 소스코드(티스토리의 경우 index.html)의 <body>와 </body> 사이에 <script> 태그와 </scirpt> 태그를 작성하여 그 사이에 자바스크립트 코드를 작성함을 유의하시기 바랍니다. 쉽게 말해서 </body> 바로 위에 1~2번 문단의 소스코드를 작성하시면 됩니다.
<!--...-->
<script type="text/javascript">
var img = document.querySelectorAll(".article img"); //actual
for (var x = 0; x < img.length; x++) {
img[x].onclick=function() {
var win=window.open('');
win.document.title = '이미지 크게 보기';
win.document.body.innerHTML='<div id="button"><button onclick="window.close()">이미지 닫기 Close image</button></div> <div id="imgview"><img src="'+this.src+'" alt="show-img-big"/></div> <style>#button{width: 100%; height: 5%;} button{width: 100%; height: 100%; font-size: 3vh;} #imgview{width: 100%; height: 95%;} img{width: 100%; height: 100%; object-fit: contain;} </style>'
};
}
</script>
<!--...-->[Line 3]
img라는 변수를 선언한 뒤 document.querySelectorAll(".article img")를 대입합니다. img 변수라고 했지만 사실 document.querySelectorAll은 NodeList 객체라고 합니다. 이 소스코드는 article class 안에 있는 모든 img 태그들을 img라는 NodeList에 넣겠다는 뜻입니다.
[Line 4]
for문을 시작합니다. for문은 반복문이지요. counter는 x로 했습니다. x<img.length가 될 때까지 x에 1을 더하며 반복합니다. img.length는 img에 있는 Node의 개수를 의미합니다. 즉, article class 안에 있는 img 태그들의 개수하고 생각하시면 됩니다.
[Line 5~9]
이미지 태그를 클릭할 때 실행할 내용입니다.
[Line 6]
var win=window.open('');
새 탭을 엽니다. 이 새 탭을 변수 win으로 사용하겠습니다.
[Line 7]
win.document.title = '이미지 크게 보기';
새 탭의 이름은 '이미지 크게 보기'입니다.
[Line 8]
새 탭에 적용될 HTML 소스코드입니다. 깔끔하게 정리해서 보여드리면 아래와 같습니다.
<div id="button">
<button onclick="window.close()">이미지 닫기 Close image</button>
</div>
<div id="imgview">
<img src="'+this.src+'" alt="show-img-big"/>
</div>
<style>
#button{width: 100%; height: 5%;}
button{width: 100%; height: 100%; font-size: 3vh;}
#imgview{width: 100%; height: 95%;}
img{width: 100%; height: 100%; object-fit: contain;}
</style>button div와 imgview div로 나누어 관리합니다.
2행의 <button onclick="window.close()">이미지 닫기 Close image</button>는 이미지 닫기 단추입니다.
5행의 <img src="'+this.src+'" alt="show-img-big"/>는 이미지입니다. this.src는 먼저 보여드린 소스코드(index.html 및 javascript)의 Line 8에서 클릭한 이미지의 주소를 의미합니다.
7~12행은 style입니다.
이 중 8행 #button{width: 100%; height: 5%;}는 div button의 높이를 5%로 합니다.
9행 button{width: 100%; height: 100%; font-size: 3vh;}는 button이 div button을 가득 채우게 하고 button의 글자 크기는 화면 높이의 3%로 합니다.(vh: 화면 높이에 대한 백분율)
10행 #imgview{width: 100%; height: 95%;}는 div imgview의 높이를 95%로 합니다.(button 외에 남은 부분 전체를 할당)
11행 img{width: 100%; height: 100%; object-fit: contain;}은 img가 div imgview를 가득 채우게 하되 이미지가 가로 세로 비율을 유지한 채로 조정되며 빈 공간을 남게 합니다.
2. 티스토리 Lightbox 끄기(index.html)
티스토리에서 이미지 클릭 시 새 탭으로 열리도록 소스코드를 작성했다면 더 이상 Lightbox를 사용할 필요가 없습니다. 그러므로 Lightbox를 무력화 하는 코드를 작성해 보겠습니다. 사실 이미지 각각에 대한 Lightbox만 무력화하는 것이고, Lightbox 자체는 남아 있습니다. 이게 플러그인도 아니고 그냥 티스토리에 기본적으로 적용되는 것이다 보니 끄기가 어렵더군요.
<!--...-->
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
var s=document.querySelectorAll(".article span");
for (var i = 0; i < s.length; i++) { s[i].removeAttribute('data-lightbox'); }
});
</script>
<!--...-->article class 안에 있는 모든 span 태그들을 찾아서 data-lightbox 속성을 제거하는 코드입니다.
3. 이미지에 마우스 올릴 때 커서 변경(style.css)
1(~2번) 문단만 진행해도 기능은 작동하지만, 방문자가 이미지에 마우스 커서를 올렸을 때 그 이미지를 클릭할 수 있다는 사실을 인지하기 어려우므로 커서를 변경해 보도록 합시다. 아래 소스코드를 CSS 소스코드(티스토리의 경우 style.css)의 적당한 부분(잘 모르겠으면 맨 아래)에 작성합니다.
.article img:hover{
cursor: zoom-in;
}article class 안에 있는 img 태그에 대해서만 그 이미지에 마우스 커서를 올릴 경우 적용되는 속성입니다. 커서 모양을 zoom-in(돋보기 확대 모양)으로 바꿉니다. 라이트박스처럼 pointer를 사용할 수도 있지만 zoom-in이 더 직관적인 것 같아서 이렇게 했습니다.
4. 결과 및 장단점
이미지를 닫으려면 상단의 이미지 닫기 Close image 단추를 누릅니다.
이 소스코드를 적용하면 원래 모바일에서는 안 되던(또는 불편하던) 확대/축소를 편하게 할 수 있다는 장점이 있습니다.
다만, PC에서는 Ctrl++ 단축키를 사용했을 때 확대/축소가 잘 안 된다는 단점이 있습니다. 확대/축소는 터치스크린으로만 되더라고요..
5. 글 마무리 및 종합 소스코드
제 글을 읽어 주셔서 감사합니다. 도움을 드리고자 오늘 사용한 소스코드를 종합하여 올려드립니다.
<!-- index.html -->
<!--...-->
<!-- 이미지 클릭 시 새 탭으로 열기 s -->
<script type="text/javascript">
var img = document.querySelectorAll(".article img"); //actual
for (var x = 0; x < img.length; x++) {
img[x].onclick=function() {
var win=window.open('');
win.document.title = '이미지 크게 보기';
win.document.body.innerHTML='<div id="button"><button onclick="window.close()">이미지 닫기 Close image</button></div> <div id="imgview"><img src="'+this.src+'" alt="show-img-big"/></div> <style>#button{width: 100%; height: 5%;} button{width: 100%; height: 100%; font-size: 3vh;} #imgview{width: 100%; height: 95%;} img{width: 100%; height: 100%; object-fit: contain;} </style>'
};
}
document.addEventListener("DOMContentLoaded", function() { //Lightbox 제거 코드
var s=document.querySelectorAll(".article span");
for (var i = 0; i < s.length; i++) { s[i].removeAttribute('data-lightbox'); }
});
</script>
<!-- 이미지 클릭 시 새 탭으로 열기 e -->
<!--...-->index.html의 경우 1~2번 문단을 합쳐 하나의 <script> 태그 그룹으로 작성하였습니다.
/* sytle.css */
/* ... */
/* 여기부터 이미지 클릭 시 새 탭 관련 */
.article img:hover{
cursor: zoom-in;
}
/* 여기까지 이미지 클릭 시 새 탭 관련 */
/* ... */다음에 만나요!
6. 참고 자료
1) apost. 2022. "[공지] 티스토리 글 본문 안의 이미지 클릭시 라이트박스가 표시되지 않는 문제에 관한 안내", 어포스트. (2022. 12. 23. 방문). https://blogpack.tistory.com/1178
2) juragi. 2019. "[JavaScript] window.open() - 새탭/새창 띄우기, 닫기 이벤트 활용", juragi. (2022. 12. 23. 방문). https://lasdri.tistory.com/1131
3) 라라벨개발자. 2019. "이미지클릭시 새창으로 원본이미지 보기 img태그이용", 38LARAVEL. (2022. 12. 23. 방문). https://anko3899.tistory.com/page/kotlin
4) jmjm. 2022. "[HTML]<button>, <input type="button"> 차이, /* jmjmjm */. (2022. 12. 23. 방문). http://jmjmjm.tistory.com/157
5) IT 정복가. 2022. "CSS 단위 이해하기(%, px, em, rem, vw, vh의 차이", 공대생의 IT 정복기. (2022. 12. 23. 방문). http://conquer-it.tistory.com/124
6) mdn web docs. 2022. "cursor", mdn web docs. (2022. 12. 23. 방문). https://developer.mozilla.org/ko/docs/Web/CSS/cursor
7) devsp. 2021. "티스토리 이미지 크게 보기(Light-TT-EX) 보기", (구)심심풀이 개발자. (2022. 12. 23. 방문). https://devjit.tistory.com/179
8) W3Schools. n. d. "HTML DOM Document querySelectorAll()", W3Schools. (2022. 12. 23. 방문). https://www.w3schools.com/jsref/met_document_queryselectorall.asp
'프로그래밍 > 웹개발(HTML, CSS, JS 등)' 카테고리의 다른 글
| 티스토리 스킨에 로그인 버튼 추가하기(비로그인 시에만 보임) (2) | 2022.07.16 |
|---|---|
| [highlight.js]티스토리 코드블럭 스타일 변경, 줄번호 넣는 법 (0) | 2022.06.20 |
| 엠원리액트 댓글에 프로필사진 보이게 하기 (0) | 2022.05.02 |
| [수성비전자방 2022 스킨 수정기록]4. description 삭제 및 스킨 적용 (0) | 2022.03.12 |
| [수성비전자방 2022 스킨 수정기록]3. 글 목록(본문 미리보기), 본문 (0) | 2022.03.09 |
