웹마스터 팁
라이트박스(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
제목 | 글쓴이 | 날짜 |
---|---|---|
글쓰기를 클릭하면 띄워지는 테두리 없는 예쁜 팝업 띄우기 core. 1.7.4
[4]
![]() | 마음의빈자리 | 2014.02.11 |
2014년 2월 12일부터 갑자기 사이트(관리자 페이지)가 깨지는 경우. | 새하나모 | 2014.02.12 |
이메일인증 Error 한방정리 참고해보세요. [4] | 애드바이러스 | 2014.02.12 |
css 배경이미지 정리 | devdevpia | 2014.02.13 |
GNB 메뉴를 쉽게 만드는 jQuery plugin [2] | 김개발 | 2014.02.14 |
css 가운데정렬 완벽정리! | 돼지코구뇽 | 2014.02.14 |
"이 페이지 나가기" 경고창이 뜨는 사이트의 경우 [23] | 투씨 | 2014.02.15 |
카카오스토리 링크
[14]
![]() | 맞장 | 2014.02.15 |
우분투 12.04 LTS Nginx 최신버전 설치하기
[1]
![]() | 도라미 | 2014.02.17 |
1.7.4 용 youtube, vimeo, ted 썸네일 적용 document.item.php 수정방법
[9]
![]() | 남자인간 | 2014.02.17 |
1.7.4 버전용 한글 lang.xml 파일
[5]
![]() | 투씨 | 2014.02.18 |
IEXPLORER 버젼 호환성 강제 맞추기 | davidis | 2014.02.18 |
누리고 쇼핑몰 모바일버전에서 백지화현상 수정하는 팁 [5] | garnecia | 2014.02.19 |
XE 1.7.4 "이메일 주소로 계정 찾기" 오류 해결 방법 | 꿈돌리 | 2014.02.20 |
위젯 게시판 선택시 다중선택하기 !
[2]
![]() | GomSang | 2014.02.21 |
게시판 목록에서 새창 띄워서 다른 형태 나오게 하기 [3] | foret | 2014.02.23 |
게시판 목록의 new 아이콘 바꾸기 [1] | foret | 2014.02.23 |
스케치북5 모바일 댓글 작성시 엔터를 쳤을 때 <br /> 코드 뜨는 문제 해결 [7] | oryan | 2014.02.23 |
코어 수정 없이 스킨 수정만으로 게시판 목록에 유튜브,비메오 썸네일 출력 [2] | foret | 2014.02.23 |
부트스트랩 레이아웃 제작시 메뉴 코딩팁 | 웹빌드 | 2014.02.23 |