웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
Light box 이용하기..
2007.03.12 08:43
안녕하세요..
이번에 검색을 해보니 '자스'란에 라이트박스이야기가 없는 것 같아서 이렇게 미흡하지만 그 내용을 올려봅니다..
이것은 많은 분들이 보셨을 거라 봅니다. 제로보드5버전에서도 사용된것 같던데.. 이미지 클릭시
배경이 어두워지고 이미지가 가운데 이미지가 뜨는효과를 보여주는데...
이번에 게시판 만들면서 적용해보앗습니다.
첫번째링크는 회원사진 클릭시 적용하였으며 기본적인 형태입니다. 게시물에 들어가서 회원사진 클릭하면 됩니다.
적용 : http://www.leejinsoo.net/category_bbs02/list.php?board=category_bbs02&page=1&src_name=&src_value=
참고사이트 : http://www.huddletogether.com/projects/lightbox/
두번째는 v 2.02 이며 소스가 좀 복잡하고 위에보다 더 이쁜? 효과를 내는데... 사용법은 오히려 더 쉬운 것 같네요..
위에것 하고 해서인지 그런 느낌이.. ^^
리스트에서 이미지클릭후 보여지게 되면 마우스를 우측에 대면 다음 이미지가 있을 경우 넥스트 이전이면 prev라는 이미지가 나타나게 되어
닫지 않고 바로 다음 이미지를 볼 수 있습니다.... 이것역시 적용방법은 참고사이트에 나와있으며, 게시판등에 적용하려면 while문안에 적용해야합니다. ^^
적용 : http://www.leejinsoo.net/category_bbs02/list.php?board=category_bbs02&page=1&src_name=&src_value=
참고사이트 : http://www.huddletogether.com/projects/lightbox2/
마지막 세번ㅉㅒ 라이트박스플러스입니다.. 이건 그냥 귀찮아서 제 게시판에 적용은 안했습니다.
다시 적용했네요..^^
http://www.leejinsoo.net/category_bbs02_5/list.php?board=&page=&id=
샘플을 보자면 링크는
참고사이트 http://serennz.sakura.ne.jp/toybox/lightbox/?en 입니다..
모두 영문 페이지인데.. 저도 영어를 못하지만... 그냥 다운 받고 스타일시트 및 자바스크립트 상단에 불러와서 하면 됩니다.
특히 v2.02는 다운을 받으면 index 파일이 있는데.. 그 파일안에 적용한 내용이 모두 있어 이해하기 쉬울 거라 생각됩니다...
라이트플러스는 간지님의 제로보드5스타일의 게시판에서 적용된것을 본적이 있네요... 각 참고사이트 링크에 가셔서 이미지 클릭하면
라이트박스가 무엇인지 대충 감을 잡으실 거라 생각되네요 또 테터툴즈 및워드 프레스용 플러그인이 있다고 하니.. 참고하시고
플러스의 장점은
* zoom 지원
* 휠을 이용한 줌 지원
* 자동 리사이징
* 줌 모드에서 마우스를 이용한 이미지 스크롤링
* 전체 페이지 보기 (Overall view) 지원
등이 있어 어느 정도 사용자 입장에서 사용하기 편리할 듯 싶습니다..
다 아는냉용인데 뭐하러 적엇냐는 분도 계시겟지만... 검색했는데.. ( light / lightbox ) 없어서 혹시나 궁금해하는 분이 한분이라도 계실까해서 이렇게
몇자 ? 아니 길게적었네요.. 그럼 일주일을 시작하는 오늘 좋은 일만 가득하시기를...
이번에 검색을 해보니 '자스'란에 라이트박스이야기가 없는 것 같아서 이렇게 미흡하지만 그 내용을 올려봅니다..
이것은 많은 분들이 보셨을 거라 봅니다. 제로보드5버전에서도 사용된것 같던데.. 이미지 클릭시
배경이 어두워지고 이미지가 가운데 이미지가 뜨는효과를 보여주는데...
이번에 게시판 만들면서 적용해보앗습니다.
첫번째링크는 회원사진 클릭시 적용하였으며 기본적인 형태입니다. 게시물에 들어가서 회원사진 클릭하면 됩니다.
적용 : http://www.leejinsoo.net/category_bbs02/list.php?board=category_bbs02&page=1&src_name=&src_value=
참고사이트 : http://www.huddletogether.com/projects/lightbox/
두번째는 v 2.02 이며 소스가 좀 복잡하고 위에보다 더 이쁜? 효과를 내는데... 사용법은 오히려 더 쉬운 것 같네요..
위에것 하고 해서인지 그런 느낌이.. ^^
리스트에서 이미지클릭후 보여지게 되면 마우스를 우측에 대면 다음 이미지가 있을 경우 넥스트 이전이면 prev라는 이미지가 나타나게 되어
닫지 않고 바로 다음 이미지를 볼 수 있습니다.... 이것역시 적용방법은 참고사이트에 나와있으며, 게시판등에 적용하려면 while문안에 적용해야합니다. ^^
적용 : http://www.leejinsoo.net/category_bbs02/list.php?board=category_bbs02&page=1&src_name=&src_value=
참고사이트 : http://www.huddletogether.com/projects/lightbox2/
마지막 세번ㅉㅒ 라이트박스플러스입니다.. 이건 그냥 귀찮아서 제 게시판에 적용은 안했습니다.
다시 적용했네요..^^
http://www.leejinsoo.net/category_bbs02_5/list.php?board=&page=&id=
샘플을 보자면 링크는
참고사이트 http://serennz.sakura.ne.jp/toybox/lightbox/?en 입니다..
모두 영문 페이지인데.. 저도 영어를 못하지만... 그냥 다운 받고 스타일시트 및 자바스크립트 상단에 불러와서 하면 됩니다.
특히 v2.02는 다운을 받으면 index 파일이 있는데.. 그 파일안에 적용한 내용이 모두 있어 이해하기 쉬울 거라 생각됩니다...
라이트플러스는 간지님의 제로보드5스타일의 게시판에서 적용된것을 본적이 있네요... 각 참고사이트 링크에 가셔서 이미지 클릭하면
라이트박스가 무엇인지 대충 감을 잡으실 거라 생각되네요 또 테터툴즈 및워드 프레스용 플러그인이 있다고 하니.. 참고하시고
플러스의 장점은
* zoom 지원
* 휠을 이용한 줌 지원
* 자동 리사이징
* 줌 모드에서 마우스를 이용한 이미지 스크롤링
* 전체 페이지 보기 (Overall view) 지원
등이 있어 어느 정도 사용자 입장에서 사용하기 편리할 듯 싶습니다..
다 아는냉용인데 뭐하러 적엇냐는 분도 계시겟지만... 검색했는데.. ( light / lightbox ) 없어서 혹시나 궁금해하는 분이 한분이라도 계실까해서 이렇게
몇자 ? 아니 길게적었네요.. 그럼 일주일을 시작하는 오늘 좋은 일만 가득하시기를...
댓글 10
-
김연승
2007.03.22 23:19
-
이진수
2007.03.23 16:23
네..
일단
v 2.02을 다운 받으시고 압축을 풀어줍니다.
그러면 js 와 css images라는 폴더가 생성됩니다. 그렇다면 이 폴더와 적용하려는 페이지(test.html)이 같은 선상에 test라는 폴더안에 있다하면 test.html파일안에 상단에서 스크립트파일과 css파일을 불러옵니다. 즉,
<script src="./js/prototype.js" type="text/javascript"></script>
<script src="./js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="./js/lightbox.js" type="text/javascript"></script>
<link rel=StyleSheet HREF="./css/lightbox.css" type="text/css" media="screen" />
그리고는 적용한 링크에
<a onfocus=blur() href='이미지파일경로' rel='lightbox' title='LEEJINSOO.net'>파일명</a>과 같이 링크를 걸어주면
새창으로뜰때 적용되는것이구요... 연속으로 이미지를 보여주고 싶다면 (즉, next prev를 쓰려면) 링크뒤에 붙이는 rel에
<a onfocus=blur() href='' rel='lightbox[roadtrip]' title='LEEJINSOO.net'>파일명</a> 이렇게 추가해주면 됩니다.
라이트박스플러스역시 같은 방식이구요.. 대신 라이트박스는 상단에서 파일불러올때 css 하나랑 스크립트 하나만 불러오면 될거예요
위에 링크에 보면 중간에 예제가 있으니 보시면 알것 같네요... -
김연승
2007.03.23 17:10
답변 감사드립니다.^^
참고로 제로보드4를 사용중인데... 갤러리 폴더에 적용을 시킬려고 하는데 어떻게 하나요?
이것두 좀 부탁드릴께요^^ -
이진수
2007.03.24 00:09
일단 적용한 스킨을 받아서 소스를 보시는것도 괜찮을 듯 싶네요.. 혹시 스킨 만드실 줄 아시나요 ? 그러면 list_main에 잘 넣으면 될텐데..
음... 만약 그게 안되신다면 라이트박스 플러스가 적용된 스킨을 받아사용하기는 것이... 스킨자료실 가셔서 간지님이신가 ? 해서..
제로보드5스타일로 만드신 스킨이 있습니다. 거기에 라이트박스플러스 적용된것을 본적이 있는데... 그거 사용하시고.. 스킨파일 열어보면
lightboxplus라는 폴도가 있을 겁니다.. list_main파일 열어보시고 어떻게 적용되었는지 보시는것도 공부하시기에 괜찮을 것 같습니다. -
김연승
2007.03.24 18:25
찾아서 봐야 겠네요^^
무작정 질문보다는 연구하는 맘을 가져야 겠습니다.
답변 감사드리고 주말 잘 보내세요~ -
바람처럼.
2007.04.01 15:46
이진수님의 자료소개를 보고 저도 공부차원에서 nzeo_ver4_bbs 스킨을 수정해서 라이트박스를 적용해 보았습니다.
사진도 없는 참고용 갤러리 게시판입니다만 한번 보실분은
http://inote.byus.net/zbxe/?mid=z4gallery -
이진수
2007.04.01 16:07
바람처럼님 잘 적용하셨네요 ^^ v2.o.... 이미지에 타이틀값 "바람처럼" 주면 더 좋아요 ㅋㅋ -
낭만홀리님
2007.08.24 15:49
zbxe 에 쓸 수 있는 것인가요?
필요한데 방법을 모르겠군하 -_-;; -
이진수954
2007.08.24 23:11
제 웹계정이 xe를 지원하지 않아 어떤 구조인지 모르겠지만.... 이곳 공식게시판에서 이미지 클릭시 라이트박스와 비슷하게 나타나던데요..... xe 일반 게시판에서 기본으로 지원하는 것 같습니다..... 이곳 공식게시판에서 이미지같은거 클릭해보세요.... 비슷한 효과로 나타납니다...
-
바람처럼.
2007.10.01 12:06
물론 xe에서도 lightbox 사용 가능합니다.
참고용 갤러리 게시판입니다만 한번 보실분은
http://inote.byus.net/zbxe/picture
최근게시물에서도 가능합니다
맨아래쪽 갤러리를 참고하십시오
http://inote.byus.net/zbxe/
제목 | 글쓴이 | 날짜 |
---|---|---|
동적 테이블 (행추가, 특정행 삭제) | Juny. | 2008.02.20 |
자신의 홈페이지에 (검색,사전,로또,주식) 통합버전을 넣어보자. [3] | Rising.kr | 2008.01.21 |
자신의 홈피에 통합 검색 순위 (검색어, 음악, 영화, 도서)를 달아보자. [1] | Rising.kr | 2008.01.21 |
자신의 홈피에 날씨를 달아보자. [2] | Rising.kr | 2008.01.21 |
Javascript 달력 - 거트 캘린더 [4] | 강세임 | 2008.01.10 |
간단한 Ajax 메모 [1] | 엔시™ | 2007.12.31 |
프린트소스 인데요.. [1] | 이영훈346 | 2007.12.12 |
배열 활용하기(초급) | 예뜨락 | 2007.12.03 |
링크 클릭시 점선 → 링크, 이미지, form 태그 동시 적용 [2] | 펠릭스 | 2007.11.28 |
스크립트 객체로 AJAX 구현하기 [12] | nextini | 2007.08.20 |
웬 소리가????(하이퍼링크 효과음) [7] | 김민환 | 2007.04.08 |
간단한 검색 창입니다. [3] | sunholic | 2007.03.31 |
자바스크립 동영상 플레이어 2 (네이버 발췌) [4] | 이진수 | 2007.03.28 |
Light box 이용하기.. [10] | 이진수 | 2007.03.12 |
비밀번호 입력해야 해당 페이지 보이기 [3] | 이명우 | 2007.02.28 |
플레쉬 마우스 오버하면└---┘ 이런식으로 나오는 것 자바스크립트로 제어하기 | Sena㏇ | 2007.02.24 |
간단한 덧셈 뺄셈 계산 | 예뜨락 | 2007.02.14 |
슬라이딩 레이어 메뉴!! 메뉴가 상하로 따라다녀요!! [4] | TiZa | 2007.02.03 |
처음 만들어본 자바 스크립트.. 나이 알아 맞추기 [2] | 김동헌 | 2006.12.05 |
로딩 레이어 만들기 [6] | 이진수 | 2006.11.27 |
좀더 자세히 설명해 주실수 없는지 부탁드립니다.
다음 홈페이지 리뉴얼 할때 써먹고 싶네요~
수고하세요~