티스토리 반응형 이미지 슬라이드 만들기+링크 거는 방법 (제이쿼리 활용)

제목이 다소 장엄한데 사실별거 없고 그냥 티스토리의 기능 중 하나인 티에디션 상단에 임의로 이미지를 넣어서 멋진 배너를 만드는 방법 중 하나를 소개하고자 한다. 까먹기전에 얼른 써 놔야 나중에 혹시라도 잊어먹어도 이 글을 보고 복습할 수 있기 때문에 철저히 개인위주의 글로 작성해 보고자 한다. 하지만 꼼꼼하게 작성할 것이니, 방문해주신 분들도 똑같이 따라하실 수 있을 것이다.

 

TIP

 

 

본 글은 티에디션 전용입니다. 하지만 현재의 티스토리는 티에디션을 지원하지 않습니다. 그냥 참고만 하시면 됩니다.

 

이걸 해보겠다고 3일을 연구했다. 구글에서 찾고, 또 찾고, 이거 적용시켜보고 저거 적용시켜가면서 정말 끈질긴 노력을 했다. 그 결과 결국 해냈다. 어딘가 조잡한 태그지만, 그래도 최대한 깔끔하게 정리하기 위해서 노력했고, 지금은 아주 잘 굴러가는 그런 배너광고가 되었다.

 

기본적으로 티에디션에서 제공하는 슬라이드 기능이 있다. 하지만 이 기능은 일단 가장 치명적인게 반응형이 아니다. 모바일에서 보면 이미지가 왕창 짤린다. 그래서 가독성이 확 떨어진다. 슬라이드는 되지만 이미지가 정상적으로 보이지 않으니 무용지물이었다. 이전까지 성공했던 내용은, 이미지 슬라이드는 되는데 링크를 걸 수 없는 상태였다. 이상하게도 <a>태그만 들어가면 슬라이드 되는 이미지들이 모두 세로로 펼쳐지는 오류가 있었다. 이 문제를 해결하는게 가장 시급했다.

 

답은 자바스크립트 호출이었는데 이 부분을 손 쉽게 해결하는 글이 있어서 그분의 블로그에서 참고하여 다시한번 차근차근 작성해보겠다. 역시 뭐든지 하겠다는 마음 하나면 못할게 없다고 생각한다.

 

http://live8.tistory.com/126

간단한 html 이미지 슬라이드

 

우선 준비물이 필요하다. 당연히 배너로 활용할 이미지 파일이 필요하다. 넉넉하게 5개 정도 준비하자. 기왕이면 파일 크기가 똑같으면 좋다. 사이즈는 커도 상관 없다. 반응형 이미지로 넣을 것이라서 말이다. 너무 크지만 않으면 된다. 준비된 이미지들은 관리자 > HTML/CSS 편집으로 가셔서 파일보관함에 모두 업로드 해 두고 이미지 주소를 기억해둔다.

 

이미지 주소는 크롬 기준으로 설명을 드린다면 보시는 것 처럼 파일명 위에서 마우스 오른쪽 버튼을 눌러서 링크 주소 복사를 눌러주면 된다.

 

먼저 해줘야 할 것은 HTML에 태그를 작성해줘야 한다. 위의 태그를 똑같이 써주자. 기본적으로 구글이나 기타 HTML 관련된 사이트 중에서 쓸만한 제이쿼리 (Jquery) 소스를 무료로 제공해주는 곳이 있다. 그곳의 소스를 이용하는 원리다. 이렇게 스크립트 두 문장만 추가해주면 된다.

 

그리고 이제 티스토리 티에디션 상단에 넣을 코드를 작업해야 한다. 위의 코드가 바로 적용시킬 태그다. 빨간색 줄은 왼쪽에서 오른쪽으로 슬라이드 효과를 주는 태그이며, 파란색 줄은 마우스가 올라갔을 때, 슬라이드가 일시 정지되는 태그다. 그리고 녹색 줄은 슬라이드 타이머다. 5000은 약 5초마다 슬라이드가 된다는 뜻이다. 숫자가 높아질수록 느려진다. 슬라이드 속도도 임의로 수정 가능하다. data-cycle-speed="200" 이 태그만 넣으면 된다. 숫자가 낮을수록 슬라이드 순간속도가 빨라진다. 200도 사실 순식간에 슬라이드가 되는 속도다.

 

검정색 동그라미에는 클릭했을 때, 이동할 URL주소를 넣어주면 된다. 그리고 별표에는 이미지 주소를 넣어주면 된다. 현재 이 태그는 총 세개의 이미지를 무한 슬라이드 하는 코드다. 따라서 이미지를 더 늘리고 싶다면, <img onclick="javascript:newin=window.open('●');" class="btn" src="★"> 이 부분을 더 늘려주면 된다. 이미지의 갯수에 맞게 일치시켜준다.

 

여기까지 하시면 이제 정상적으로 슬라이드 기능이 작동된다. 하지만 왠지 이미지가 가운데 정렬이 되는 것 같지 않다. 기왕이면 가운데 정렬 보다는 현재 보이는 해당 <DIV> 영역 전체에 이미지를 꽉 채워서 이질감을 줄이고 싶다. 그래서 크기가 큰 이미지를 사용하면 좋은게, 이미지가 늘어나지 않으니 깨져보일 염려가 없어서다. 아무튼 이번에는 이미지도 채워보고 페이저도 보여지게 해보도록 하겠다.

 

참고로 페이저란 위에 표시된 부분처럼 현재 이미지의 개수도 알 수 있고, 해당 표시된 부분을 누르면 이미지가 이동되는 기능이다. 요즘 왠만한 홈페이지에서는 이런 기능이 다 있다.

 

위의 모든 스타일 태그를 CSS에 넣어준다.

 

그리고 원본에서 이 부분을 수정했다. 기존 스타일은 고정형인데, 가로 부분을 모두 위처럼 100%로 수정하면 반응형으로 변한다. 이렇게 해 두면 다양한 기기에서 접속해서 보여질 때에도 이미지가 깨짐 없고 짤림이 없이 정상 사이즈로 보여지게 된다. 이렇게 해서 이제 광고 형태의 반응형 이미지 슬라이드 배너를 수동으로 완성할 수 있게 되었다. 끝.