최신 티스토리 스킨 (왓에버 Whatever, 포스터 Poster, 포트폴리오 Portfolio, 매거진 Magazine)에는 여러 커버 기능이 있습니다. 그 중에서 대표적인 커버로 슬라이더가 있는데 여러 포스트를 클릭하면서 순차적으로 큰 화면에 보여줄 수 있습니다. 구조가 슬라이더이기 때문에 분명히 자동넘김 기능이 있을 것 같은데.. 스킨 메뉴에는 딱히 옵션이 제공되어 있지 않습니다.
조금 구글링해 본 결과(티스토리 포럼 h하우님 댓글)와 이를 응용해서 각 스킨에서의 자동넘김 스크립트를 공개해 봅니다. 스킨파일은 왓에버와 포스터가 유사하고, 포트폴리오와 매거진이 유사하네요. 아래 스크립트는 각 스킨에서 정상 작동하는 것을 확인했습니다.
Whatever 스킨:
<!- 슬라이드 자동넘김 >
<script>
setInterval(function(){
$(".cover-slider .next").trigger("click");
},4000)
</script>
Poster 스킨:
<!- 슬라이드 자동넘김 >
<script>
setInterval(function(){
$(".cover-slider .next").trigger("click");
},4000)
</script>
Portfolio 스킨:
<!- 슬라이드 자동넘김 >
<script>
setInterval(function(){
$(".type_featured .btn_next").trigger("click");
},5000)
</script>
Magazine 스킨:
<!- 슬라이드 자동넘김 >
<script>
setInterval(function(){
$(".slide_area .btn_next").trigger("click");
},5000)
</script>
사용법은 본인의 스킨에 해당하는 스크립트를 복사한 후, 스킨편집/html편집에 들어가서 화면 맨 아래 </body> 앞에 붙여넣기 하면 됩니다. 숫자 4000, 5000은 자동넘기기 주기인데 4초, 5초를 의미하니 원하는 간격대로 바꾸면 됩니다.
(추가 2020/7/28) 홈 화면에 슬라이드를 추가하고 보니 약간 정신없이 지나가는 면이 있습니다. 보고 싶은 슬라이드에서 슬라이드 쇼가 일시적으로 멈추게 하고 싶은데.. 다른 웹사이트에서 마우스를 올리면 슬라이드가 멈추는 기능을 본 것도 같습니다.
티스토리 블로그에 추가하고 싶어서 관련 내용으로 구글링 해 보니.. 티스토리 스킨에 직접 적용한 내용은 보이지 않네요. 정보의 바다라고 구글링 해보면 관련 정보를 찾기도 싶지 않은데.. 여러 잡다한 제안 중에서 "Stop slideshow on mouseover" (stackoverrun.com/ko/q/5862346)라는 글을 참고해서 왓에버 스킨에 적용되는 다음의 코드를 만들었습니다.
<!- 슬라이드 자동넘김 >
<script>
var theInterval;
function slideSwitch(){
$(".cover-slider .next").trigger("click");
}
function startSlide() {
theInterval = setInterval(slideSwitch, 4000);
}
function stopSlide() {
clearInterval(theInterval);
}
$(function () {
startSlide();
$('.cover-slider ul li').hover(function () {
stopSlide();
}, function () {
startSlide();
})
});
</script>
다른 스킨에서는 위에 공개된 내용을 바탕으로 적절히 응용하시면 될 것 같습니다.
포토폴리오 스킨에는 다음 코드를 써야 하네요. 변수 찾기 힘드네요 ㅋㅋ
<!- 슬라이드 자동넘김 >
<script>
var theInterval;
function slideSwitch(){ $(".type_featured .btn_next").trigger("click"); }
function startSlide() { theInterval = setInterval(slideSwitch, 4000); }
function stopSlide() { clearInterval(theInterval); }
$(function () { startSlide();
$('.type_featured .slide_item').hover(function () { stopSlide(); }, function () { startSlide(); })
});
</script>
'Solve > 티스토리-유튜브' 카테고리의 다른 글
새 Bing 웹마스터 도구 검색 노출 급감 - 검색엔진 최적화 (SEO) h1 태그 문제 (10) | 2020.08.11 |
---|---|
티스토리 왓에버 Whatever 스킨 오른쪽 사이드바 구현 (74) | 2020.08.03 |
티스토리 블로그 파비콘/아이콘 업데이트 스토리 - 다크모드 업그레이드 최종 마무리 (4) | 2020.07.24 |
티스토리 구글 애드센스 광고 메카니즘의 변화 - CPC 입찰 vs CPM 입찰 (6) | 2020.07.23 |
[최초] 티스토리 방명록의 숨겨진 프로필 이미지 치환자 공개 (8) | 2020.07.19 |
티스토리 Whatever 스킨 공지사항/방명록 버그 잡기 - 다크모드 최적화 4탄 (0) | 2020.07.18 |
티스토리 구글서치콘솔 '클릭할 수 있는 요소가 서로 너무 가까움' 오류 해결법 (2) | 2020.07.06 |
티스토리 블로그 네이버 노출 반토막 사건 - 구글/네이버/다음 검색 유입 비교 - 뷰탭 노출 (10) | 2020.07.05 |