티스토리 뷰
아기 이야기가 담긴 블로그를 시작하려고 하니 이것저것 할게 많네요.
예쁜 아기 사진을 블로그에서 예쁘게 보고 싶으시다면 fancyBox 라이브러리를 적용하세요
lightbox 도 있지만 전 좀 더 다양한 기능이 있는 fancyBox가 더 좋네요 ^^
백문이불여일견(百聞不如一見) 이라고 아래 예제를 통해 fancyBox가 어떤 기능을 하는지 직접 확인해 보세요 ^^
단일 이미지
이미지 갤러리
이제 적용해 보고 싶은 마음이 드시나요?
우선 fancyBox는 개인이나 비영리 웹사이트에 대해서는 무료로 사용할 수 있지만 그 외 용도로 사용하시려면 License를 구입하셔야 합니다. (관련 내용 확인)
이제 블로그에 적용해 보도록 하겠습니다.
1. 현재 최신 버전인 v2.1.4를 다운로드 합니다. (다운로드)
위에 링크가 동작을 안하면 fancyBox 공식 홈페이지에서 다운로드 합니다.
2. Tistory 관리자 메뉴 중 HTML/CSS 편집 메뉴에 들어가서 파일업로드 탭을 클릭합니다.
3. 파일 목록 하단의 추가 버튼을 클릭하고 다운받은 fancyBox 파일 중 아래 부분에 선택된 파일과 아래 첨부된 파일을 Tistory 서버에 업로드 합니다. jquery.fancybox.js 파일만 제외하고 전부네요 ^^;;
jquery.fancybox.tistory.js
4. 업로드한 파일에 놓고 오른쪽 버튼을 누르면 메뉴가 나오고 링크 주소 복사를 선택해서 경로를 복사합니다.
5. HTML/CSS 탭을 클릭하여 skin.html 에 아래 내용 붙여넣습니다.
아래 내용 중 경로는 링크 주소 복사를 통해 구한 내용으로 알맞게 수정하시고(그냥 사용하셔도 되지만 제가 파일을 지우거나 변경할 경우 동작을 안하겠죠??), 블로그 사이트 속도 향상을 위해 아래 내용은 body 태그 최하단에 위치 시켜주세요
스킨에 따라서 class명이나 id가 달라 동작을 안할 수 있으니 안되시면 다운 받으신 jquery.fancybox.tistory.js 파일을 알맞게 수정하시거나 어려우신 분들은 해당 Tistory 블로그 주소를 포함하셔서 댓글 남겨주세요 ^^
복사는 마우스 좌측 더블 클릭 하시면 됩니다 ^^
아래 내용은 skin.html 상단 부분에 위치시켜 주세요
6. 사진 제목 폰트를 변경하기 위해서 style.css 파일에 다음 항목을 추가합니다.(선택)
.fancybox-title{font-family:Malgun Gothic, Nanum Gothic, 돋움, Dotum, AppleGothic, sans-serif}
마치며
fancyBox는 이미지 뿐만 아니라 ajax, 동영상 등을 예쁘게 보여주도록 구현할 수 있습니다.
fancyBox 공식 홈페이지를 방문하셔서 다양한 예제를 체험해보세요~!!
기타