반응형 스킨용 티에디션 요소 - Fast TSlide v0.1

Fast TSlide v0.1 for Tistory T-Edition

  Fast TSlide는 반응형 스킨(혹은 아니라도)을 위한 슬라이드쇼 티에디션 요소입니다. 전부터 반응형 스킨에 티에디션을 꾸미는 강좌를 하고 있었는데, 이에 관련하여 Masonry 말고 다른 요소도 추가시켜보겠다고 했었는데 드디어 공개합니다. Responsive Slideshow라는 오픈소스를 티에디션에 맞게 수정한 것이며, 반응형 스킨에서 그동안 티에디션이 Masonry만 사용해서 좀 단조웠는데, 이것을 보완하기 위해 제작하였습니다.

  우선은 FastBoot 스킨을 사용하고 계시면 아래 코드를 바로 삽입하여 적용 가능합니다. 다른 스킨을 사용하시더라도 Fontawesome과 jQuery를 사용중이시라면 문제없이 적용될 것으로 보입니다. 모습은 아래처럼 생겼습니다.

  아래는 적용 방법입니다. FastBoot을 사용중이시면 훨씬 쉽게 적용이 가능하시고, 아니라면 좀 더 수정이 필요합니다. 우선 FastBoot 사용중인 분들을 위한 적용방법입니다.

Apply for FastBoot skin

1. 티에디션 요소를 만듭니다.

2. 목록형에서 위 요소로 티에디션 요소를 하나 만듭니다. (사실 위 요소가 아니여도 될 것 같긴 한데.. 테스트는 저걸로 해봤습니다)

3. 디자인탭에 들어가 제목 길이를 조정(지금 단계에서 하셔야 하고 HTML수정하면 제목 길이 수정 못합니다. 미리 수정하세요)하고 HTML편집으로 들어갑니다.

4. HTML편집모드에서 아래 코드를 넣습니다.

	
<!--Fast TSlide v0.1 for Tistory T-Edition Plugin by Readiz
    http://readiz.com/
    Based on responsiveslides.com -->
<!--[if (gt IE 7)|!(IE)]><!-->
<style> /* Fast TSlide style */
.rslides{position:relative;list-style:none;overflow:hidden;width:100%;padding:0;margin:0}
.rslides li{-webkit-backface-visibility:hidden;position:absolute;display:none;width:100%;left:0;top:0}
.rslides li:first-child{position:relative;display:block;float:left}
.rslides p.caption a{color:white;font:14px/20px Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-decoration:none}
.callbacks_container{width:100%; display:none}
.callbacks{position:relative;list-style:none;overflow:hidden;width:100%;padding:0;margin:0}
.callbacks li{position:absolute;width:100%;left:0;top:0}
.callbacks .img{display:block;float:left;position:relative;z-index:1;height:300px;width:100%;border:0}
.callbacks .caption{display:block;position:absolute;z-index:2;font-size:20px;text-shadow:none;color:#fff;background:#000;background:rgba(0,0,0,.8);left:0;right:0;bottom:0;padding:10px 20px; margin:0; max-width:none }
.callbacks_nav{position:absolute;top:45%;border-radius:5px;left:0;opacity:0.7;z-index:3;overflow:hidden;text-decoration:none;height:61px;width:38px;margin-top:-45px;color:white !important; background-color:black;padding-left:11px !important;padding-top:18px !important}
.callbacks_nav:hover{opacity:1;color:#aaa;}
.callbacks_nav.next{left:auto;right:0}
</style>
<script>
window.onload=function(){if(ielt9==1)window.jQuery||document.write('<script src="./images/jquery-1.11.0.min.js"><\/script>');else if(ielt9==0)window.jQuery||document.write('<script src="./images/jquery-2.1.0.min.js"><\/script>');(function(c,I,B){c.fn.responsiveSlides=function(l){var a=c.extend({auto:!0,speed:500,timeout:4E3,pager:!1,nav:!1,random:!1,pause:!1,pauseControls:!0,prevText:'<i class="fa fa-chevron-left fa-2x"></i>',nextText:'<i class="fa fa-chevron-right fa-2x"></i>',maxwidth:"",navContainer:"",manualControls:"",namespace:"rslides",before:c.noop,after:c.noop},l);return this.each(function(){B++;var f=c(this),s,r,t,m,p,q,n=0,e=f.children(),C=e.size(),h=parseFloat(a.speed),D=parseFloat(a.timeout),u=parseFloat(a.maxwidth),g=a.namespace,d=g+B,E=g+"_nav "+d+"_nav",v=g+"_here",j=d+"_on",
w=d+"_s",k=c("<ul class='"+g+"_tabs "+d+"_tabs' />"),x={"float":"left",position:"relative",opacity:1,zIndex:2},y={"float":"none",position:"absolute",opacity:0,zIndex:1},F=function(){var b=(document.body||document.documentElement).style,a="transition";if("string"===typeof b[a])return!0;s=["Moz","Webkit","Khtml","O","ms"];var a=a.charAt(0).toUpperCase()+a.substr(1),c;for(c=0;c<s.length;c++)if("string"===typeof b[s[c]+a])return!0;return!1}(),z=function(b){a.before(b);F?(e.removeClass(j).css(y).eq(b).addClass(j).css(x),
n=b,setTimeout(function(){a.after(b)},h)):e.stop().fadeOut(h,function(){c(this).removeClass(j).css(y).css("opacity",1)}).eq(b).fadeIn(h,function(){c(this).addClass(j).css(x);a.after(b);n=b})};a.random&&(e.sort(function(){return Math.round(Math.random())-0.5}),f.empty().append(e));e.each(function(a){this.id=w+a});f.addClass(g+" "+d);l&&l.maxwidth&&f.css("max-width",u);e.hide().css(y).eq(0).addClass(j).css(x).show();F&&e.show().css({"-webkit-transition":"opacity "+h+"ms ease-in-out","-moz-transition":"opacity "+
h+"ms ease-in-out","-o-transition":"opacity "+h+"ms ease-in-out",transition:"opacity "+h+"ms ease-in-out"});if(1<e.size()){if(D<h+100)return;if(a.pager&&!a.manualControls){var A=[];e.each(function(a){a+=1;A+="<li><a href='#' class='"+w+a+"'>"+a+"</a></li>"});k.append(A);l.navContainer?c(a.navContainer).append(k):f.after(k)}a.manualControls&&(k=c(a.manualControls),k.addClass(g+"_tabs "+d+"_tabs"));(a.pager||a.manualControls)&&k.find("li").each(function(a){c(this).addClass(w+(a+1))});if(a.pager||a.manualControls)q=
k.find("a"),r=function(a){q.closest("li").removeClass(v).eq(a).addClass(v)};a.auto&&(t=function(){p=setInterval(function(){e.stop(!0,!0);var b=n+1<C?n+1:0;(a.pager||a.manualControls)&&r(b);z(b)},D)},t());m=function(){a.auto&&(clearInterval(p),t())};a.pause&&f.hover(function(){clearInterval(p)},function(){m()});if(a.pager||a.manualControls)q.bind("click",function(b){b.preventDefault();a.pauseControls||m();b=q.index(this);n===b||c("."+j).queue("fx").length||(r(b),z(b))}).eq(0).closest("li").addClass(v),
a.pauseControls&&q.hover(function(){clearInterval(p)},function(){m()});if(a.nav){g="<a href='#' class='"+E+" prev'>"+a.prevText+"</a><a href='#' class='"+E+" next'>"+a.nextText+"</a>";l.navContainer?c(a.navContainer).append(g):f.after(g);var d=c("."+d+"_nav"),G=d.filter(".prev");d.bind("click",function(b){b.preventDefault();b=c("."+j);if(!b.queue("fx").length){var d=e.index(b);b=d-1;d=d+1<C?n+1:0;z(c(this)[0]===G[0]?b:d);if(a.pager||a.manualControls)r(c(this)[0]===G[0]?b:d);a.pauseControls||m()}});
a.pauseControls&&d.hover(function(){clearInterval(p)},function(){m()})}}if("undefined"===typeof document.body.style.maxWidth&&l.maxwidth){var H=function(){f.css("width","100%");f.width()>u&&f.css("width",u)};H();c(I).bind("resize",function(){H()})}})}})(jQuery,this,0);
$("#responsive_slider").responsiveSlides({
  pager: false,
  nav: true,
  speed: 500,
  timeout: 4000,
  namespace: "callbacks"
});
$('.callbacks_container').show("slow");
}
</script>
<div class="callbacks_container">
  <ul class="rslides" id="responsive_slider">
<s_tabloid>
<s_article_rep>
    <li>
        <div class="img">
          <img style="max-width:100%; position:absolute; left:-100%; right:-100%; top:-100%; bottom:-100%; margin:auto; height:auto; width:auto;" src="http://[$$_article_rep_thumb_host_$$]/T1050x1050/[$$_article_rep_thumb_hash_$$]" alt="[$$_article_rep_title_$$]">
        </div>
        <p class="caption" style="padding:10px;"><a href="[$$_article_rep_link_$$]"><i class="fa fa-caret-right"></i>  [$$_article_rep_title_$$]</a></p>
    </li>
</s_article_rep>
</s_tabloid>
  </ul>
</div>
<!--<![endif]--> 
	

  단, 코드 넣을 때 항상 말씀드렸지만 $$는 ##로 치환하세요. 티스토리 치환자라서 ##로 그대로 올리면 제대로 올라가지를 않아서 $$로 치환했습니다. 메모장 등에서 전체바꾸기로 $$를 ##로 바꾸시고 넣으세요.

  넣고나서 적용버튼 누르는 것 잊지 마세요.

5. 끝!

  아래 과정은 FastBoot을 사용하지 않는 분들을 위한 적용법입니다.

Apply for Other Responsive skin

  몇가지 과정이 추가됩니다. (사용하는 스킨 환경에 따라 충돌이 일어날 수도 있긴 합니다)

  우선 사용중인 스킨이 Fontawesome을 사용하는지 확인합니다. 아니라면 아래 한 줄을 <head> 끝부분에 추가시킵니다. (skin.html 수정)

	
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" /> 
	

  그리고 Fontawesome 사용여부와 상관없이 아래 ie버전 디텍션 코드를 마찬가지로 head부분에 넣어야 합니다. (무조건!)

	
<!--F IE Old Version Compatible -->
<script>var ielt9 = 0;</script>
<!--[if lt IE 9]>
<script>ielt9 = 1</script>
<![endif]--> 
	

  마지막으로 jQuery를 스킨 파일 업로드로 들어가서 업로드 해줍니다. (최신버전 브라우저용과 구버전용 두가지 입니다. 둘 다 업로드 해야 합니다)

jquery-1.11.0.min.js

jquery-2.1.0.min.js

  어차피 이미 jQuery가 로딩되어 있으면 로딩하지 않게 코드가 짜여져 있으므로, 스킨에서 jQuery를 사용하고 있더라도 안전하게 하기 위해 업로드 하는 것을 추천드립니다. (이미 jQuery가 깔려있더라도 티에디션 로딩 중에 jQuery가 없으면 에러나면서 실행되지 않습니다)

슬라이드 요소 늘리기

  티에디션에서 다른 요소 크기 늘리는 것처럼 +버튼을 사용하여 간단하게 늘릴 수 있습니다.

Issue

  티에디션이 원체 느려서 여러개의 티에디션 요소를 사용하면 좀 많이 느려질 수 있습니다. 이럴 때는 뭐라 말씀을 못드리겠네요.. 나름 최적화 시킨다고 필요없는 것은 덜어낸 것인데, 그래도 원래 느린 티에디션이라.. 이럴 때는 과감하게 필요한 것만 티에디션에 남기라고 조언드리고 싶네요.

  그나마 로딩 딜레이를 최소화 시키려고, 다른 부분 로딩 끝난 뒤에 Slideshow가 실행되도록 했습니다. 처음 로딩시 안뜨더라도 당황하지 마세요.

배포

  배포는 본 블로그에서만 가능합니다. 또한 원 소스인 Responsive Slideshow처럼 MIT License입니다.

http://responsiveslides.com/

  FastBoot 스킨에서 적용하시다가 오류가 나면 바로 피드백 드리겠습니다. 다른 스킨의 경우에도 문제 발생시 파악해보겠습니다만 다른 스킨의 경우 잘못 꼬이면 해결이 불가능할 수도 있습니다. 이 점은 양해 부탁드립니다.. 스킨마다 특성이 다 다른지라..