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

Posted by Readiz
2014.04.11 15:41 반응형 티스토리/Tistory




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



슬라이드 요소 늘리기


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



Issue

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

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




배포

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



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

저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. 고민되네요... 평소 적용하고 싶었던 기능인데, (최신글 하나만 헤드라인으로 보여주고 싶어서, 지금은 카테고리로 분류되서 최신글이 맨 위에 오지 않음) .... 어떻게 해야 하나 고민 중입니다. ㅎㅎ

    지금은 테스트 삼아, 블로그에 백그라운드 동영상을 적용한 상태인데, 1.5메가바이트 가량 로딩 용량이 증가해서,,, 이 부분을 제거(다음 주 정도에 제거 예정)하게 되면 그때,,, 이 슬라이드쇼 기능을 적용 해 봐야 겠네요 ^^ 매번 감사합니다.
    • 광속 댓글이군요. ㅋㅋ
      하나만 나오게 할 수도 있습니다. 아마도.. 목록형 요소중에 하나가 기본값인 것으로 적용하시면 될 것 같은데요.
      위 적용법대로 하면 기본 3개는 나오게 됩니다. 그 이상도 가능하고..
      저는 동영상은 블로그 너무 느려져서 절대로 안하려구요.. =_=
    • 동영상 배경은,,, 모바일에서도 잘 보인다면, IE 9 이상에서 지원되니까 사용해볼만도 한데,,, 모바일에서도 적용되게 하려면 복잡하고 일부 모바일 기기는 지원안하고 해서... 당분간은 ... 웹 트렌드 보다는 구버전 방문자들을 기준으로 블로그를 꾸며야겠어요 ㅎㅎ 욕심은 나지만.... 여건상 ㅜㅜ;;

      지금 제 블로그에서는 ol 태그, 댓글 마우스 호버시 버튼, 대댓글, 푸터영역(3줄), h1,2,3456 등등 몇가지 변경해서 적용 해논 상태네요 ㅋ

      그리고 커스터마이징 관련 글의 초안은 90% 작성 완료 상태고요.... 오늘 밤 늦게나 익일 오후중에 게제할 수 있을 것 같네요 ^^
  2. 자꾸 좋아지고 있네요 대단하세요^^
    현재 모습이 앞으로 나올 1.6의 모습인가요? 좀만 더 버티면...
    • ^^ 이번엔 보완 많이 하고 내놓을 생각입니다..
      조금 시일이 걸릴지도 몰라요.
    • 디자인적 요소도 다른글에서 언급하신만큼 시일이 걸린다면 그만큼 기대가 되는걸요.. 요즘 틈틈히 스킨변경을 감안해 블로그내 코드들을 정리하고있습니다 열심히 응원하겠습니다~ 응원방법이라봐야 클릭이 다지만요 ㅎㅎ
    • ^^;
  3. 한번해봐야겟네요 ㅎㅎ
  4. 안녕하세요^^
    새로운 티슬라이드를 적용했는데 안나와요...
    무엇을 잘못한 걸까요?
    네... 모르고 삭제했어요...다시 업로드!
    그런데...아직
    • jquery-2.1.0 파일이 없네요.. 1.5.1에 기본 업로드 되어 있는 파일인데 안올리셨나봐요.
      이 글에 첨부되어 있는것 받으시거나 해서 올리신 다음에 다시 해보세요..
  5. 지금 잘 동작 됩니다....신기하네요^^
    리디즈 열정에 응원합니다!!
    • ^^ 해결되셨다니 다행이네요~
      적용 생각보다 쉬울겁니다.. Ctrl+V면 끝나요. ㅋㅋ
  6. 집에 오자 바로 적용시켰습니다..^^
    세로가 약간 작아서 50픽셀 늘였어요.. 감사합니다..

    질문이 하나 있습니다..
    제가 모바일로 보니 슬라이드 화면 상단에 여백이 많이 있어서 어떻게 수정 할수는 없는지요..
    • 350px로 늘리셔서 더 도드라지는 현상인 것 같은데요..
      여백이라기보다는 이미지로 채우지 못하는 공간이 생겨서 발생하는 현상입니다.
      이미지 비율은 1:1의 1050px 이상의 이미지를 쓰는 것이 모바일까지 커버할 이미지가 나오구요,
      이 현상이 발생하는 이유는 이미지의 폭에 맞춰서 출력을 하기 때문에 비율이 와이드하면 위아래가 비게 되는 것입니다.
      적절한 사이즈(300px)와 적합한 비율의 대표이미지를 쓰신다면 만족할만한 슬라이드쇼가 만들어질 겁니다.. ^^
    • 그렇군요..^^ 감사합니다..
      좋은 주말 보내세요..
  7. 리디즈님, 티슬라이드에 대한 질문이에요^^
    티슬라이드 양쪽의 버튼의 디자인을 변경하고 싶어요.
    < ,> 표시만 있는 것이 어떨가요? 테두리 배경없이요.
    심플할거 같아요.
    전체적으로 잘 어울리거 같아요.
    소스를 어디를 만져야 할지 장님이 코끼리만지듯하려니 힘드네요^^
    배경색만 삭제하니 되네요^^
    • 해결하셨군요.. ^^
      디자인이야 뭐 맘내키는대로 바뀔겁니다. 나중에 수정판 나오더라두요. ^^
  8. 제가 이 스킨을 사용하고 있지는 않지만 놀랍습니다.
    자주 들어오니 슬슬 이 스킨으로 바꿔보고 싶은 유혹이 오네요.^^
    • 다 흡수해버릴 생각을 하고 있습니다. (..)
  9. 질문이 하나 있습니다 지금 스킨을 보면 브라우저창의 좌측에서 약간 40~50px정도 떨어져 있는데
    150px정도로 더 늘릴수 있나요?
    • 아 그걸 고정으로 하면 반응형의 의미가 없어지나요 ㅎㅎ
      강제로 고정한다면 어찌해야할까요?
      전 일부로 브라우저를 작게해서 보니 그런 와이드한 화면은 볼일이 없네요
    • 좌측에 한칼럼 정도 비울수는 있겠죠.. 근데 빈응형이라.. ㅠㅠ
      아마 좌측 광고때문에 그러신 듯 한데.. 이점은 반응형으로 되게되면 고정폭으로 두기가 힘들다는 것이 맞을것 같네요. ^^
      일정폭 이상 크기의 클라이언트에만 출력시키는건 가능합니다만..
  10. 제이쿼리네요.
    아.. HTML 마스터했더니 자바스크립트랑 제이쿼리가 남은 것인가;;
    3만원 주고 책을 또살수도 없고 ㅜㅜ
    • 인터넷으로 충분해요~;
      저는 다른일하면서 배운거긴 합니다만..
  11. 안녕하세요 스켈레톤 스킨사용자인데요
    궁금한거이 있어서 문의드려요
    Responsive Slideshow에서 이미지클릭으로 본문확인가능하게 할수는없나요?
    제목클릭만되게끔 되어있네여 블로그 구독자들은 좀더 쉽게 블로그를 읽어야하는게 맞다고 생각해서 문의드립니다.
    • 질문하셨었는데 최근들어 덧글이 많아져서 미처 확인을 못했었네요.
      저는 반응형 스킨에서는 모바일 인터페이스도 고려해야하기 때문에 오히려 이미지 전면 링크가 터치인터페이스에서 오작동을 일으킬 것을 같아 뺀 것이구요, 맞고 틀리고의 문제는 아니라고 생각합니다. 그냥 관점의 차이인거죠..^^
      Responsive Slideshow에서도 기본적으로 이미지에 링크 빠져있습니다. 서론이 길었는데 질문에 답변드리면
      <a href="[$$_article_rep_link_$$]"></a>가 게시글 링크 코드이니 이미지를 앵커태그인 <a>태그로 감싸시면 됩니다. $$는 ##로 바꿔주시구요..
  12. 적용은 성공했는데 사진들이 너무 크게 나와서 다 잘려버리네요 ㅠㅡㅜ 몇몇사진은 이게 뭔지 못알아볼 정도라서 혹시 fast tslide에 나오는 썸네일들을 자동으로 줄이거나 키워서 나오게 하는 방법이 있을까요??
    • 썸네일 팁이..
      대표이미지로 지정하시는 이미지는 가로와 세로가 어느정도 큰 이미지로 지정하시는게 좋으며, 중앙 부분에 내용이 있도록 하시는 것이 좋습니다.
      적당히 맞는 이미지 넣으면 이쁘게 나옵니다만 아무 이미지나 놓으면 솔직히 좋은 레이아웃을 기대하기 힘든건 당연한 일이죠..
      모범사례인 http://qyuoo.tistory.com/ 보시면 이미지도 잘 선정하셔서 넣으셔야 이쁘다는 걸 아실 수 있을 겁니다.
      아쉽게도 이건 티스토리에서도 이미지를 어떻게 하면 커스텀해서 자를 수 있게 할지 API를 주지 않은 상태라 어쩔 수가 없네요.
    • Readiz님 테스트 해보니 그림파일이 1040x390 픽셀일때 Tslide에서 썸네일이 제일 잘 구현되는걸로 확인했습니다. 번거롭더라도 티슬라이드에 올라가는 사진 파일은 사이즈를 조금씩 수정해서 올려야겠어요 ㅠ
    • 네 어쩔수 없는 것 같아요. 이런거 티스토리에서 API좀 지원해주면 깔쌈하게 뽑을 수 있는데 말이죠.
    • onandon
    • 2014.05.01 20:54 신고
    갤러리형 티에디션은 사용 할 수 없나요..?
    • http://blog.readiz.com/search/티에디션도%20반응형
      예전부터 올려놓은 강의가 많이 있습니다.
      http://fastboot.tistory.com/ 에서 적용해두고 있습니다.
    • 2014.07.11 12:04
    비밀댓글입니다
    • 2014.08.13 13:58
    비밀댓글입니다
  13. FastBoot만큼 커스텀하기 쉽고 또 그게 이렇게 잘 안내되어 있는 스킨은 없는 듯 하네요. 보통 일주일에 한 번씩은 스킨을 갈아엎고 이사다니는데 이 스킨으로는 꽤 오랫동안 눌러앉고 있네요 : ) 이런 스킨 뿌려주셔서 감사합니다 복 받으세요 ㅜㅜ
  14. 슬라이드 요소 를 늘리려면 첫페이지에 보통 우측상단에 티에디션 버튼 이 있잖아요?
    이건있는데 티에디션 버튼을 누르면 요소창은 뜨고 더이상 작동은 안합니다. 선택이안돼요..
  15. 안녕하세요 http://eshy.tistory.com/ 을 운영하고 있습니다. 다름이 아니라 해당 티에디션을 적용했는데, 반응형으로 모바일에서 축소되지 않는 현상이 발생합니다. 어떻게 해야 할까요?

티스토리 툴바