웹마스터 팁
라이트박스(facebox) 적용하기
2008.11.02 12:02
안녕하세요.. 퍼플F 라고 합니다.
이 게시물은.. 팁이라기 보다는 제 홈피에 적용되어 있는 라이트 박스(facebox) 를 보고 적용법을 물어보시는
분들이 계셔서 짧게 나마 팁란에 적도록 하겠습니다.
그림1) 적용된 페이지 (로그인 부분)
그림2) 적용된 페이지 (최근 이미지 클릭 시 나오는 부분)
적용법
1. 다운로드
-> http://famspam.com/facebox 이 페이지에 접속 후 jQuery 와 Facebox 1.2 를 다운로드 받습니다.
----------------------------------
해당 페이지에 써져 있듯이 Images, Divs, Ajaxes 형태로 적용가능하며 편하신 방법을 하용하시면 됩니다.
(저는 편의상 Divs 를 많이 사용하게 되더군요)
----------------------------------
2. 설치
->
2-1> ftp 프로그램으로(파일질라 추천) 에 다운로드 받은 facebox 폴더와 jquery 를 업로드합니다.
2-2> (편하신 방법을 사용하면 되지만) 저의 경우 해당 레이아웃 스킨에 '해더 스크립트' 부분에
아래와 같은 스크립트를 삽입하였습니다.
-----------------------------------
<link href="http://도메인/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://도메인/js/jquery-1.2.4a.js" type="text/javascript"></script>
<script src="http://도메인/facebox/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>
------------------------------------
3. 페이지에 적용
divs 사용시
<div id="info" style="display:none;">
내용
</div>
링크걸기
<a href="#info" rel="facebox">텍스트</a>
이렇게 하시면 됩니다.
댓글 7
-
참악동
2008.11.04 02:55
고맙습니다. -
푸른솔
2008.11.05 10:24
홈피가이쁨니다. 레이아웃을 공개해주시면 더욱 고맙겠습니다. -
퍼플F
2008.11.06 17:27
공개해 드리고 싶긴 한데요.. 소스가 너무 지져분해서(..한번 정리할려다 포기;;;)
나중에 시간날때 깔끔한거 하나 배포할 계획은 있습니다. -
kanasii
2008.11.17 00:58
꼭 사용하고 싶은 기능인데... 전 잘 적용이 안되네요... ^_^;;;
1.우선 퍼플님 말씀처럼 facebox와 jquery-1.2.6.min 다운받어 서버에 업했습니다.
jquery-1.2.6.min는 해당 홈페이지에서 최신버전? 다운 받았는데... 맞나요? ^_^;; 퍼플님껀 1.2.4a...던데..2-1.서버에 업 했습니다.
2-2.사용중인 레이아웃의 layout.html 파일 맨 윗부분 1번줄에 스크립트 삽입하였습니다. (스크립트 경로는 제 홈에 맞게 정확히 수정하였고요...)
3.그리고 알려주신대로 divs & 링크 모두 다 해보았는데... 안되네요... ㅠㅠ
위의 과정중 틀린거나... 빠진게 있나요? ^_____^;;
-
강수호291
2008.11.17 10:00
저도 위의 kanasil님과 마찬가진데요
3. 페이지에 적용 어떻게 하는건가요?? -
YJ
2009.09.14 21:42
오오~~일단 선리플입니다. 정말 유용한 정보네요. 이번 XE 공식 사이트의 로그인 방법을 어떻게 하나 궁금했었는데..일단 한국 들어가면 시도해 보겠습니다. -
코넬리
2009.12.15 15:41
저도 아직 시도는 안해봤는데, 해당 레이아웃 스킨의 '해더 스크립트' 부분에 스크립트를 삽입하였느냐,
아니면, layout.html 파일에 삽입하였느냐가 차이점이 아닐까 싶네요.
layout.html은 템플릿문법을 이용하기 때문에, 여기에 스크립트를 삽입하면 정상적으로 동작하지 않는 것으로 알고 있습니다.
XE관리자에서 [사이트설정]-[레이아웃]-[레이아웃 설정]에 보시면 [헤더 스크립트]라고 있는데,
아마도 거기에 스크립트를 넣어야 정상동작하나 봅니다. 저도 kanasii님같은 문제를 겪으면서
이 문제의 해결책을 찾고자 애를 많이 썼는데 아마도 이게 답이 아닐까 싶네요. 저도 직접 시험해보고 결과 알려드릴께요
제목 | 글쓴이 | 날짜 |
---|---|---|
windows Live writer로 게시글 쓰기 [3] | tindrum | 2008.04.29 |
초보자를 위한 제로보드에 애드온 프로그램 설치하기 강좌 | 이하늘690 | 2010.02.23 |
수정,삭제 버튼을 "이 게시물을.."에 넣기 [1] | hangoon | 2008.04.16 |
쉬운 설치 - unexpected error 메시지창이 뜰 때 [9] | 현의느낌 | 2010.01.30 |
로그인페이지와 새페이지 연결법 [2] | poko | 2010.01.30 |
회원에게 만기일 주기(1원짜리 팁) [17] | 까오천사 | 2007.11.12 |
제로보드(zbxe) 설치 후 로그인 안되는 문제. [3] | sophistlv.myid.net | 2008.10.15 |
ZBXE용 모니위키 연동 플러그인 소스 [4] | 베니 | 2007.10.17 |
2차 메뉴가 없을 경우 왼쪽 메뉴 숨기기 [5] | 엔시아- | 2009.07.16 |
경험에 의지한 로그인 풀림현상 처리 | 남국 | 2007.10.06 |
(수정) ZBXE 설치/로그인 등이 안될 때 시도해보세요. (MySQL DB) | 핑크플로이드 | 2007.08.20 |
라이트박스(facebox) 적용하기 [7] | 퍼플F | 2008.11.02 |
ZB4로 현재까지 사이트를 운영하는분들 긴급 상황안내 (???) [2] | DuRi | 2009.11.20 |
메인 레이아웃에서 로그인이 안보이는 경우. | 김찬회425 | 2009.12.06 |
요청하신 모듈을 찾을 수 없습니다 문제해결 방법 [2] | 반도체맨 | 2009.04.09 |
"권한이 없습니다." Alert 창 대신 로그인 화면으로 이동시키기 [4] | Slur | 2008.09.22 |
사이트 이전팁( files 폴더) [6] | 샤이니라 | 2009.01.28 |
로그인 문제 및 첨부파일 안올라가는 문제 해결책(세션 문제일 경우..) [6] | 이홍석295 | 2008.08.20 |
방명록 스킨을 통한 글 작성시 임시저장 가능케 하기(수정) | 라르게덴 | 2008.07.08 |
왼쪽메뉴줄이고 오른쪽에 박스만들어 내용쉽게넣기 [15] | plruto | 2008.02.07 |