본문 바로가기

티스토리스킨/스킨 활용&패치

티스토리 신스킨 커버 슬라이드 2.0 기능 확장 버전 배포합니다. 슬라이드 인디케이터 및 자동 스크롤 지원

반응형

티스토리 신스킨 기능으로 제공되는 커버 기능중 하나인 커버 슬라이드의 확장 버전입니다.




기존 커버 슬라이드 기능에서 슬라이드 인디케이터와 자동 슬라이드 기능이 추가된 버전입니다.


1. 슬라이드 인디케이터

  • 슬라이드 갯수만큼 자동으로 인디케이터 갯수가 센터 하단에 표시됨.
  • 인디케이터를 클릭하면 해당 슬라이드로 애니메이션되면서 이동함.
  • 인디케이터 클릭시 자동 슬라이드 기능은 일시적으로 멈춤.


2. 자동 슬라이드


스크립트에 별도로 자동 슬라이드 로테이션 간격 변수가 정의되어 있어 변수값 변경만으로 슬라이드 로테이션 간격을 조절할 수 있음.




레퍼런스 스킨에 포함된 자바스크립트 기준으로 몇가지 수정을 하면 바로 적용할 수 있습니다.


배포하는 스킨들은 자동 슬라이드 기능이 붙어있는 스킨들이 있습니다.

해당 스킨들은 아래 3번 내용을 참조해 불필요한 코드를 제거해주는 작업을 해줘야 합니다.






1. scrpt.js 파일의 coverSlider() 함수 수정사항


기존 coverSlider() 함수를 찾아 아래 소스의 함수로 대체합니다.

레퍼런스 스킨은 1번과 2번 함수 대체 및 CSS 추가만으로 잘 동작합니다.


함수 상단의 변수 설정 값중


      $interval = 5000;// 슬라이드 이동 간격
      $animateTime = 500; //슬라이드 이동시간

이것 두개만 우선 알면 됩니다.

interval은 슬라이드가 넘어가는 간격입니다. 단위는 밀리세컨드이며 1초는 1000 밀리세컨드이므로 소스의 기본 설정은 5초단위로 다음 슬라이드로 넘어갑니다.

animateTime은 슬라이드가 넘어가는 애니메이션 시간입니다. 500 밀리세컨드이므로 0.5초동안 이동 애니메이션이 되면서 다음 슬라이드로 넘어갑니다.



  
function coverSlider(){
  $(".cover-slider").each(function(){
    
    var $this = $(this), //현재 슬라이드 이너 객체
      $sliderItems = $(this).find("li"), //슬라이드 아이템들 객체 리스트
      $itemsLength = $sliderItems.length, //슬라이드 아이템 갯수
      $num = 0, //슬라이드 인덱스
      $looper = null; //슬라이드 인터벌 타이머 객체
      $interval = 5000;// 슬라이드 이동 간격
      $animateTime = 500; //슬라이드 이동시간
      $timeouts = [];
    
    if ( $itemsLength > 1 ){
      //add prev, next button
      $this.append('<button type="button" class="prev"><span>이전</span></button><button type="button" class="next"><span>다음</span></button>');
      $looper = setLoop();
        
      //add indicator
      $this.append('<ol class="cover-slider-indicator"></ol>');
      for(let i=0;i<$itemsLength;i++){
        var $element = $('<li index="'+i+'" class="'+(i==0?'active':'')+'"></li>');
        $element.click(function(){
          
          var $clicked_indicator = parseInt($(this).attr('index'));
          if($num != $clicked_indicator){
            var sliding_size = Math.abs($num - $clicked_indicator);
            clearInterval($looper);
            
            for(let j = 0;j<sliding_size;j++){
              (function(direction, index){
                $timeouts.push(setTimeout(function(){
                  moveCascadeSlides(direction, index);
                  },$animateTime*index));
                }
              )(($num < $clicked_indicator ? 1:-1), j);
            }
            $looper = setLoop();
          }
        });
        $this.find('.cover-slider-indicator').append($element);
      }
      
      //set slider item index text
      $this.find('.index').each(function(idx){
        $(this).html((idx+1)+'/'+$itemsLength)
      })
      
      //set cover slider height
      $(".cover-slider").find("ul").height( $sliderItems.eq($num).height() );

      //add css property to slider
      $sliderItems.css({
        "position": "absolute",
        "top": 0,
      });
      $sliderItems.eq($num).siblings().css("left","100%");

      //add prev click event
      $this.on("click", ".prev", function(){
        if ( !$sliderItems.eq($num).is(":animated") ){
          $sliderItems.eq($num).animate({ left: "100%" }, $animateTime ).siblings().css("left","-100%");
          $num = $num-1 < 0 ? $sliderItems.length-1 : $num-1;
          moveSlide();
          $($this).find('ol li').removeClass('active');
          $($this).find('ol li').eq($num).addClass('active');
        }
      });
      
      //add next click event
      $this.on("click", ".next", function(){
        if ( !$sliderItems.eq($num).is(":animated") ){
          $sliderItems.eq($num).animate({ left: "-100%" }, $animateTime ).siblings().css("left","100%");
          $num = $num+1 >= $sliderItems.length ? 0 : $num+1;
          moveSlide();
          $($this).find('ol li').removeClass('active');
          $($this).find('ol li').eq($num).addClass('active');
        }
      });
      
      //slide rotate init
      function setLoop(){
        return setInterval(
          function autoScrollSlider(){
            $($this).find('.next').trigger( "click" );
          }, $interval
        );
      }

      //animate indicator click
      function moveCascadeSlides(direction, idx){
        var next_num = $num + direction;
        $sliderItems.eq($num).animate({ left: (-100*direction)+"%" }, $animateTime ).siblings().css("left",(100*direction)+"%");
        $sliderItems.eq(next_num).animate({ left: "0" }, $animateTime );
        $($this).find('ol li').removeClass('active');
        $($this).find('ol li').eq(next_num).addClass('active');
        $num = next_num;
        clearTimeout($timeouts[idx]);
      }
      
      //animate 1 slide item
      function moveSlide(){
        $sliderItems.eq($num).animate({ left: "0" }, $animateTime );
        $(".cover-slider .paging button").eq($num).addClass("current").siblings().removeClass("current");
      }

      //add mobile touch
      $this.on("touchstart", function(){
        var touch = event.touches[0];
        touchstartX = touch.clientX,
        touchstartY = touch.clientY;
      });

      //add mobile touch end
      $this.on("touchend", function(){
        if( event.touches.length == 0 ){
          var touch = event.changedTouches[event.changedTouches.length - 1];
          touchendX = touch.clientX,
          touchendY = touch.clientY,
          touchoffsetX = touchendX - touchstartX,
          touchoffsetY = touchendY - touchstartY;

          if ( Math.abs(touchoffsetX) > 10 && Math.abs(touchoffsetY) <= 100 ){
            if (touchoffsetX < 0 ){
              $this.find(".next").click();
            } else {
              $this.find(".prev").click();
            }
          }
        }
      });
    }
  });
}








2. css 추가사항


인디케이터 관련 CSS만 추가하면 되므로 기존 커버슬라이더 CSS 위치 근처에 붙여넣어서 사용하면 됩니다.




.cover-slider-indicator{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  list-style: none;
  text-align: center;
  bottom: 20px;
  
}
.cover-slider-indicator li{
  width: 10px;
  height: 10px;
  border: 1px solid #fff;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  margin: 0 5px;
  transition: all 0.5s ease-in-out;
}
.cover-slider-indicator li.active{
  background-color: #fff;
}








3. 배포하고 있는 스킨들의 추가 수정사항


제가 배포하는 스킨들은 일부 변경된 부분이 있기 때문에 추가 수정할 부분이 있습니다.


script.js 에서 아래 부분을 찾습니다.


  

  if ( $(".cover-slider").length ){
    coverSlider();
    setInterval(  
      function autoScrollSlider(){
        $( ".next" ).trigger( "click" );
      }, 4000);
  }
  
  


인디케이터가 붙기 전에 자동 슬라이드만 구현해서 붙여넣은 스킨에는 이 코드가 들어가 있습니다.


"coverSlider();" 함수 호출행만 남기고 모두 지웁니다.

위의 개선된 함수에서 자동 슬라이드 기능이 모두 구현되어 있기 때문에 불필요합니다.


반응형
  • 이뻐요~ 제 블로그에 바로 적용했습니다~^^
    https://sarago.tistory.com/

  • 혹시 이 슬라이드 기능중에 썸네일 이미지를 가로기준 혹은 세로기준 혹은 원본비율 이런씩으로 변경할수있는 옵션이 있는지요?
    섬네일이 제 블로그 pc 기준에서는 조금 비율이 안맞는것 같아서 혹시 옵션이 있는지 질문드립니다.

    • 그런 옵션은 없구요...
      범용이기 때문에 다양한 이미지 크기에 두루두루 맞도록 만드는게 배포하는 기준에서는 맞을거 같고...

      블로그에 적용된건 봤는데, 어는 부분이 안맞는건지?
      이미지 자체가 커버타입으로붙기 때문에 가로나 세로 기준으로 채우고 남는걸 자르기 때문에 비율이 안맞거나 하는 문제는 아닐거로 보이는데...

      본인 블로그에 적용된거 기준으로 어느부분이 문제인지 설명을 해주시면 조정할 수 있는 방법이 있는지 찾아봐드리겠습니다.

  • 그러면 혹시 원본이미지가 다 노출되도록 설정하고 그러면 남는부분은 흰색배경으로 채워줘서 이미지가 짤리는것이 하나도 없게 설정할수는 없는지요? 예전에 티에디션에서 슬라이드 적용할때 이방법으로 하니 제일 보기가 나은것 같아서요~ 이해를 돕기위한 참고 블로그 주소입니다.이 블로그에 보시면 티에디션 슬라이드 적용되었는데 이미지가 전혀 안짤려서 오히려 보기가 좋더라구요
    https://jejus.tistory.com/

    왜 이렇게 설정하냐하면 제 썸네일 이미지가 때로는 너무 확대되어 나와서 (pc 인경우 ) 화질이 안좋아보일때가 많아서...
    암튼 한번 건의드려봅니다~^^
    수고하세요~

    • 음.. 해당 부분은 슬라이더의 기능적인 부분은 아니고, css를 조정해서 해결할 수 있는 부분입니다.
      슬라이더 자체가 티스토리 커버에서 배포하는 슬라이더를 호환성을 주기 위해 확장한 것이기 때문에 기본적으로는 기본 티스토리 슬라이더에도 동일하게 적용됩니다.

      style.css 에서

      .cover-slider ul li

      를 찾아서...
      - background-size: cover; 요 속성이 있는 클래스입니다.

      아래처럼
      background-size: cover; 요걸 대체해서

      /* background-size: cover; */
      background-repeat: no-repeat;
      background-color: #fff;

      요렇게 2줄을 추가해주면 흰배경에 확대없이 센터에 썸네일이 보이게 됩니다.

      티스토리 기본 슬라이더가 흰색글씨를 잘 보이게 하기 위해 반투명 검정이 덮어져 있는데..
      이건 글자색을 검정으로 바꾸고 반투명을 제거하던지, 흰색 반투명으로 변경하거나 하면 해결이 될겁니다.

  • background-size: contain;


    요렇게 설정하니 제가 원하는데로 딱 되는군요~
    뭘 건드려야 할지 몰랐는데 고맙습니다~^^

  • 혹시 이 블로그의 이미지 슬라이드 처럼 배치하고싶은데 방법이 없을까요?
    https://coding-factory.tistory.com/
    이미지 하단에 카테고리명과 타이틀이 있고 타이틀 배경은 반투명 이고 그 밑에 네모들이 쭉있는 타입이 너무 깔끔해보여서요.

    • 해당 사이트에 붙은건
      니보슬라이더라고 제이쿼리용 슬라이더로 배포되는 것입니다.

      https://www.jqueryscript.net/slider/nivo-slider.html

      가시면 세팅법까지 다 있고..
      티스토리 이미지와 텍스트를 맞춰 조정하시면 됩니다.
      해당 사이트 주인장은 개발자여서 본인이 커스터마이징을 한것입니다.
      소스보기를 하셔서 적당히 베껴서 설정하셔도 될 겁니다.

      위 슬라이더처럼 티스토리 기본 슬라이더를 확장한 버전을 배포하고 있습니다.

      https://blogpack.tistory.com/295

      보시고 맞는걸 골라 쓰면 될겁니다.

  • 익명 2019.07.23 06:56 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 1.
      모바일에서 헤더 영역을 없애는 옵션을 켜셨는데 블로그 타이틀 색상은 옅은 회색 정도라도 되게 수정하셔야 폰에서 블로그 타이틀이 보이게 됩니다.
      아니면 스킨 설정에서 "모바일화면 - 헤더 영역 미사용" 옵션을 꺼야 배경 이미지가 표시되서 흰색인 블로그 타이틀이 정상적으로 보이게 됩니다.

      2.
      커버 슬라이더를 쓰려면 커버 기능을 우션 켜고 커버페이지(전체 글목록을 대체하는 메인페이지)를 구성해야 합니다.

      제가 배포하는 대부분의 스킨에는 데모 이미지들이 붙어서 페이지가 구성된 커버가 구현되어 있고 커버 기능을 켜면 커버페이지가 바로 표시가 됩니다.

      커버 슬라이더는 커버 페이지의 일부로 포함된 것입니다.
      배포하는 스킨의 커버 슬라이더는 샘플용 데모 이미지들이 3장 이상씩 붙어있기 때문에 이미지 대체 및 링크 수정만 해도 바로 사용할 수 있습니다.

      커버 "슬라이더" 아이템 오른쪽의 수정을 눌러 슬라이더 편집에 들어가면 슬라이더 항목들의 목록이 표시되고, 각 항목 수정 버튼을 누르면
      이미지파일을 선택해 업로드할 수 있는 폼이 표시됩니다.
      여기에 슬라이더 제목, 내용, 링크URL, 업로드할 이미지 파일 선택을 할 수 있습니다.

      아니면 커버 슬라이더 수정으로 들어가서 "콘텐츠" 에서 최근글이나 인기글을 선택해서 자동으로 글의 이미지와 제목이 슬라이드로 표시되게 조정할 수도 있습니다.

      3.
      커피잔 이미지는 어떤 걸 말하는지 모르겠습니다.
      블로그 들어가봤는데 표시되지 않습니다.
      혹시 데모용 이미지가 캐시가 남아있는 것일 수도 있습니다.
      웹브라우저 캐시를 한번 소거해 보시기 바랍니다.(모바일 폰으로 보는 경우에도 마찬가지로 모바일 웹브라우저 캐시 소거를 한번 해보시기 바랍니다.)

  • 골프스토리 2019.07.24 06:10 댓글주소 수정/삭제 댓글쓰기

    자세한 답변 감사드립니다.
    커피잔 이미지는 티스토리앱이 아닌 모바일 웹 브라우저로 들어갈때 나왔던건데 블로그 설정에서 변경하여 해결되었습니다.

    좋은스킨 만들어 주셔서 잘 사용하겠습니다.

  • 안녕하십니까 무료로 배포해드린 스킨 잘이용을 하고 있습니다.

    죄송한데 슬라이드 적용방법을 전혀 모르겠습니다.

    현재 스킨 101번을 사용을 하는 중입니다.

    scrpt.js 파일에 coverSlider() 라는 구문을 찾아서 지워 준다면 되는건가요?

    scrpt.js 파일을 열어서 coverSlider() 구문을 찾는데 검색 결과가 없는데요. 어떻게 적용을 하는건가요?


닫기