Jwplayer Image Rotator로 포토갤러리 만들기

Posted by 또돌이 플짤관련 : 2014. 1. 11. 09:05




포토갤러리라기 보다 그냥 사진 슬라이드 라고 하는게 ...

일단 jwplayer image rotator 3.17 요게 필요합니다
3.18 버젼도 있지만 3.18은 jwplayer 로고가 뜹니다

https://docs.google.com/file/d/0B3l-5BlYUc0lUHNldTlJMFU0NEk/edit

요걸 다운받아  .jpg 를 삭제
자기 티스토리 스킨에 업하고 주소따면 되고

구글계정있는분은 구글에 올리면 됩니다 



다음은 xml 파일 만들기.

<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList> 
<track>
<title>seungyeon photo</title>
<location>http://i.imgur.com/eYjQgVJ.jpg</location>
</track>
<track>
<title>seungyeon photo</title>
<location>http://i.imgur.com/j3ZcE0J.jpg</location> 
</track>
<track>
<title>seungyeon photo</title>
<location>http://i.imgur.com/eqBatNi.jpg</location> 
</track>
</trackList>
</playlist>


위 내용을 복사해 메모장에 붙여놓고
타이틀에 적당한 이름 붙여주고
로케이션에 사진 주소 넣어주면 됨.
여기서는 imgur에 사진올려 주소 땀.
목록 숫자 모자라면 <track> 부터 </track> 까지 복사해 붙여넣어주면 됩니다

메모장 에서 파일 누르고 "다른이름으로 저장" 선택
파일이름을 영문과 숫자로 적고 확장자는 반드시 .xml 로 하여야 함
인코당은 UTF-8 선택 


요 xml 파일을 마찬가지로 티스토리 스킨에 업로드 해서 주소 땀 


<embed src="image rotator 317 주소"
 type="application/x-shockwave-flash"  width="영상의 가로 크기" height="영상의 세로 크기"
allowscriptaccess="always" allowfullscreen="true"  allownetworking="internal"
flashvars="file=xml 파일 주소
&rotatetime=4&transition=random&shuffle=false  &audio=오디오 파일 주소&volume=" >

사진을 순서대로 재생시키려면 shuffle=false를 무작위 재생을 원하면 shuffle=true로 표기하거나 셔플 자체를 안써주면 됨
(shuffle=true가 defalt값임)

위 태그에 위에서 딴 주소들을 적어 넣어주면 됩니다
참고로 오디오 파일은 mp3 파일로 구글에 올린걸 썼습니다
(티스토리는 mp3를 올릴 수가 없어서...또르르 ㅜ.ㅜ)


 완성된 태그 예

<embed src="http://cfs.tistory.com/custom/blog/104/1044374/skin/images/imagerotator317.swf"
 type="application/x-shockwave-flash"  width="800" height="600"
allowscriptaccess="always" allowfullscreen="true"  allownetworking="internal"
flashvars="file=http://cfs.tistory.com/custom/blog/104/1044374/skin/images/im%20test%206666.xml
&rotatetime=4&transition=random&shuffle=false
&audio=https://www.googledrive.com/host/0B3l-5BlYUc0lQmR1SkRXaWNhR28&volume=" >

참고로 플레이어와 xml 파일은 반드시 같은 곳에 올려야 합니다
여기서는 티스토리에 올림