댓글 개수가 많을 때 더보기 버튼을 통해 댓글 펼치기 정보
댓글 개수가 많을 때 더보기 버튼을 통해 댓글 펼치기
본문
안녕하세요...
미니님a입니다.
해당 팁은 게시판 스킨으로 업로드 된 파일을 직접 적용하고자 할 때
아래대로 진행 시 기존 소스는 유지하면서 기능만 추가할 수 있습니다.
만약 소스 수정이 다소 어려워 스킨 적용하고자 한다면 아래 링크에서 다운로드 하실 수 있습니다.
댓글이 5개가 넘지 않는다면, 더보기 버튼이 보이지 않으며,
5개가 넘을 시 총 개수가 함께 노출 됩니다.
사용하시는 게시판 스킨 폴더의 view_comment.skin.php 파일을 열어주세요
상단에 css 를 추가 해주세요
단. style.css 에 작성하셔도 무방합니다.
<style>
.hidden-comment { display: none; }
.load-more-btn {
display: block;
width: 100%;
padding: 15px;
margin: 20px 0;
background: #f9f9f9;
border: 1px solid #ddd;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.load-more-btn:hover {
background: #f0f0f0;
}
</style>
위치를 잘 모르겠다 하시면 아래 스샷 참고 하세요
자 다음에는 아래 코드를 찾아주세요
<article id="c_<?php echo $comment_id ?>">
그리고 아래 처럼 변경 합니다.
<article id="c_<?php echo $comment_id ?>" class="<?php if($i >= 5) echo 'hidden-comment'; ?>">
변경 이니 별도로 스샷은 업로드 하지 않습니다.
자 다음에는 아래 코드를 찾아주세요
<?php if ($i == 0) { //댓글이 없다면 ?><p id="bo_vc_empty">등록된 댓글이 없습니다.</p><?php } ?>
그리고 그 아래에 아래 코드를 추가 합니다.
<?php if($cmt_amt > 5) { ?>
<button type="button" id="load-more-comments" class="load-more-btn" data-current="5" data-total="<?php echo $cmt_amt; ?>">
더보기 (5/<?php echo $cmt_amt; ?>)
</button>
<?php } ?>
어디인지 모르겠다? 하시면 스샷 참고 하시길 바랍니다.
마지막으로 맨 하단에 보면 스크립트 댓글 열기를 찾아주세요
<script>
jQuery(function($) {
//댓글열기
$(".cmt_btn").click(function(e){
e.preventDefault();
$(this).toggleClass("cmt_btn_op");
$("#bo_vc").toggle();
});
});
</script>
그리고 아래 코드를 추가 해주세요
var $comments = $('#bo_vc article');
var $loadMoreBtn = $('#load-more-comments');
$loadMoreBtn.click(function() {
var current = parseInt($(this).data('current'));
var total = parseInt($(this).data('total'));
var next = current + 5;
var $btn = $(this);
// 다음 5개의 댓글을 보여줌
$comments.slice(current, next).removeClass('hidden-comment').fadeIn(400, function() {
// fadeIn 완료 후 실행
if (next >= total) {
$btn.fadeOut(200); // 버튼을 부드럽게 사라지게 함
}
});
// 더보기 버튼 상태 업데이트
$btn.data('current', next);
$btn.text('더보기 (' + Math.min(next, total) + '/' + total + ')');
});
어떻게 넣어야 할지 모르겠다면 아래 스샷을 참고 하세요
실제 구동 영상은 아래와 같습니다.
고맙습니다.
추천
5
5
댓글 5개
감사합니다 ^^
감사합니다
유용하게 쓰이겠네요! 감사합니다!
좋은 팁 감사 합니다.
감사합니다
