25 03 2014

TouchSlider를 사용한 모바일 웹에서, 현재 표시된 이미지를 삭제하는 기능을 넣어야 할 일이 생겼더랜다. 그래서 hidden element를 하나 만들고, 슬라이더 이동 완료시에 현재 표시된 이미지의 키값을 저 hidden element의 value로 넣어주려고 했는데 왠걸… TouchSlider에는 현재 표시되고 있는 이미지가 어떤 이미지인지 확인하거나, 혹은 슬라이더 이동 완료시에 진행할 이벤트 같은걸 지정할 수 없었다.

처음에는 아예 다 웹페이지 자체를 다 뜯어고칠 각오로, 이벤트를 받는 다른 슬라이더 라이브러리를 사용하려고 이것저것을 기웃거려 봤는데, 대부분 제대로 동작하지 않았다(이게 기기를 가리는 것인지, 그냥 동작에 문제가 있는건지는 모르겠다). 그래서, 《에라이, 없으면 내가 끼워넣어서 쓰지》라는 생각으로, 슬라이드 완료시에 실행될 콜백 함수를 지정할 수 있도록 살짝 수정을 했다.

기본적인 사용법은 touchslider.com을 참고하면 되겠고, slideComplete라는 옵션을 추가했다. 이 옵션에 function을 지정하면 이미지 슬라이드가 끝난 뒤에 지정된 함수가 호출된다. 만약 slideComplete 옵션이 지정되지 않거나, function 외에 다른것이 지정되면 슬라이드 끝난 뒤에 아무런 동작도 수행하지 않는다.

$(“#imgSlide”).touchSlider({ slideComplete: func });

콜백 함수는 아래 형태를 따른다.

func(element)

{

// element는 이동 완료 후, 슬라이더에서 현재 표시되고 있는 element (jQuery object가 아님에 유의)

}

아래 링크에서 다운로드할 수 있다.

jquery.touchslider.js

ps. GitHub에 올려보고 싶지만, 어떻게 하는지를 모르겠다 (…)

ps2. pretty하게 code를 보여주는 플러그인을 빨리 설치해야겠다 ;;;

2014년 오와 열 (?) 아샤의 아틀리에 입수