3D 슬라이더 티스토리 스킨에서 사용하는 방법

demun
퍼블리셔/jQuery
2012. 5. 28. 06:00

워드프레스 스킨에 주로 포함된 3D 슬라이더(이하 슬라이더라고 부릅니다) 입니다.
워드프레스 스킨에서는 플러그인 형태로 사용할 수도 있습니다.
슬라이더는 여러종류가 있지만 제가 이것 저것 해본결과 가장 잘 보이고 깔끔한것이 xml 을 사용하는 Piecemaker 입니다.
제가 GoodFriends 스킨에 포함해서 사용했던 것이지요.

Piecemaker 의 데모 화면을 보시죠.
소개글과 사용방법은 여기에서 볼수 있습니다.
배포하는 슬라이더 파일은 아래에 있습니다. 배포하는 원본 파일입니다.

piecemaker .zip

티스토리에서 사용하는 제 블로그에서 사용하는것을 예로 들어 알려드리겠습니다.
먼저 아래의 파일을 다운로드 하세요.

piecemaker_tistory.zip

압축을 해제한후 스킨편집에서 파일업로드를 통해 모두 업로드하세요.

1. piecemaker.xml 수정.

그런다음 piecemaker.xml 를 편집기(에디터나 노트패드)를 통해 여세요.
링크주소를 변경해줘야 합니다.
관리자화면에서 html/css 편집-> 파일업로드에서 업로드한 piecemaker1.png 파일을 찾아서 우측버튼을 클릭해서 이미지의 절대경로를 알아냅니다.

이미지의 경로를 알아냈으면 piecemaker.xml 에서 아래처럼 piecemaker1.png 의 주소를 변경해줍니다.
아래에 이미지에 보여지는 경로는 제가 업로드한 이미지의 주소입니다. 본인의 블로그에 업로드한 이미지 주소로 변경해주세요.
우측에 title에도 본인의 이미지의 이름을 적어주세요.

이런식으로 piecemaker1.png, piecemake2.png, piecemaker2.png, video.mp4 의 경로를 모두 변경해주세요.
두번째로 <h1> 이나 <p> 에 해당하는 문구를 작성합니다.
아래처럼 두가지 형태로 해도 모두 적용이 되니 해보세요.

다음 주소를 변경해주세요.

다음은 이미지 크기와 너비를 변경해야하는데 우선 제가 사용하는 크기로 사용한다고 가정하고 진행합니다. 어차피 본인의 스타일로 변경해야하니 나중에 말씀드리겠습니다.
여기까지 모두 했다면 저장을 하시고 그대로 다시 파일업로드를 통해 업로드를 합니다.

2. html 수정 및 코드삽입.

자 이제 아래의 코드를 html 편집상태에서 추가해주면 되는데 수정할 부분을 수정한 다음 넣어주세요.
piecemaker.css 와 piecemaker.xml 의 절대주소를 알아내서 본인것으로 변경해줘야 합니다.
위의 이미지의 주소를 알아낸것과 똑같습니다.

아래처럼 두개의 파일의 주소를 알아내서 복사를 합니다.

그런다음 html 편집에서 body 위에 아래의 코드를 수정해서 넣어줍니다.

<!-- 3D_Slider -->
<script type="text/javascript" src="./images/swfobject.js"></script>
<script type="text/javascript">
	var flashvars = {};
	flashvars.cssSource = "http://cfs.tistory.com/custom/blog/5/53533/skin/images/piecemaker.css"; //본인의 css주소로 변경
	flashvars.xmlSource = "http://cfs.tistory.com/custom/blog/5/53533/skin/images/piecemaker.xml"; //본인의 xml주소로 변경

	var params = {};
	params.play = "true";
	params.menu = "false";
	params.scale = "showall";
	params.wmode = "transparent";
	params.allowfullscreen = "true";
	params.allowscriptaccess = "always";
	params.allownetworking = "all";
	swfobject.embedSWF('http://cfs.tistory.com/custom/blog/49/496395/skin/images/piecemaker.swf', //본인의 swf주소로 변경
	'piecemaker', '960', '210', '10', null, flashvars,params, null);
</script>
</body>

자 여기까지 했다고 해서 변화가 있는것은 아닙니다. 여기까지는 준비단계인것입니다.
위는 swf 파일도 주소를 넣었지만 제가 올려드린파일에는 swf 파일은 없습니다. 사용할분은 저 주소를 수정해서 저런식으로 사용하면 됩니다.

3. 삽입한 공간 선택후 코드 삽입.

이제 슬라이더가 보여질 곳에 아래의 코드를 넣으면 됩니다. 즉 위단계까지 했다고 해서 화면에 보여지는것이 아닙니다.
아래의 코드를 넣어야 보여집니다.
html 편집에서 아래의 코드를 넣습니다.

<!-- 3D 슬라이더 -->
<div id="piecemaker"></div>

저의 경우는 어떨때는 보이고 어떨때는 안보이고의 설정을 하기 위해 아래처럼 코드를 작성해서 넣었습니다.
참고로만 보세요. 여러분은 위처럼 해도 보여집니다.

<!-- 3D 슬라이더 -->
<div class="piecemaker-wrap fullwidth">
	<div id="piecemaker_holder">
		<div id="piecemaker"></div>
	</div>
</div>

여기까지 했다면 모두 끝입니다. 일단 보여지는것까지 확인해보세요.

수정 및 주의점.

이 슬라이더가 차지하는 공간은 높이 210px 너비 960px 입니다.
이미지의 크기는 800*140 입니다.
1. 이미지의 크기변동없이 사용할 경우.
이미지만 변경해서 파일명을 변경하지 않고 그대로 업로드합니다. - 제일 간단한 방법입니다.

2. 이미지의 크기를 변경할 경우.
예를들어 더 작게 본문크기정도로 한다고 가정해봅니다.
600*140 정도로 한다고 가정하면 수정할 부분은 아래와 같습니다.
먼저 이미지의 크기를 600*140 으로 변경해줘야 합니다.
두번째로 piecemaker.xml 에서 아래부분에 노랑색으로 된부분을 수정해줘야 합니다.
아래는 800*140 으로 되어 잇으니 600*140으로 수정해줘야겠지요.

그런다음 다른것은 수정할 필요없이 저장후 그대로 업로드하면 됩니다.

3.삽입할 공간 및 슬라이더의 크기 변경.
슬라이더의 크기는 960*210 입니다.
삽입할 공간의 크기를 변경할 경우는 위의 코드에서 960,210 이라고 적힌 부분을 수정해주면 됩니다.

4. 효과변경.
슬라이더의 효과를 변경해줄수 있습니다. 물론 swf 파일처럼 플래시 파일도 삽입도 가능하구요.
슬라이더의 효과를 변경하려면 Transitions 라는 부분을 수정하면 됩니다.

개 개

demun(대문블로그)

3D 슬라이더 티스토리 스킨에서 사용하는 방법

티스토리툴바