jCoverflow를 이용하여 앨범 목록만들기

jCoverFlow_2.0.rar

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>