slideGallery.js

슬라이드 갤러리를 구현하기 위해서 사용, 마우스 오버를 통한 슬라이드 구현

샘플영상

다운로드

slideGallery.js 다운로드

설치/사용법

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

<style>
#gallery .bg
{
    overflow:hidden;
}
#gallery .bg img
{
    position:relative;
    left:0px;
}
#gallery .button
{
    background:transparent;
    position:absolute;
    width:30%;
    top:0;
}
#gallery .right
{
    right:0;
}
</style>

<script>
    $(function(){

        $('#gallery img').slideGallery({
            'left_area':$('#gallery .left'),  
            'right_area':$('#gallery .right'),
            'speed':5                          
        });
    });
</script>

<section id="gallery">
    <div class="bg">
        <img src="img/gallery.png">   //갤러리에서 동작시킬 이미지를 합친 이미지
        <div class="button right"></div>
        <div class="button left"></div>
    </div>
</section>

 

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

 

 

 

 

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

<style>
#gallery .bg
{
    overflow:hidden;
}
#gallery .bg img
{
    position:relative;
    left:0px;
}
#gallery .button
{
    background:transparent;
    position:absolute;
    width:30%;
    top:0;
}
#gallery .right
{
    right:0;
}
</style>

<script>
    $(function(){

        $('#gallery img').slideGallery({
            'left_area':$('#gallery .left'),   
            'right_area':$('#gallery .right'),
            'speed':5                         
        });
    });
</script>

<section id="gallery">
    <div class="bg">
        <img src="img/gallery.png">   //갤러리에서 동작시킬 이미지를 합친 이미지
        <div class="button right"></div>
        <div class="button left"></div>
    </div>
</section>

 

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

 

 

 

 

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

<style>
#gallery .bg
{
    overflow:hidden;
}
#gallery .bg img
{
    position:relative;
    left:0px;
}
#gallery .button
{
    background:transparent;
    position:absolute;
    width:30%;
    top:0;
}
#gallery .right
{
    right:0;
}

</style>

<script>
    $(function(){

        $('#gallery img').slideGallery({
            'left_area':$('#gallery .left'),  
            'right_area':$('#gallery .right'), 
            'speed':5                         
        });
    });
</script>

<section id="gallery">
    <div class="bg">
        <img src="img/gallery.png">   //갤러리에서 동작시킬 이미지를 합친 이미지
        <div class="button right"></div>
        <div class="button left"></div>
    </div>
</section>

 

3. html 태그 및 스타일을 작성 합니다.

 

 

 

 

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

<style>
#gallery .bg
{
    overflow:hidden;
}
#gallery .bg img
{
    position:relative;
    left:0px;
}
#gallery .button
{
    background:transparent;
    position:absolute;
    width:30%;
    top:0;
}
#gallery .right
{
    right:0;
}
</style>

<script>
    $(function(){

        $('#gallery img').slideGallery({
            'left_area':$('#gallery .left'),
  
            'right_area':$('#gallery .right'),
            'speed':5                          
        });
    });
</script>

<section id="gallery">
    <div class="bg">
        <img src="img/gallery.png">   //갤러리에서 동작시킬 이미지를 합친 이미지
        <div class="button right"></div>
        <div class="button left"></div>
    </div>
</section>

 

4. 페이지 실행시 바로 동작할 수 있도록 함수를 작성 합니다.

 

 

 

 

        $('#gallery img').slideGallery({
            'left_area':$('#gallery .left'),   //마우스가 위치할 경우 갤러리를 좌측으로 이동 시킬 엘리먼트
            'right_area':$('#gallery .right'), //마우스가 위치할 경우 갤러리를 우측으로 이동 시킬 엘리먼트
            'speed':5                          //이동속도를 정합니다. (추천 속도 = 5)
        }); 

 

5. 옵션을 설정 합니다.

 

 

 

 





! 플러그인 설치 및 수정은 견적문의 해주세요.