테스트 사이트 - 개발 중인 베타 버전입니다

이미지미리보기시 라이트박스플러스 사용하기

· 17년 전 · 2494 · 1
출처 홈페이지 : http://serennz.sakura.ne.jp/toybox/lightbox/
다운로드 : http://chancein.com/svc/lightbox.tar.gz
예제페이지 : http://chancein.com/svc/lightbox/
현재페이지 소스보기 : http://chancein.com/svc/source_viewer.php?s=http%3A%2F%2Fchancein.com%2Fsvc%2Flightbox
[사용방법]
1. 다운로드받은 압축파일의 압축을 푼다.
2. 사용할 서버에 업로드 시킨다.
3. 포함된 index.html을 웹에서 실행시켜본다.
4. js/lightbox.js 와 css/lightbox.css 를 에디터로 열어 찾기로 .gif와 .png를 찾아서
이미지 경로를 자신에게 맞게 수정한다.
5. 포함된 index.html을 웹에서 다시 실행시켜본다.
6. 다른 페이지에 적용할 경우는 다음의 소스를 헤더에 삽입한다.
<link rel="stylesheet" href="라이트박스경로/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="라이트박스경로/js/spica.js"></script>
<script type="text/javascript" src="라이트박스경로/js/lightbox.js"></script>
7. a 태그의 href속성의 값에는 원본이미지 경로, rel속성의 값에는 lightbox 나 lightbox1를 넣는다.
8. rel속성값 lightbox 는 단독으로 보여줄때 사용, lightbox1 은 여러 이미지를 연동하여 보여줄 경우 사용
9. img 태그에 tilte 속성을 사용하여 이미지 타이틀을 주면 이미지보기 화면 하단에 타이틀이 표시된다.
[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 1개

고맙습니다! 꾸벅(- -)(__) b

게시글 목록

번호 제목
12201
12200
29244
12196
29243
12188
12184
29231
29230
12181
기타 툴팁 2
29229
12179
12177
12173
29226
12172
25007
12171
12170
29225
12167
12166
12157
12154
12153
25002
12151
29224
12148
29223
12142
29217
12141
12136
12132
12130
29216
29215
12126
12124
12122
12120
12111
25001
25000
24999
24998
24997
24994
24985
12109
12105
12104
12096
12094
12091
12090
12079
29211
12072
29210
12070
29207
12067
12061
29204
12058
12057
12056
24984
12055
12053
12051
MySQL apm 1
12050
MySQL LOG
12049
12048
기타 dhcp
12047
12046
12045
12044
12043
JavaScript vi
12042
기타 Nis/NFS
12041
12040
JavaScript
12039
기타 Process
12038
12037
12036
12035
JavaScript Quota
12034
MySQL LOG
12033
12032
12031
JavaScript IPCHAINS
12028
12026
12025
12020
12017
12015
12013