- 롤링 배너 위젯 -

 

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

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

 

 

 

K-108.jpg

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

 

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

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

 

 

- 특징

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

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

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

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

 

 

- 설정방법

 

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

 

K-106.jpg

K-107.jpg

 

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번 예제 

K-109.jpg

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 - 초기 버전

 

Atachment
첨부
  • ?
    마우스 오버시에 화살표가 나오도록 하는게 좋겠군요...
  • ? profile
    엇. 괜찮은 방법이네요. 다음 버전에 개선에 보겠습니다.
  • profile
    나오자마자 바로 구입해서 적용해보았는데 제 사이트에는 나오지가 않네요 ㅠㅠ;
    무슨 문제일까나요 ㅠㅠ;
  • profile profile
    사이트 주소 알려주시면 도움 드릴게요.
  • profile
    아직 다운 못했지만 활용도가 좋을듯 싶네요. 화살표는 날아라님 의견에 동의합니다.
    마우스 오버시 나오는게 더 좋을것 같아요.
  • profile profile
    다음 버전에 고려해보고 있습니다. ^^
  • profile
    수평으로 동작하는 옵션도 있으면 굉장하겠네요.
  • profile profile
    수평으로 동작하는 것은 슬라이더 위젯들이 많아서 수직으로만 움직이는 방식을 채택했습니다.
  • profile profile
    제대로 동작하는 것을 못봐서요. 리소스도 굉장히 심하게 잡아먹구요.
    공개된 것중 수평으로 동작하는게 있나요 ?
  • profile profile
    카메론 슬라이더 위젯을 잘 활용하면 될것 같습니다.
    bx슬라이더는 xe타운에서 사용하는 배너 위젯의 기본 소스로 같습니다.
  • profile
    xe타운 배너 보고 참 예쁘다 생각 들었는데 포인트 마켓에서도 판매하는줄은 몰랐네요! 감사히 잘 쓰겠습니다 ^^
  • profile
    최고에요.
  • ?
    감사합니다.
  • ?
    엄청 이뻐보이네요.. ㅋㅋ 포인트 모이면 꼭 사도록 하겠습니다!
  • profile
    우와 감사합니다앗!!!!!
  • ?
    만들줄은 모르고 쓸줄만 알아서 미안네요. 잘 쓰겠습니다. 감사합니다^^
  • ?
    감사합니다 좋네요 ㅎㅎ
  • profile
    여러 프로그램을 제작하는 방송국의 특성상
    각 프로그램의 개별 홈페이지를 소개하기 아주 좋은 위젯이라고 생각됩니다.
  • ?
    멋진 위젯스킨 감사합니다. ^^
    사이트 디자인을 업그레이드 할 수 있는 위젯!!
    이런 위젯이 많이 나오면 정말 좋겠어요 ^^
  • profile
    몰르고 재구매했지만..ㅜㅜ 감사합니다~
  • profile
    감사합니다 잘쓰겠습니다 ^^
  • profile
    selected_widget의 값이 올바르지 않습니다. 이말이 무슨말인지요 ??
  • profile
    1.8.46 버젼에서 작동을 안하는거같습니다 확인 부탁드립니다.
    selected_widget의 값이 올바르지 않습니다.
    라는 창이 뜨네요
  • profile profile
    한번 확인해볼게요. 라이믹스 1.8.46에서는 잘 동작하니 XE 말씀하시는 거겠죠?
  • profile profile
    방금 XE에서 테스트 해봤는데 잘 됩니다.
    혹시 다른 위젯들으 잘 작동하는지요?
  • profile profile
    다른위젯은 작동을 잘하고있습니다.
    유독 이 위젯만 사용이 안되는걸로 나오네요 ..
    이유를 몰라 ㅠㅠ 사용을 못하고있습니닷 ㅠ
    http://www.jangsada.com 입니다.
  • profile profile
    혹시 설치 폴더에
    /widgets/rolling_banner 안에 또 rolling_banner 배너라는 디렉터리가 들어가있지 않나요?
  • profile profile
    아닙니다 정상적적으로 설치가되었습니다.
  • profile profile
    혹시 폴더명 뒤에 V0.1 도 붙어있지는 않나요?
  • profile
    감사합니다. 잘쓰겠습니다.
  • profile
    감사합니다!
  • profile
    라이믹스 사용중에 있는데...
    위젯이 세로로 나와야하는데 가로로 나오네요...
    그리고 마우스 올려두 계속 움직이고...
    화살표도 안나오고... 뭔가 문제가 있는 듯합니다..ㅠㅠ
  • profile profile
    사이트 주소 와 위젯 패이지 위치 좀 알려주세요.
  • ?
    위젯이 안나오내요 모가 문제 인가요!
  • ? profile
    업로드한 폴더를 확인해보세요.
    /widgets/rolling_banner 안에 또 다른 폴더가 있거나
    /widgets/rolling_banner1_v0.1 으로 업로드 되었나 확인해보세요.
  • profile
    구매하여 사용해보려고 적용중입니다.
    혹시 새창띄우기말고 페이지 이동으로 하려면 어떻게 해야될까요?
  • profile profile
    파일안에 skins/default/banners.html 파일의 21번째 라인 중에서
    target=“_blank” 부분을 삭제하시면 됩니다.
  • profile profile
    감사합니다 ^^ 좋은 자료네요
  • ?
    감사합니다. ㅎ
  • profile
    드디어샀습니다. 잘사용할깨요
  • ?
    감사합니다~ 잘쓰겠습니다~ 너무 좋네요
  • ?
    잘 쓰겠습니다 감사합니다 ^^
  • profile
    잘쓰겠습니다.
  • ?
    굳굳
  • ?
    구매했습니다.
  • profile
    selected_widget의 값이 올바르지 않습니다. 이말이 무슨말인지요 ??
  • profile profile
    /widgets/rolling_banner 폴더 안에 또 rolling_banner 라는 폴더가 있는 건 아닌지 확인해보세요.
  • profile profile
    폴더 안에 폴더 없이 제대로 설치 했는데
    위젯 실행시 저렇게 되네요ㅠ_ㅠ
  • profile profile
    보통 위젯 폴더안에 잘못설치하면 그런 메세지 나타납니다.
    혹시 여유가 되시면 studyforus.com 에 스샷과 함께 질문남겨주시면 답변 도와드리겠습니다.
  • profile
    가로로 출력하는 옵션도 있으심 좋을 것 같습니다. ^^
    감사합니다!
  • profile profile
    가로로 출력하는 것은 슬라이드 위젯들이 많아서 고려하지 않았습니다!
  • profile profile
    아 그렇군요, 답변 감사드려요 ^^
    한 번에 가로로 5~7개 정도 출력되면서 롤링되는 위젯이 없어보여서요,
    제가 못 찾는건가요? ^^
  • profile profile
    슬라이더 위젯으로 못 찾으셨으면 갤러리 위젯 같은 거를 한번 찾아보세요!
    가로로 나오는 것들은 자료가 많아 아예 고려를 하지 않았어요. ㅠㅠ
  • profile profile
    네네 답변 감사드려요 ^____^
  • profile
    담아갑니다!
  • profile
    감사합니다.
  • profile
    정말 감사히 쓰고 있습니다.
    궁금한 점 1개가 .
    사이즈를 400x40 으로 맞춰 배너 이용 중인데
    왜 화질 저하가 크게 발생할까요?
    게시판 썸네일 원본 이미지 px는 2400x240 입니다.
  • profile profile
    너무 이미지 파일의 크기가 많이 차이나는 경우에는 그런 문제가 있을 수 있습니다.
    원본 이미지가 설정한 사이즈의 두배 정도가 제일 적당합니다.
  • profile
    와 좋네요
  • ?

    화면 캡처 2023-08-25 182244.png

    화면 캡처 2023-08-25 182315.png

     

     

    위와같이 그림파일이 깨져서 안나오는데 이건 뭐때문에 그럴까요?

  • ? profile
    직접 파일이 업로드 된 게 맞나요?
    이 정보 만으로는 설정을 어떻게 했는지 알 수가 없어서 설명드리기 어렵네요.
  • profile ?
    네 당연히 파일을 직접 업로드 했습니다.