본문 바로가기

티스토리스킨/팁.활용.확장

티스토리 신스킨 커버 슬라이드 배너 자동 로테이션 구현하기

티스토리 신스킨 3종 중 Poster 와 Whatever, 또는 스킨 커버 기능 모듈인 슬라이드 배너 기능을 이용하면 수동으로 로테이션되는 슬라이드 배너를 블로그 메인에 붙일 수 있습니다.


사이트의 배너 슬라이드 처럼 자동으로 일정 시간 간격으로 로테이션 되면 좋을텐데 해당 기능은 제공이 되지 않습니다.


기술적으로는 간단한데 초보자들에게는 자바스크립트 기능 구현이 어려울 수 있습니다.

아래 내용대로 따라하면 간단하게 자동 로테이션 슬라이드 배너를 구현할 수 있습니다.


새로 공개된 신스킨 중 2종(Poster, Whatever)은 스킨에 포함된

images/script.js 파일에 슬라이드 배너 자바스크립트 기능이 구현되어 있습니다.


script.js 파일을 텍스트 편집기에서 연 후


if ( itemLength > 1 ){
/*여기에 아래 코드를 붙여넣음.*/
}


사이에


function autoScroll(){
$( ".next" ).trigger( "click" );
}
setInterval(autoScroll, 4000);


을 붙여 넣으면 됩니다.


이렇게 하면 4초(4000) 간격으로 오른쪽(".next") 방향으로 로테이션이 됩니다.


- 시간을 조금 늘려 5초 간격으로 하려면 4000 -> 5000 으로 변경(초 * 1000)

- 왼쪽으로 로테이션 하려면 ".next" 를 ".prev"로 변경

  • 궁금했던 정보였는데 감사합니다!

  • 비밀댓글입니다

    • 스킨 편집기 - 파일 업로드에서 업로드 하는 것 말고 다른 방법은 없습니다.
      js파일과 이미지는 모드 이 방법으로만 업로드가 가능합니다.
      파입업로드-"추가" 버튼을 눌러서 js 파일을 선택해서 업로드를 했는데 "게시자를 확인할 수 없다" 고 표시가 되는건가요?

  • 비밀댓글입니다

    • 위 포스트 내용은 본인이 쓰는 스킨에 포함된 script.js 파일 내용을 수정하는 것입니다.
      레퍼런스 스킨을 포함해 대부분 스킨이 script.js 파일을 포함하고 있습니다.

      티스토리 서버에 올라가 있는 script.js 파일을 다운로드하시려는거면 파일업로드 탭의 파일목록-파일 명에 마우스 커서 올리시고 오른쪽 팝업 메뉴를 띄워서
      "다른 이름으로 링크저장"을 선택하시면 됩니다.

      크롬 브라우저 기준입니다.

      스킨 적용을 하셨으면 다운로드받으신 스킨을 확인해보시기 바랍니다.
      script.js 파일이 있을겁니다.

  • 안녕하세요. mint paper 스킨을 사용중인데 자동 로테이션을 없애려면

    //slide rotate init
    function setLoop(){
    if($interval > 0){
    return setInterval(
    function autoScrollSlider(){
    $($this).find('.next').trigger( "click" );
    }, $interval
    );
    }
    }

    요걸 삭제하면 될까요??

    그리고 화면 전환 애니메이션을 fade in/out으로 구현하는 방법이 있을까요??

    • 1.
      코드를 삭제할 필요는 없습니다.
      로테이션을 정지할 수 있게 코드가 짜여져 있습니다.
      스킨 원본기준
      script.js 파일 77행
      $interval = 5000;
      이 기본 값인데(로테이션 간격)
      이걸 0으로 주면 로테이션이 멈춥니다.
      나중에 원복하려면 다시 값을 주면 됩니다.
      (행이 다르면 위 변수 값 설정 위치를 검색하면 됩니다.)

      2.
      기본적으로 레퍼런스 스킨과의 사용 호환성 때문에 로테이션 배너 기능만 붙어있는 상태입니다.
      자바스크립트를 짜서 로테이션 대신 페이드 기능을 넣으면 가능합니다.
      스크립트를 짤줄 알면 그렇게 난이도가 있는 것도 아니어서 기존 구현된 코드에 페이드인아웃 루틴만 추가로 넣어서 선택해서 쓸 수 있게...

      뭐 이러면 스킨을 본인이 만들어 쓸 수 있는거네요...

      다음번 기능 확장된 스킨들이 올라갈때 아마 커버 배너 기능이 확장될텐데 그때 가능하면 페이드 인아웃을 추가할 예정입니다.
      따로 분리할 수 있으면 기존 사용하는 분들이 기능을 추가로 붙일 수 있게 설명을 따로 달도록 하겠습니다.

    • 0으로 하면 되는거였군요. 다른 블로그에 적용된 페이드 기능을 보고 따라해보려고 했는데 js파일이 어포스트님 스킨과는 다르게 띄워쓰기나 주석 안내가 안되어있어서 도저히 알아볼 수가 없더라구요. 답변 감사합니다.

  • 와 ㄹㅇ 신기방기 . 정보 감사합니다 ㅎㅎ


닫기