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

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

· 17년 전 · 2493 · 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

게시글 목록

번호 제목
12452
40
25015
12447
12446
12445
JavaScript PLSQL이란
29296
12440
기타 메뉴 4
12438
12437
29294
35
32
12434
12433
12432
29293
29
12431
12428
12421
29292
12411
12402
27
29290
12400
24
12397
12396
21
12391
12390
18
16
12377
12373
13
9
12372
12371
12363
1
13432
12362
12360
12355
25014
29287
12352
12349
29279
12344
12340
12335
12333
12331
29273
12330
12329
12328
12324
12323
12318
12316
12313
12310
12309
12307
12303
12296
12291
12280
12277
12275
29272
12274
12260
12252
12250
12248
29267
12245
29266
29261
12239
12238
29251
12236
12231
12228
12214
12211
12210
29248
29247
25010
12208
12207
12202