bigbanner.js

작은 사이즈의 배너를 크게 확장시켜주는 기능을 구현하는 플러그인

샘플영상

다운로드

bigbanner.js V1.0 다운로드

설치/사용법

<style>
    #bigbanner1{width:300px; height:150px; position:relative; overflow:hidden;}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/bigbanner.js"></script>

<script>
    $(function(){
        $('#bigbanner1').bigbanner({
            btn:{path:'btnbig.png'}
        });
    });
</script>

<body>
    <div id="bigbanner1">
        <a href="#"><img src="small.jpg"></a>
        <img src="" class="btnbig">
        <div class="areabig">
            <a href="#">
                <img src="big.jpg">
            </a>
        </div>
    </div>
</body> 

 

1. 제이쿼리 설치가 필요 합니다.

 

 

 

 

<style>
    #bigbanner1{width:300px; height:150px; position:relative; overflow:hidden;}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/bigbanner.js"></script>

<script>
    $(function(){
        $('#bigbanner1').bigbanner({
            btn:{path:'btnbig.png'}
        });
    });
</script>

<body>
    <div id="bigbanner1">
        <a href="#"><img src="small.jpg"></a>
        <img src="" class="btnbig">
        <div class="areabig">
            <a href="#">
                <img src="big.jpg">
            </a>
        </div>
    </div>
</body> 

 

2. 다운로드 받은 플러그인을 설치 합니다.

 

 

 

 

<style>
    #bigbanner1{width:300px; height:150px; position:relative; overflow:hidden;}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/bigbanner.js"></script>

<script>
    $(function(){
        $('#bigbanner1').bigbanner({
            btn:{path:'btnbig.png'}
        });
    });
</script>

<body>
    <div id="bigbanner1">
        <a href="#"><img src="small.jpg"></a>
        <img src="" class="btnbig">
        <div class="areabig">
            <a href="#">
                <img src="big.jpg">
            </a>
        </div>
    </div>

</body> 

 

3. 기본 레이아웃을 작성 합니다.

 

 

 

 

<style>
    #bigbanner1{width:300px; height:150px; position:relative; overflow:hidden;}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/bigbanner.js"></script>

<script>
    $(function(){
        $('#bigbanner1').bigbanner({
            btn:{path:'btnbig.png'}
        });

    });
</script>

<body>
    <div id="bigbanner1">
        <a href="#"><img src="small.jpg"></a>
        <img src="" class="btnbig">
        <div class="areabig">
            <a href="#">
                <img src="big.jpg">
            </a>
        </div>
    </div>
</body> 

 

4. 자동실행 될수 있도록 함수를 작성 합니다.

 

 

 

 

 $('#bigbanner1').bigbanner({
            btn:{path:'btnbig.png'} //이미지 경로를 입력 합니다.
  });

 

5. 옵션에 큰 이미지 경로를 추가 합니다.

 

 

 

 

* 플러그인 설치는 지원하지는 않습니다.
위로

잠시만 기다려주세요.