배너 스킨 - 7초마다 배너가 바뀌는 스킨

똑띠님의 위젯을 제가 필요한 기능에 맞추어 조금 수정했습니다. ( 테스트 브라우저 : IE6,7,8, Safari, Firefox, Chrome )
미리보기 : http://www.young-hwa.es.kr/zbxe/

수정된 부분은 1. 배너가 정해진 수보다 많을 경우, 다음 칸으로 나뉘어지고 버튼으로 이전, 다음 배너를 볼 수 있습니다. 2. 7초가 지나면 자동으로 다음 배너가 보이게 됩니다.

< 설치방법 >
* 파일 올리기
1. 똑띠님의 배너 위젯을 먼저 설치합니다. (위치 : zbxe폴더/widgets/banner로 파일 올리기)
http://www.zeroboard.com/zbxe_pds_prog_widget/16686387

2. 이 스킨을 설치합니다. (위치 : zbxe폴더/widgets/banner/skins/findwind로 올리기)
findwind.zip



* 게시판 설정
- 확장변수를 5번까지 아래와 같이 수정합니다.

* 위젯 설치
- 수정된 게시판을 선택한 후 아래와 비슷하게 수정하면 됩니다.
- 썸네일 생성방법 : 특별한 경우가 아니면 ratio로 설정하는게...
- 이미지 가로, 세로크기 : 본인의 필요에 따라 적당하게 하시면 됩니다.
- 가로 이미지 수 : 이 숫자가 넘으면 페이지가 나뉘게 됩니다. (4-6개 정도가 적당)
- 세로 이미지 수 : 최대 몇 페이지까지 사용할 것인지 정합니다.
                          10으로 정해도 배너 수가 적으면 1-2페이지까지 밖에 생성되지 않습니다.
- 상단이미지~꾸밈이미지 : 수정하면서 필요없어서 지운 부분입니다. (설정하지 않으셔도 됩니다.)

- 레이아웃에 작업할 때는 아래와 같은 코드를 레이아웃 파일에 넣으시면 됩니다.

<img class="zbxe_widget_output" widget="banner" skin="findwind" widget_cache="5" banner_widgetwidth="740" mid_list="main_banner" thumbnail_type="ratio" thumbnail_width="150" thumbnail_height="40" cols_list_count="5" rows_list_count="10" widget_sequence="371734" />

* 게시판 글 쓰기
- 제목 : 배너의 툴팁으로 나타납니다.
- 연결URL : 홈페이지 주소
- 링크 대상 : _blank는 새창, _self는 현재창
- 경계선 굵기 : 배너 자체에 테두리가 없으면 픽셀을 입력하면 테두리가 생깁니다.
- 이미지 줄이기 : 가로 세로 픽셀을 줄입니다.
- 테두리 여백 : 위, 오른쪽, 아래, 왼쪽 순으로 숫자를 기입합니다. ( 입력형태 : 0 5px 0 5px; )
       ☞ 참고 : http://blog.naver.com/ehomebuild?Redirect=Log&logNo=150014781402
- 파일 첨부 : 첫번째 이미지를 이용하여 배너를 만듭니다.

* 배너 넘어가는 시간을 수정하려면...
- list.html 의 21번째 줄을 보면
onmouseout="fnb=window.setInterval('toggleBanner('next')', 7000);" 에서
빨간 부분을 원하는 초 x 1000에 해당하는 수로 수정해주시고

- js/banner.js 에서
fnb=window.setInterval("toggleBanner('next')", 7000); 에서
빨간 부분을 같은 방법으로 수정하면 됩니다.

잘 사용하세요.

findwind.zip (6.6KB)(50)