웹마스터 팁
라이트박스(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
제목 | 글쓴이 | 날짜 |
---|---|---|
XE와 별도 프로그램 연동시 세션공유 [15] | 똑디 | 2008.12.12 |
XE 로그인이 안될때 확인해 보세요. [7] | 똑디 | 2008.12.11 |
1.1.0 업데이트 로그인문제관련 [6] | 그냥뛰어 | 2008.11.24 |
일반 페이지에 로그인(세션) 정보 활용하기 [13] | noirzo | 2008.11.07 |
라이트박스(facebox) 적용하기
[7]
![]() | 퍼플F | 2008.11.02 |
FTP프로그램을 이용하지 않고 업로드 하기 [8] | 싱하형 | 2008.10.31 |
외국에서 접속시 로그인 않되는문제 [1] | minams | 2008.10.30 |
플래시 BGM 음악 제로보드에 넣는 방법
![]() | 푸른커튼 | 2008.10.29 |
카페24 계정 사용 중에 제로보드XE 로그인 오류가 날 때 [1] | vltm | 2008.10.24 |
개인 웹서버 백업 및 게시물 등록 날짜 수정 방법
[10]
![]() | eunbini | 2008.10.24 |
제로보드(zbxe) 설치 후 로그인 안되는 문제. [3] | sophistlv.myid.net | 2008.10.15 |
제로보드XE가입 -> 트랙자동가입 기능 | 개돌 | 2008.10.14 |
[권한이 없습니다] 권한에 따른 다른 메시지 출력하기 [10] [1] | 반도체맨 | 2008.10.03 |
VPN 환경에서 제로보드 [4] | superion | 2008.09.26 |
"권한이 없습니다." Alert 창 대신 로그인 화면으로 이동시키기 [4] | Slur | 2008.09.22 |
주소록 구현 (외부 페이지) [17] | CSLab | 2008.09.15 |
게시판 에디터 폰트 글자(글씨)크기 변경하는 법 | 씨에씨에 | 2008.09.12 |
동일서버내 페이지에서 로그인정보 활용하기... [4] | 수로 | 2008.09.06 |
[우클릭 및 드레그 방지법] 및 [방지된 홈페이지 해재법] >0< [7] | 이홍석295 | 2008.09.03 |
라이프팟 연동에서 XML 주소 얻기 | 최재원541 | 2008.08.23 |