JavaScript CoverFlow 2.0 (jCoverFlow)
라이브러리는 이곳에서 다운로드 받습니다.
http://jcoverflow.sourceforge.net/
jCoverFlow_2.0.rar 파일을 다운로드해서 압축풀면, coverflow.js와 coverflow.css이 있습니다.
이런 형식의 html을 원하는 위치에 넣고,
<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>
아래와 같이 자바스크립트에서 호출해주면 됩니다.
Coverflow.init([리스트배열], {createLabel, onSelectCenter, refill});
리스트배열에는
[{src, labelObject}] 형식으로 src는 이미지 주소를 넣고, labelObject는 선택되었을 때 넣을 데이터를 넣으면 나중에 보여줄 때 편리하게 하는 것 같습니다.
그리고, 함수정의로 createLabel은 현재위치의 coverflow의 정보를 보여주기 위한 html을 리턴하는 함수입니다.
onSelectCenter는 선택된 것 클릭했을 때 액션이고, refill은 잘 모르겠습니다.
주의사항은 자바스크립트가 HTML보다 나중에 와야됩니다.
실제 예제에서 보면 다음과 같이 사용합니다.
<SCRIPT type="text/javascript">
if (canvas_compatible)
{
window.onload = function()
{
Coverflow.init([
{src: 'CoverFlows_files/covers/cover1med.jpg',
label: {album: 'Abbey Road', artist: 'The Beatles', url:'http://www.beatles.com/', high:'CoverFlows_files/covers/cover1large.jpg'}},
{src: 'CoverFlows_files/covers/cover2med.jpg',
label: {album: 'Graduation', artist: 'Kanye West', url:'http://www.kanyewest.com', high:'CoverFlows_files/covers/cover2large.jpg'}},
{src: 'CoverFlows_files/covers/cover3med.jpg',
label: {album: 'Circus', artist: 'Britney Spears', url:'http://www.britneyspears.com', high:'CoverFlows_files/covers/cover3large.jpg'}},
{src: 'CoverFlows_files/covers/cover13med.jpg',
label: {album: 'The Fame', artist: 'Lady Gaga', url:'http://www.ladygaga.com', high:'CoverFlows_files/covers/cover13large.jpg'}},
{src: 'CoverFlows_files/covers/cover14med.jpg',
label: {album: 'The Fray', artist: 'The Fray', url:'http://www.thefray.com', high:'CoverFlows_files/covers/cover14large.jpg'}},
{src: 'CoverFlows_files/covers/cover12med.jpg',
label: {album: 'Funhouse', artist: 'Pink', url:'http://www.pinkspage.com', high:'CoverFlows_files/covers/cover12large.jpg'}},
{src: 'CoverFlows_files/covers/cover4med.jpg',
label: {album: '21st Century Breakdown', artist: 'Greenday', url:'http://www.greenday.com', high:'CoverFlows_files/covers/cover4large.jpg'}},
{src: 'CoverFlows_files/covers/cover5med.jpg',
label: {album: 'Carter III', artist: 'Lil Wayne', url:'http://www.lilwayne.com', high:'CoverFlows_files/covers/cover5large.jpg'}},
{src: 'CoverFlows_files/covers/cover6med.jpg',
label: {album: 'Clumsy', artist: 'Fergie', url:'http://www.fergie.com', high:'CoverFlows_files/covers/cover6large.jpg'}},
{src: 'CoverFlows_files/covers/cover7med.jpg',
label: {album: 'The Best Of', artist: 'Blur', url:'http://ww.blur.com', high:'CoverFlows_files/covers/cover7large.jpg'}},
{src: 'CoverFlows_files/covers/cover8med.jpg',
label: {album: 'Rockferry', artist: 'Duffy', url:'http://www.duffy.com', high:'CoverFlows_files/covers/cover8large.jpg'}},
{src: 'CoverFlows_files/covers/cover9med.jpg',
label: {album: 'Dig out your soul', artist: 'Oasis', url:'http://www.oasis.com', high:'CoverFlows_files/covers/cover9large.jpg'}},
{src: 'CoverFlows_files/covers/cover10med.jpg',
label: {album: 'Loose', artist: 'Nelly Furtado', url:'http://www.nellyfurtado.com', high:'CoverFlows_files/covers/cover10large.jpg'}}
],
{
createLabel: function(item)
{
return item.label.album +'<br><span id="artist">'+ item.label.artist + '</span><br><a href="' + item.label.url + '">'+item.label.url+'</a>';
},
onSelectCenter: function(item,id)
{
var img = new Image();
img.onload = function()
{
Lightbox.show(this.src,id);
};
img.src = item.label.high;
},
refill: function(start)
{
new HTTPQuery("/ajax/cflow/0/?from="+start+"&l=1&cache=3998668924011356071",0,"updateCflow");
}
});
}
}
function updateCflow(oHttp) {
cResponse = oHttp.responseText;
if (cResponse.substr(0,1)=="!"){
cResponse=cResponse.substr(1);
eval(cResponse);
}
}
</SCRIPT>
jCoverFlow_2.0.rar
