슬라이드 갤러리 플러그인

웨딩스튜디오의 홈페이지를 만들면서 새로운 갤러리 형태를 만들어야 했어요.

그래서 탄생한 jquery plugin 인데요.

레이어 팝업 형태로 나타나 마우스 위치에 따라 자동으로 천천히 스크롤 되게 되어 있죠.

적용된 예제 영상을 일단 한번 보실게요.

ie11,edge,chrome 에서 테스트된 플러그인이구요.

갤러리를 구현하기 위해서는 워크식스의 PLUGIN SHARE 에서 slideGallery.js 를 찾아 다운로드 받아 사용하시면 되요.

사용을 위한 설치는 다음과 같아요.

<script src="http://okhi1.iptime.org/skin/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>

slideGallery.js 다운 받아 서버에 넣었다면 해당경로를 그렇지 않다면 위 처럼 써주어 연결 합니다.

<script src="http://okhi1.iptime.org/skin/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>

스타일은 필수요소만 넣어 두었으니 필요한 부분은 직접 추가로 작성 해주세요.

<script src="http://okhi1.iptime.org/skin/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>

html은 다음과 같아요.

<script src="http://okhi1.iptime.org/skin/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>

다음과 같이 스크립트를 작성해주면 위 예제와 같은 갤러리를 구현 하실수 있으세요.

옵션에 대한 내용은 녹색으로 표시된 부분을 참조하세요.

개발의뢰는 http://work6.kr 을 이용해주세요.