CMS솔루션마켓, 이온디 - 워드프레스, 라이믹스, 카페24, 그누보드, 엑셀

스토어

콘텐츠 수 11

롤링 배너 위젯

  • 분류 위젯
  • 상품카테고리 위젯 
  • 상태 제품소개 
  • 소개 XE 타운 우측 하단에 보면 배너들이 움직이는 위젯 보이시죠? 그것과 비슷하게 만든 롤링배너 위젯입니다. XE타운에서 사용중인 롤링 배너 위젯은 CONORY님이 공개를 하지 않는다고 하신만큼 비슷하게 구현해 봤습니다. 
  • 설치경로 /widgets/rolling_banner 
  • 버전 0.1 
  • 라이센스 XPM 
  • 개발자 사과맛스타 
  • 구매 페이지 https://xetown.com/point_contents/539257?page=2 
XPM(재배포 금지) 라이선스는 XE타운 포인트마켓 전용 라이선스로 타사이트에서는 재배포가 금지되어있어 자료 소개 용도로 작성된 게시물입니다. 실제 다운로드는 XE타운에서 다운로드 가능합니다.
파일 이름 용량 잔여일 잔여횟수 상태 다운로드
rolling_banner_v0.1.zip 50KB - - - 다운로드

- 롤링 배너 위젯 -

 

XE 타운 우측 하단에 보면 배너들이 움직이는 위젯 보이시죠?

그것과 비슷하게 만든 롤링배너 위젯입니다. XE타운에서 사용중인 롤링 배너 위젯은 CONORY님이 공개를 하지 않는다고 하신만큼 비슷하게 구현해 봤습니다. 

 

 

 


<배너 이미지는 XE타운에 있는 배너 이미지를 무단으로 사용했습니다. 문제될 시 말씀해주세요. 삭제하겠습니다.>

 

여러 배너들을 효율적으로 보여주는데 도움이 됩니다.

제 비루한 실력으로 인해 오류들이 발생할 수 있습니다. 그리고 그 오류를 해결하는데에 상당히 긴 시간이 걸릴수도 있음을 먼저 알려드립니다.

 

 

- 특징

여러 배너 이미지를 효율적인 공간에 보여지도록 할 수 있습니다.

해당 배너를 클릭하면 지정한 사이트로 이동할 수 있습니다.

배너에 대한 제목과 설명을 추가할 수 있습니다.

보여질 배너의 수, 속도 등 상세하게 설정할 수 있습니다.

 

 

- 설정방법

 

먼저, 해당 배너들과 연결될 게시판을 하나 신설합니다.

 

 

1. 썸네일 생성 방법

크롭(crop)과 비율유지(ratio) 중에서 선택가능합니다.

 

2. 순서 섞기 :

"예"를 선택한 경우 위젯이 불러온 전체 배너 수에서 랜덤하게 표시를 합니다.

"아니오"를 선택한 경우 최근 글 부터 차례대로 보여집니다.

 

3. 마우스 오버시 스크롤 멈춤 / 이전, 다음버튼 보이기

배너의 이전, 다음 버튼을 보이게 하면 마우스를 오버해도 스크롤이 됩니다.

마우스 오버시에 스크롤이 멈추게 하면 배너의 이전, 다음 버튼이 보이지 않습니다.

 

4. 이미지 너비 / 높이

생성할 배너 이미지의 너비와 높이를 구합니다.

 

5. 한번에 보여질 배너 수

한 페이지에 보여질 배너 수를 결정합니다.

 

6. 총 배너 수

불러올 총 배너의 수를 결정합니다. 설정된 값보다 게시판에서 불러올 배너 이미지의 수가 적은 경우에는 설정된 값 만큼 다시 반복합니다.

 

예) 설정값 10 / 실제 게시글 수 7

배너가 7개는 정상적으로 보여지고 나머지 3개는 7개중 반복되어서 보여집니다.

 

7. 자동 스크롤 속도

가만히 놔두면 저절로 배너가 스크롤 되는데 몇 초후에 스크롤 될지 결정합니다. (단위 : 밀리초)

 

8. 스크롤 속도

다음 배너가 스크롤 될 때, 얼마나 빨리 스크롤 되는지 결정합니다.

 

9. 배너 상하 여백

배너의 간격을 결정합니다. 위, 아래에 동시에 적용되므로 실제 적용시 간격이 설정값에 두배가 된다고 생각해야 합니다.

 

10. 마우스 휠로 스크롤

위젯 위에 마우스를 오버한 후 마우스 휠을 돌리면 다음 배너가 보여집니다. 단, 휠을 어느방향으로 돌려도 다음 배너만 보여집니다.

 

11. 링크사용

배너를 클릭시 이동하도록 할지 결정합니다.

 

12. 링크 주소가 있는 사용자 정의 이름

게시판에서 사용자 정의로 등록할 때, 링크 주소가 쓰여질 사용자 정의 이름(첫글자 영문)을 입력하면 됩니다. 기본값은 url 입니다. 형식은 한줄 입력칸형태로 괜찮으나, http:// 나 https:// 가 들어가야 하므로 URL형식을 추천합니다.

 

13. 배너 제목 사용자 정의 이름

img 태그에 title로 사용될 이름이 들어갈 사용자 정의 이름 입니다. 기본값은 title 입니다. 형식은 한줄 입력칸 형태로 해주세요.

 

14. 배너 설명 사용자 정의 이름

img 태그에 img 태그에 title로 사용될 설명이 들어갈 사용자 정의 이름 입니다. 기본값은 desc 입니다. 형식은 한줄 입력칸 형태로 해주세요.

 

13, 14번 예제 

15. 배너 태두리 두께

숫자만 입력하세요. 단위는 px 입니다.

 

 

간편 사용방법

1. 새 게시판 하나 신설합니다.

2. 사용자 정의에서 3가지를 추가하고, 사용자 정의 이름을 다음과 같이 합니다.

url (링크 주소 사용)

title (img 태그에서 title 표시)

desc (img 태그 title에 들어갈 보조 내용)

3. 게시판에 글을 등록합니다.

    단, 배너는 각 게시글에 직접 그림 파일을 업로드 해야 정상적으로 작동합니다.

 

 

 

- 미리보기

사용 전 테스트용 미리보기 입니다. 

http://test.studyforus.com/index.php?mid=page_wIQO39

 

게시판에 별도로 이미지를 올려서 테스트 해보세요. (비회원 업로드 가능)

그리고, 미리보기 사이트는 예고없이 작동이 안될 수도 있습니다.

 

 

- 버전

V 0.1 - 초기 버전

 

옵션 검색
List of Articles
번호 분류 제목 평점 포인트
공지 상품 커스터마이징 건에 대해서
공지 이온디샵에서 개발자/디자이너 여러분의 컨텐츠를 판매하세요.
공지 포인트샵 오픈마켓입니다. 구매를 원할 경우 포인트를 충전해주세요.
11 스킨 라이믹스XE Auction 경매모듈스킨 별도문의 800P
10 스킨 xe_official 로그인위젯스킨 무료
9 스킨 윤삼님의 프로필 위젯의 스킨 무료
8 스킨 회원 간편 검색 위젯 심플 스킨 무료
7 스킨 Fourstrap Alert Lite (알림센터Lite 스킨) 55P
5 스킨 이온디 샘 2P
4 스킨 이온디 플러스라인 2P
3 스킨 이온디 고한나 2P
2 스킨 이온디 글로시박스 2P
1 스킨 이온디 플러스 위젯스타일 10P