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

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

출처 홈페이지 : 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

게시글 목록

번호 제목
13454
29442
13451
13448
13446
13445
13442
13439
13437
13434
13429
13425
13423
13418
13410
13408
13407
13406
29441
13405
13404
13401
13400
13399
13395
13391
29435
13389
13386
13381
13377
13370
13367
13366
13364
13362
29432
29428
13361
13360
13358
13354
13351
29427
13346
13340
13337
13334
13328
13326
13325
13324
13323
29426
13322
13321
13315
29424
13312
29422
25114
13308
13307
13305
13304
25111
29421
13301
13299
13296
13292
13291
13290
13289
13288
13287
13286
13285
13284
29420
13283
13277
13274
13266
13265
13262
13261
13259
13254
13250
29419
13242
13241
13236
13235
29418
29417
13234
13233
13231