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

출처 홈페이지 : 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 속성을 사용하여 이미지 타이틀을 주면 이미지보기 화면 하단에 타이틀이 표시된다.
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 바람부는데로

, , , ,
Response
No Trackback , No Comment
RSS :
http://apmusers.com/tt/dbckdghk/rss/response/83

Trackback URL : 이 글에는 트랙백을 보낼 수 없습니다

« Previous : 1 : ... 33 : 34 : 35 : 36 : 37 : 38 : 39 : 40 : 41 : ... 95 : Next »

블로그 이미지

유창화의 블로그(사진은 10년전 모습)

- 바람부는데로

Archives

Calendar

«   2012/02   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29      

이올린 추천글

Site Stats

Total hits:
235019
Today:
60
Yesterday:
87