웹마스터 팁

안녕하세요..
이번에 검색을 해보니 '자스'란에 라이트박스이야기가 없는 것 같아서 이렇게 미흡하지만 그 내용을 올려봅니다..

이것은 많은 분들이 보셨을 거라 봅니다. 제로보드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 ) 없어서 혹시나 궁금해하는 분이 한분이라도 계실까해서 이렇게
몇자 ? 아니 길게적었네요.. 그럼 일주일을 시작하는 오늘 좋은 일만 가득하시기를...
제목 글쓴이 날짜
동적 테이블 (행추가, 특정행 삭제) Juny. 2008.02.20
자신의 홈페이지에 (검색,사전,로또,주식) 통합버전을 넣어보자. [3] Rising.kr 2008.01.21
자신의 홈피에 통합 검색 순위 (검색어, 음악, 영화, 도서)를 달아보자. [1] Rising.kr 2008.01.21
자신의 홈피에 날씨를 달아보자. [2] Rising.kr 2008.01.21
Javascript 달력 - 거트 캘린더 [4] file 강세임 2008.01.10
간단한 Ajax 메모 [1] file 엔시™ 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