머드초보의 블로그

한번 만들어보려고 했는데요... 그냥 우연히 Canvas를 이용한 Coverflow 라이브러리가 있을 것 같아서 검색해보니 역시 있네요.
근데 얘좀 잘못 만들어진 듯-_- Canvas를 여러개 만들어놓고 돌리고 있네요-_- Canvas 하나면 될 듯한데...




사이트
http://jcoverflow.sourceforge.net/

사용법은 파일 다운로드해서 압축풀면, coverflow.js랑 coverflow.css넣고,
[code]<div id="coverflowHolder">
    <div id="__cvfl-coverflow-holder" style="display:none">
        <div id="__cvfl-coverflow">
            <div id="__cvfl-coverflow-wrapper"></div>
            <div id="smallerPreview"></div>
            <div id="__cvfl-coverflow-label"></div>
        </div>
    </div>
</div>[/code]
이런 div를 html에 넣고,
[code]Coverflow.init([리스트배열], {createLabel, onSelectCenter, refill});[/code]
이런식으로 호출해주면 되네요.
저기 리스트배열에는
[{src, labelObject}] 형식으로 src는 이미지 주소를 넣고, labelObject는 선택되었을 때 넣을 데이터를 넣으면 나중에 보여줄 때 편리하게 하는 것 같습니다.
그리고, 함수정의로 createLabel은 현재위치의 coverflow의 정보를 보여주기 위한 html을 리턴하는 함수입니다.
onSelectCenter는 선택된 것 클릭했을 때 액션이고,refill은 잘 모르겠습니다-_-

여러가지 기능이 더 있는 것 같은데, 몬가 문서정리가 하나도 안되어있는 것 같습니다.

아! 주의사항!
coverflow.js파일을 상단에 임포트하려고할 때 window.addEventListener가 undefined가 나와서, 로드가 완료된 뒤 처리하도록 바꿔야해요. 휠이 먹히도록 하는 부분인 듯 한데,
728~729줄을
[code]window.onload = function(){
    두줄넣기
}
[/code]
요렇게 처리!

이걸 응용해서만든! 가수별 앨범목록!
http://mudchobo.tomeii.com/jcoverflow/


안드로이드에서도 잘 되네요. 근데, 약간 느리고, 문제가 있긴 하지만, 일단 잘됩니다(응?)...