티스토리 스킨 매뉴얼 | 슬라이더 사용법

CMS Factory가 제공하는 티스토리 스킨에 포함된 슬라이더 사용법입니다. 이 방법으로 슬라이더 설정을 할 수 있는 스킨은 다음과 같습니다.

  • JB Skin 101 V0.1.0 +
  • JB Skin 103 V0.1.0 +
  • JB Skin 109 V0.1.0 +
  • JB Skin 127 V0.1.0 +
  • JB Skin 1 V0.1.0 +
  • JB Skin 3 V0.1.0 +
  • JB Skin 4 V0.1.0 +

슬라이더 출력 여부 및 개수 설정

슬라이더 출력 여부와 개수 설정은 skin.html에 있는 다음의 코드로 합니다.

var jbShowSlider = 0;     // 0 -> Yes, 1 -> No
  jbSliderImage[0] = './images/jb-slider-01.jpg';
  jbSliderLink[0] = '';
  jbSliderCaption[0] = '';
  jbSliderImage[1] = './images/jb-slider-02.jpg';
  jbSliderLink[1] = '';
  jbSliderCaption[1] = '';
  jbSliderImage[2] = './images/jb-slider-03.jpg';
  jbSliderLink[2] = '';
  jbSliderCaption[2] = 'Slider Caption';

슬라이더 출력 여부 설정

var jbShowSlider = 0;     // 0 -> Yes, 1 -> No

값이 0이면 슬라이더를 첫화면에 출력하고 1이면 출력하지 않습니다.

변수의 의미

  • jbSliderImage - 이미지 경로 (필수)
  • jbSliderLink - 이미지를 클릭했을 때 이동할 주소 (옵션)
  • jbSliderCaption - 이미지 하단에 출력되는 텍스트 (옵션)

슬라이더 추가/삭제

이미지 하나 당 세 줄의 코드가 들어갑니다.

다음의 코드를 추가하면 슬라이더에 나오는 이미지가 하나 추가됩니다.

jbSliderImage[3] = './images/jb-slider-04.png';
jbSliderLink[3] = '';
jbSliderCaption[3] = '';

다음 코드를 삭제하면 슬라이더에 나오는 이미지가 하나 줄어듭니다.

jbSliderImage[2] = './images/jb-slider-03.jpg';
jbSliderLink[2] = '';
jbSliderCaption[2] = 'Slider Caption';

추가하든 삭제하든 대괄호([]) 안의 숫자가 0, 1, 2, 3 처럼 0으로 시작해서 차례대로 이어지게 만들어주세요.

슬라이더 효과 설정

skin.html에 다음과 같은 코드가 있습니다.

effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 5000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded

값을 적절히 수정하여 원하는 효과를 만들 수 있습니다.

참고사항

  • 슬라이더 크기는 이미지 크기에 맞게 변합니다. 따라서 같은 크기의 이미지를 사용하는 게 좋습니다.
  • Caption을 넣으면 모바일로 접속했을 때 글자가 이미지를 많이 가리게 됩니다. 텍스트가 필요하다면 이미지 자체에 넣는 게 좋습니다.
  • 슬라이더 이미지를 바꿀 때 이미지의 이름도 바꾸는 게 좋습니다. 같은 이름의 다른 이미지로 교체할 경우 서버나 웹브라우저의 캐시 설정으로 인해 제대로 나오지 않을 수 있습니다.

Created on 2016-05-25 22:55 | Updated on 2017-04-30 11:41

Book navigation