띠베너 플러그인

퍼블리싱 작업을 하다보면 요즘 꼭 한번씩은 들어가는 것 같아서, 플러그인으로 한번 만들어보았다.
노랑풍선에 있는 베너형태 보다는 조금더 개량을 해보았다

다운로드 아래 파일 

todaypopup.min.js

• 플러그인: https://github.com/kimminchul/todayPopup/
• 샘플: ./public/view/index.html 파일을 실행 해보면 샘플을 볼 수 있다.
• 플러그인 위치: ./public/assets/js/todaypopup.min.js

샘플

노랑풍선웹사이트 탑 띠베너

플러그인 import

먼저 todaypopup.min.js 파일을 불러온다. 그전에 먼저 제이쿼리가 있어야 동작한다. jQuery 버전은 1.4 이상에서 동작 한다.

기본 사용

그리고 팝업이 들어갈 엘리먼트를 선택하여 아래와 같이 플러그인을 호출해 준다

        
    
    

   
        $('.todaypopup').popupEvent();
  
    

기본적으로 이정도 만 작성해줘 플러그인이 호출되어 원하는 위치에 띠베너가 생성되는 것을 볼 수 있다.

플러그인 옵션사용

띠베너가 생성 될시 몇가지 옵션을 설정 할 수 있다. 옵션 사용 방법 아래와 같이 정보를 입력할 수 있다

        


    $('.todaypopup').popupEvent({
        popupinfo:[
            {
                imgUrl:'http://via.placeholder.com/1920x100',
                alt:'sample text',
                link:'http://www.naver.com',
                target:'_self',
                bgColor:'#CCC'
            }
        ]
    });

이미지 여러게 셋팅시

        

    $('.todaypopup').popupEvent({
        popupinfo:[
            {
                imgUrl:'http://via.placeholder.com/1920x100',
                alt:'sample text',
                link:'http://www.naver.com',
                target:'_self',
                bgColor:'#CCC'
            },{
                imgUrl:'http://via.placeholder.com/1920x100',
                alt:'sample text',
                link:'http://www.naver.com',
                target:'_self',
                bgColor:'#CCC'
            },{
                imgUrl:'http://via.placeholder.com/1920x100',
                alt:'sample text',
                link:'http://www.naver.com',
                target:'_self',
                bgColor:'#CCC'
            }
        ]
    });

위와 같이 객체 형태로 옵션정보를 추가 할 수있다 popupinfo 배열은 첫번째 베너에 대한 정보를 기입할 수 있다

기본적으로 한개의 배너만 작성 하였다면 베너는 롤링 되지 않는다. 기본적으로 오늘하루 열지 않음 버튼을 가지고 있다.

베너 옵션정보

• popupinfo

  array

  안에는 객체 형태로 정보를 넣을 수 있다. 아래는 객채형태의 추가 정보 이다.

• imgUrl

  strong

  배너로 사용될 이미지 위치 경로

• alt

  strong

  베너 alt 정보

• link

  strong

  베너의 이동 링크 위치

• target

  strong

  링크의 타겟 윈도우 오픈형식 기본 html상의 target 속성을 사용 할 수 있다.

• bgColor

  strong

  이미지의 오버 영역에 대하여 백그라운드 색상을 설정 할 수 있다.

• speed

  int

  베너가 여러게 있을 경우 인터벌 되는 속도를 정할 수 있다 기본 2000으로 정해져 있다.

• idx

  int

  초기 활성화 될 베너를 정할 수 있다.

• random

  true,false

  베너가 여러게 있을경우 시작될 베너의 순서를 랜덤으로 한다

• extendingElement

  strong

  베너를 제외한 다음 컨텐츠 요소의 포지션등 위치를 고정하는 값이 있을 경우 기본지정 되 어있는 header 의 높리르 지정하여 팝업이 닫혓을 때 지정된 엘리먼트의 높이 만큼 위치를 정리할 수 있다.

• Height

  int

  위치 상 팝업의 시작 위치를 지정 할 수 있다.

• dotColor

  strong

  css 의 색상 표기 방법으로 색상을 입력하여 도트색상을 변경할 수 있다

• dotColorBg

  strong

  css 의 색상 표기 방법으로 색상을 입력하여 도트 백그라운드 색상을 을 변경할 수 있다

• btnTitle

  strong

  오늘 하루 열지 않음 글씨를 변경할 수 있다.

추가옵션 사용시

        

  
        $('.todaypopup').popupEvent({
            idx:0,
            speed:2000,
            random:false,
            extendingElement:'header',
            Height:'0px',
            popHeight:'100px',
            interval:true,
            popupinfo:[
                {
                    imgUrl:'http://via.placeholder.com/1920x100',
                    alt:'sample text',
                    link:'http://www.naver.com',
                    target:'_self',
                    bgColor:'#CCC'
                }
            ],
            btnTitle:'오늘하루열지않음'
        });