비포 애프터 이미지 슬라이더 만들기

1. 이미지 드래거블 슬라이더 결과

 

이 코딩 예제는 두 개의 이미지를 직관적으로 비교할 수 있는 '이미지 드래거블 슬라이더'입니다.
사용자는 가운데 슬라이더 버튼을 드래그하여 왼쪽 이미지와 오른쪽 이미지를 비교하면서 두 이미지의 변화 또는 차이를 쉽게 확인할 수 있습니다.
이 기능을 사용할 수 있는 예로는 성형외과에서 수술 전 상태와 수술 후 상태를 비교할 수 있는 이미지 갤러리를 만들고자 할 때 유용한 기능이라고 할 수 있습니다.

 

 

2. 필요한 이미지

이 예제를 구현하기 위해서 아래의 이미지와 같이 비교할 2장의 이미지가 필요합니다.

즉, Before에 해당하는 사진과 After에 해당하는 사진을 만들어 주시면 됩니다.

이때 신경 써야 할 사항은 가능한 한 이미지의 가로세로를 동일한 사이즈로 만들어 주시고, 해상도도 유사하게 조정해 주시기 바랍니다.

 

이전 상태를 표시하는 이미지

비포 이미지

 

현재 상태를 표시하는 이미지

 

 

3. 사전에 임포트 해야 하는 파일

기능을 구현하기 위해서 반드시 사전에 임포트해야하는 파일이 있습니다.

아래의 JS파일 및 CSS파일들을 순서에 맞게 임포트하시기 바랍니다. 

(로컬에 저장해서 import하든지, CDN 주소로 import하든 상관없습니다.)

(1) 안정화 버전의 jQuery파일을 임포트 합니다. 

해당 기능에서 가장 중요한 jquery-ui.touch-punch.min.js 플러그인은 jquery와 jquery-ui 기반으로 개발 되었기 때문에

제일 먼저 jquery를 임포트해야 합니다.

 

(2) 안정화 버전의 jquery-ui.css 파일을 임포트 합니다.

jquery-ui.css는 jquery-ui.js와 셋트이므로 함께 임포트해야 합니다.

 

 

(3) 안정화 버전의 jquery-ui.js 파일을 임포트 합니다.

위에서 설명한대로 jquery-ui.touch-punch.js 플러그인을 위해서 반드시 임포트 해야 합니다.

그리고 반드시 jquery.js 파일 다음에 임포트해야 합니다.

 

(4) '드래그&드롭'기능을 편리하게 사용할 수 있도록 만든 플러그인 jquery-ui.touch-punch.js파일을 임포트 합니다.

이미지 중앙에 위치한 '슬라이더 버튼'을 드래그&드롭을 간단하게 구현할 수 있도록 만든 javascript 플러그인 입니다.

 

(5) 마지막으로 해당 기능을 구현하기 위한 스타일을 정의한 css 파일을 임포트 합니다.

해당 기능을 구현을 위해 HTML DOM구조를 구성하고 CSS 스타일을 정의 합시다.

<script src="./js/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<link rel="stylesheet" href="./css/before_after.css">

4. HTML DOM구조

'이미지 드래거블 슬라이더'를 구현하기 위해서 아래의 소스코드와 같이 되도록 심플한 구조로 DOM 구조를 구성 합니다.
비록 간단한 구조이지만, 각 요소가 어떻게 구성되어 있는지 미리 잘 이해하고 CSS 및 javascript 코딩 작업을 하시기 바랍니다.

<div class="imgdiv">
	<div class="imgbox_out imgbox_a">
		<img src="./img/car_after.jpg" class="img_a">
		<div class="imgbox_in imgbox_b">
			<img src="./img/car_before.jpg" class="img_b">
		</div>
		<div class="imgbar">
			<img src="./img/before_after_arrow.png" class="img_arrow">
		</div>
	</div>
</div>

• imgdiv : 화면 가운데 위치시킬 전체 구조를 감싸는 부모 요소입니다.
• imgbox_out : 두 개의 이미지 요소와 슬라이더 버튼을 감싸는 요소입니다.
• imgbox_in : Before에 해당하는 이미지를 감싸는 요소입니다.
• imgbar : 초기에는 화면 가운데 세로로 세워진 바와 중앙에 버튼으로 구성된 요소입니다.

 

5. CSS 스타일 소스

슬라이드 기능을 구현하기 전에 DOM 구조의 레이아웃과 각 DOM요소에 맞게 스타일을 정의하는 작업을 해야 합니다.

가능한 javascript의 코딩작업을 최소화 한다는 생각으로 CSS 스타일에서 구현할 수 있는 최대의 기능을 구현해 놓는게 좋습니다.

@charset "UTF-8";
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    background:#333;
}
.imgdiv{
    max-width:700px;
    width:100%;
    overflow:hidden;
}
.imgdiv .imgbox_a{
    position:relative;
}
.imgdiv .imgbox_a img{
    width:100%;
}
.imgdiv .imgbox_a .imgbox_b{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:hidden;
    width:50%;
    z-index:2;
}
.imgdiv .imgbox_a .imgbox_b img{
    height:100%;
    width:auto;
}
.imgdiv .imgbar{
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    height:100%;
    border-left:2px solid #fff;
    border-right:2px solid #fff;
    z-index:3;
    cursor:pointer;
}
.imgdiv .imgbar .img_arrow{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:40px;
    height:40px;
}

6. 자바스크립트(JQuery) 코드소스

• draggable 함수는 jquery-ui에 정의된 함수 이며, 메인 타겟팅이 되는 DOM요소를 $('.imgbar')를 연결 시켜 주어야 합니다.
• axis : 'x' 는 x축(가로방향)으로만 드래그 해야 한다는 의미입니다.
• var out_wd : 2개의 이미지와 슬라이드바, 슬라이드 버튼을 감싸는 요소의 전체 너비를 저장하는 변수입니다.
• var line_wd : 이미지 위에서 슬라이드 하는 바가 차지하는 너비를 저장하는 변수입니다.
• var delta : out_wd와 line_wd의 너비차이를 저장하는 변수입니다.
• var in_box : Before에 해당하는 요소를 저장하는 변수입니다.
• 슬라이드 버튼이 가장 왼쪽 끝 이하로 넘어 가지 않도록 조건을 서술해야 합니다.
• 슬라이드 버늩이 가장 오른쪽 끝 이상으로 넘어 가지 않도록 조선을 서술해야 합니다.
• 마지막으로 화면의 사이즈가 변경됨에 따라 이미지를 감싸는 박스의 너비를 조절하고, 슬라이더 버튼을 가운데 위치하도록 해야 합니다.

$('.imgbar').draggable({
    axis:'x', // x 축으로만 드래그 가능
    drag:function(event,ui){
        var out_wd = $('.imgbox_out').width();
        var line_wd = $('.imgbar').width();
        var delta = out_wd - line_wd; // 이미지 박스와 라인바의 차이값
        var in_box = $('.imgbox_in');
        
        if(ui.position.left < 0){ // 좌측으로 넘어가지 못하게
            ui.position.left = 0;
        }else if(ui.position.left > delta){ // 우측으로 넘어가지 못하게
            ui.position.left = delta;
        }
        in_box.css('width',ui.position.left);
    }
});

$(window).resize(function(){
    $('.imgbar').css('left','50%');
    $('.imgbox_in').css('width','50%');
});