웹마스터 팁
라이트박스(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
제목 | 글쓴이 | 날짜 |
---|---|---|
회원아이디 클릭시 메일보내기 기능 숨기기 [9] | 똑디 | 2008.12.18 |
XE와 별도 프로그램 연동시 세션공유 [15] | 똑디 | 2008.12.12 |
XE 로그인이 안될때 확인해 보세요. [7] | 똑디 | 2008.12.11 |
서브홈페이지 만들기 [5] | 가리사니 | 2008.12.09 |
플래닛XE - Me2day 연동시 참고사항입니다. | 파산팩토리 | 2008.12.07 |
1.1.1로 업데이트시 참고하세요(1.0.3에서 업뎉했습니다) [4] | 아이스마일 | 2008.12.04 |
1.1.1 패치후 게시판에서 파일첨부 레이어 겹침현상 문제 [1] | 늘미소 | 2008.12.01 |
[초간단]회원팝업메뉴에 메뉴넣기 [1] | Pw-NET | 2008.11.30 |
글작성시 초기 기본 카테고리 선택 하기 [7] | 똑디 | 2008.11.29 |
홈페이지의 아이콘(favicon)이 어느날 갑자기 사라졌을때... [1] | 크르르 | 2008.11.28 |
본문내용을 강재로 중앙정렬시키는 꽁수
[4]
![]() | 크르르 | 2008.11.28 |
[설문조사] 메인페이지에 넣기와 효율적으로 관리하기
[6]
![]() | 빨간발 | 2008.11.27 |
1.1.1 패치후에 관리자 모드 접속시 에러 해결입니다.
[7]
![]() | kim donggyu | 2008.11.25 |
1.1.0 업데이트 로그인문제관련 [6] | 그냥뛰어 | 2008.11.24 |
에디터 본문 및 댓글 입력 글자크기 줄이기 [5] | HIKARU | 2008.11.24 |
약관 동의 후 가입하기
[2]
![]() | findwind | 2008.11.24 |
1.1.0으로 패치하신분들 이미 모듈이 있습니다 오류 수정
[1]
![]() | 김도훈449 | 2008.11.23 |
이미지 정보표시(EXIF) 영문을 한글로
[6]
![]() | Diver | 2008.11.23 |
사랑비Bgm 플레이기 설치하고 제어하기
[5]
![]() | 팔공산 | 2008.11.22 |
XpressEngine 공식 매뉴얼(한글 파일) #2
[6]
![]() | 자이제로 | 2008.11.21 |