티스토리 (이미지 확대)라이트박스 제거하기

이미지를 클릭하면 새 창으로 확대되어 보이는게 라이트박스 기능

 

티스토리 라이트박스란?

티스토리 라이트박스는 티스토리 블로그에서 사용되는 이미지 뷰어 기능이다. 이 기능을 활용하면 블로그 글에 포함된 이미지를 클릭했을 때, 해당 이미지가 팝업 창에 크게 확대되어 보여지며, 사용자는 더 자세히 살펴볼 수 있다. 티스토리 라이트박스는 이미지를 보다 크게, 원본 해상도와 세부 사항을 뚜렷하게 표시함으로써 이미지의 미감과 내용을 강조하는 데 도움을 준다. 이 기능은 이미지를 더 효과적으로 시각적으로 전달하거나 사용자에게 이미지에 대한 더 자세한 정보를 제공하는 경우에 유용하다. 사용자가 글을 읽는 도중 이미지에 더 관심을 가지고 클릭하게끔 유도하고, 이미지에 대한 추가 정보를 표시할 때도 사용할 수 있다. 블로거나 글쓴이들은 티스토리 라이트박스를 활용하여 이미지 컨텐츠를 눈에 띄게 만들고 사용자 경험을 향상시킬 수 있다.

 

예시 이미지

아래 코드를 HTML </Body> 위에 바로 붙여주면 됩니다.

<!--사진 새로창 안뜨게함-->
<script> document.addEventListener("DOMContentLoaded", function() { var s=document.getElementsByTagName("span"); for (var i = 0; i < s.length; i++) { s[i].removeAttribute('data-lightbox'); } }); </script>
<!--사진 새로창 안뜨게함-->

자그마한 팁이지만 코드를 추가할때

<!--원하는 텍스트를 입력하세요-->

가로와 !-를 사용해서 문구를 넣으면 추후에 제거하거나 수정하는데 많은 도움이 된다!

 

티스토리는 기본적으로 라이트박스 효과가 있어서 굳이 제거하지 않는 이상 이미지를 확대해서 볼 수 있다!

라이트박스를 사용하면 아래와 같은 효과를 볼 수 있어서 필요에 따라서 이용하면 좋겠다.

1. 이미지 확대 및 세부 정보 표시: 라이트박스를 사용하면 이미지나 미디어 파일을 클릭하면 해당 파일이 팝업 창으로 확대되어 표시된다. 이렇게 하면 사용자는 이미지를 더 크게 볼 수 있으며 세부 정보를 더 자세히 확인할 수 있다.
2. 사용자 중점 및 상호작용: 라이트박스를 통해 이미지가 확대되면 사용자의 시야가 이미지로 집중된다. 이는 이미지나 미디어 파일에 대한 주요 정보나 메시지를 강조하는 데 도움이 된다. 또한 사용자는 라이트박스 내에서 이미지를 스와이프하거나 클릭하여 다음 이미지로 이동하거나 더 많은 정보를 볼 수 있다.
3. 시각적 효과 및 디자인 개선: 라이트박스는 웹 페이지 디자인을 개선하고, 이미지나 미디어 파일이 전체 페이지를 가리지 않으면서 시각적 효과를 추가된다. 이로써 사용자가 페이지 내에서 원하는 이미지를 선택하고 보다 편리하게 탐색할 수 있다.
4. 사용자 경험 향상: 라이트박스는 사용자 경험을 향상시키는 데 기여한다. 이미지를 눌러 확대하고 다시 페이지로 돌아가는 번거로운 과정 없이 이미지를 간편하게 탐색할 수 있다.
5. 미디어 갤러리 및 포트폴리오에 적합: 라이트박스는 미디어 갤러리, 포트폴리오, 제품 샘플, 아티스트 포트폴리오, 사진 블로그 등 이미지 또는 미디어 파일을 중요한 컨텐츠로 사용하는 웹 페이지에서 특히 유용하다.