728x90
반응형
티스토리 꾸미기
tistory
-
이전글 다음글
플로팅
추천 글 기능 만들기
#3
들어가면서..
- "이전글 다음글 플로팅 추천 글 기능 만들기 #2"까지 했다면 이제 이전글 다음글이 제대로 버튼에 나타나도록 보완한다.
- 그리고 #2에서 말했듯이 현재 시간 (분)에 따라 홀수면 초록 짝수면 분홍색으로 뜨도록 수정한다.
↓↓↓ 이전글 다음글 플로팅 #2
티스토리 꾸미기tistory - 이전글 다음글 플로팅 추천글 기능 만들기#2
티스토리 꾸미기 tistory - 이전글 다음글 플로팅 추천 글 기능 만들기 #2 들어가면서.. "이전글 다음글 플로팅 추천 글 기능 만들기 #1"에서 줄리박님 디자인으로 변경하고, 플로팅 뜨는것 까지 확
yourusername.tistory.com
이전글, 다음글 링크 기능 보완작업 Javascript
- 기존에 있던 스크립트를 다음과 같이 전부 교체해 준다.
var prePostFlag = true;
var nextPostFlag = true;
function makeRecommendBlock(type, currentIndex) {
if(prePostFlag && type == 'pre') {
prePostFlag = false;
$('#pre-content').append($('.another_category tr').eq(currentIndex).find('a').clone());
$('#next-content').append('<a href="#" class="no-post">다음 글 없음</a>');
$('.content-box .content-arrow').eq(1).addClass('no-post');
} else if(nextPostFlag && type == 'next') {
nextPostFlag = false;
$('#next-content').append($('.another_category tr').eq(currentIndex).find('a').clone());
$('#pre-content').append('<a href="#" class="no-post">이전 글 없음</a>');
$('.content-box .content-arrow').eq(0).addClass('no-post');
} else if(prePostFlag && nextPostFlag && type == 'both') {
prePostFlag = false;
nextPostFlag = false;
$('#pre-content').append($('.another_category tr').eq(currentIndex-1).find('a').clone());
$('#next-content').append($('.another_category tr').eq(currentIndex).find('a').clone());
}
}
var recommendPostFlag = true;
var recommendPostTimer = 0;
var preRecommendPosition = -1;
function rerommendHide(){
$('#recommend-contents').animate({'right':'-350px'}, 1000, 'swing', function() {
$('#recommend-contents').css('display','none');
recommendPostTimer = 0;
});
}
function recommendPost() {
if($('.another_category').length > 0) {
var position = window.scrollY/($('.another_category').offset().top-window.innerHeight);
if(position > 1 && window.scrollY-$('.another_category').offset().top < 0 && preRecommendPosition < window.scrollY) {
if(recommendPostFlag) {
recommendPostFlag = false;
var anotherCategory = $('.another_category tr');
var currentIndex = -1;
if(anotherCategory.length > 1) {
var currPageDate = $(".post-meta .date").text().split(/[^0-9]+/).map((v) => v.length < 2 ? ("0"+v) : v).join("");
for(var i=0;i<anotherCategory.length-1;i++) {
var findDate = $($('.another_category tr td')[i]).text().split(/[^0-9]+/).map((v) => v.length < 2 ? ("0"+v) : v).join("");
if( findDate < currPageDate) {
currentIndex = i;
break;
}
}
if(currentIndex == -1){
makeRecommendBlock('next', anotherCategory.length - 1); //다음글 표시 모드
} else if(currentIndex == 0){
makeRecommendBlock('pre', 0); //이전글 표시 모드
} else {
makeRecommendBlock('both', currentIndex);
}
}
if((!prePostFlag || !nextPostFlag) && recommendPostTimer == 0) {
var rightMargin = 0;
if(window.innerWidth > 310) {
rightMargin = 10;
} else {
rightMargin = (window.innerWidth - 310) / 2;
}
var bottomMargin = 75;
$('#recommend-contents').css('bottom', bottomMargin+'px');
$('#recommend-contents').css('right', '-350px');
$('#recommend-contents').css('display','block');
recommendPostTimer = $('#recommend-contents').animate({'right':rightMargin+'px'}, 1000, 'swing', function() {});
recommendPostTimer = setTimeout(function() {
rerommendHide();
}, 20000); //20초동안 추천글 플로팅이 떠있음.
}
}
} else {
recommendPostFlag = true;
}
preRecommendPosition = window.scrollY;
}
}
$(window).on('scroll resize', function() {
recommendPost();
});- 수정하는곳은 스킨편집 > html 편집 누르면 나오는 Html 편집창에서 수정해주면된다.
- 위와 같이 script를 수정하면 이제 이전/다음글이 제대로 동작한다.
시간(분)에 따라 달라지는 디자인
- 시간에 따라 플로팅 디자인이 달라지도록 설정해보자.
- css 에서 #error-box 를 찾아 다음과 같이 수정한다. (width, height, left 를 success-box와 동일하게)
.recommend-contents-wrap #error-box {
width: 294px;
height: 250px;
left: 12%;
background: linear-gradient(to bottom left, #EF8D9C 40%, #FFC39E 100%);
border-radius: 20px;
box-shadow: 5px 5px 20px rgba(#CBCDD3, 10%);
}
- css 에서 #error-box 를 찾아 다음과 같이 수정한다. (width:19%로 변)
.recommend-contents-wrap .face2 {
position: absolute;
width: 19%;
height: 22%;
background: #FCFCFC;
border-radius: 50%;
border: 1px solid #777777;
top: 21%;
left: 37.5%;
z-index: 2;
animation: recommend-contents-wrap-roll 3s ease-in-out infinite;
}
- javascript 에서 시간(분) 을 홀수/짝수로 체크 해서 플로팅 뜰때 css를 바꿔주도록 makeRecommendBlock 을 수정해준다.
function makeRecommendBlock(type, currentIndex) {
if(prePostFlag && type == 'pre') {
prePostFlag = false;
$('#pre-content').append($('.another_category tr').eq(currentIndex).find('a').clone());
$('#next-content').append('<a href="#" class="no-post">다음 글 없음</a>');
$('.content-box .content-arrow').eq(1).addClass('no-post');
} else if(nextPostFlag && type == 'next') {
nextPostFlag = false;
$('#next-content').append($('.another_category tr').eq(currentIndex).find('a').clone());
$('#pre-content').append('<a href="#" class="no-post">이전 글 없음</a>');
$('.content-box .content-arrow').eq(0).addClass('no-post');
} else if(prePostFlag && nextPostFlag && type == 'both') {
prePostFlag = false;
nextPostFlag = false;
$('#pre-content').append($('.another_category tr').eq(currentIndex-1).find('a').clone());
$('#next-content').append($('.another_category tr').eq(currentIndex).find('a').clone());
}
var date = new Date();
var min = date.getMinutes();
if(min % 2 === 0){ //현재 분이 짝수면
$(".recommend-contents-wrap #success-box").attr("id","error-box");
$(".recommend-contents-wrap .face").attr("class","face2");
$(".recommend-contents-wrap .happy").attr("class","mouth sad");
$(".recommend-contents-wrap .shadow").attr("class","shadow move");
}
}
- 현재 시간(분)이 홀수면 초록색 , 짝수면 핑크색 플로팅이 뜬다.
728x90
반응형