웹마스터 팁
라이트박스(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
제목 | 글쓴이 | 날짜 |
---|---|---|
게시판 스킨 분석 [2] | 이온디 | 2014.01.28 |
회원도 모듈별 적용된 포인트 보게하는 방법. [11] | :DunhillBoy | 2014.02.01 |
1.5 -> 1.7 업글중 백지상태 부분!! | una_nampyeon | 2014.02.03 |
ux를 편리하게 하기 위한 css 팁 | 두랄루민 | 2014.02.03 |
[XE 1.7] 스팸필터 설정이 안되는 경우 해결 방법 [3] | 퍼니엑스이 | 2014.02.03 |
모바일레이아웃을 사용하되 모바일 게시판 스킨을 선택하지 않고 일반 게시판 스킨을 사용하는 방법 [4] | sejin7940 | 2014.02.04 |
관리자화면 상단의 업데이트 해야할 항목 안내문구 안 나오게 하는 방법 [1] | sejin7940 | 2014.02.04 |
[도로명주소 krzip] 1.7.4 이전 버전들에 이용하기 [3] | XE플스 | 2014.02.06 |
XE 1.7.4 새로운 우편번호 체계에서 나머지주소 관련 사용실수 방지방법입니다 [1] | sejin7940 | 2014.02.07 |
통합검색할때 회원별 권한에 따라 내용 보여주기 | garnecia | 2014.02.07 |
1.7.4 업데이트후 글쓰기 에러가 나신다면... [2] | 맞장 | 2014.02.07 |
누리고쇼핑몰에서 구주소에 새주소적용하기 [14] | garnecia | 2014.02.08 |
1.7.4 - 페이지나 게시판 생성 후 설정화면에 가면 '사이트기본스킨사용' 이 적용되지 않는 버그 해결법 | sejin7940 | 2014.02.08 |
스윙브라우저 유저분들 필독. [10] | KSG2013 | 2014.02.08 |
XE를 사용중 백지현상이 있을경우 체크해볼 요소 [2] | jambox | 2014.02.08 |
그룹아이콘 모바일에서 표시하기 | 잉카러부 | 2014.02.09 |
중복레코드 검색 및 삭제 | ByteCMC | 2014.02.10 |
웹뷰 개발시geocode(구글)활용법
![]() | 웹빌드 | 2014.02.10 |
모바일 사진 자동 회전 적용방법 [8] | 더뿌 | 2014.02.11 |
마우스드래그금지 | 레치에스 | 2014.02.11 |