웹마스터 팁

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

이것은 많은 분들이 보셨을 거라 봅니다. 제로보드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 ) 없어서 혹시나 궁금해하는 분이 한분이라도 계실까해서 이렇게
몇자 ? 아니 길게적었네요.. 그럼 일주일을 시작하는 오늘 좋은 일만 가득하시기를...