페이지네이션이아닌, 무한스크롤로 구현하려고 합니다.
본문
<div class="tbl_head01 tbl_wrap">
<div class="section" style="padding:0; margin:0">
<div class="container" style="max-width: 100% !important;">
<?php if ($is_admin) { ?>
<div id="bo_admin" style="margin-bottom:30px">
<?php if ($is_checkbox) { ?>
<div id="gall_allchk" class="all_chk chk_box">
<input type="checkbox" id="chkall" onclick="if (this.checked) all_checked(true); else all_checked(false);" class="selec_chk">
<label for="chkall">
<span></span>
<b class="sound_only">현재 페이지 게시물 </b> 전체선택
</label>
</div>
<?php } ?>
</div>
<?php } ?>
<div class="cbt"></div>
<div class="portfolio__grid hover--one three--columns">
<div class="sizer"></div>
<?php for ($i=0; $i<count($list); $i++) {
$classes = array();
$classes[] = 'gall_li';
$classes[] = 'col-gn-'.$bo_gallery_cols;
if( $i && ($i % $bo_gallery_cols == 0) ){
$classes[] = 'box_clear';
}
if( $wr_id && $wr_id == $list[$i]['wr_id'] ){
$classes[] = 'gall_now';
}
?>
<div class="item" style="">
<?php if($member['mb_level'] == 10){ //관리자만 가능?>
<a data-video="<? echo $list[$i]['wr_10'];?>" class="popyt mov_b2" style="cursor:pointer;">
<?php }else if($member['mb_level'] <= 10){ //관리자 아닐때?>
<a data-video="<? echo $list[$i]['wr_10'];?>" class="popyt mov_b2" style="cursor:pointer;">
<?php }?>
<?php
$thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height'], false, true);
if($thumb['src']) {
$img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" >';
} else if ($list[$i]['wr_10']){
$img_content = '<img src="https://s.ytimg.com/yts/img/favicon_144-vfliLAfaB.png" style="position:absolute; width:30px; margin:15px 20px;"><img src="https://img.youtube.com/vi/'.$list[$i]['wr_10'].'/0.jpg">';
} else {
$img_content = '<div class="no_image">No Image</div>';
}
echo $img_content;
?>
<?php //echo ( isset($list[$i]['icon_new']) && !empty($list[$i]['icon_new']) ) ? "<span class='circle'>new</span>" : "";?>
<div class="caption">
<div class="inner">
<?php if ($list[$i]['ca_name']) { ?><span style="color:#fff; font-size:11px; padding:bottom:5px;"><?php echo $list[$i]['ca_name']; ?></span><?php } ?>
<section style="display:none;" class="ca_name_list_box">
<?php
$categories = explode('|', $is_category);
if ($categories && $list[$i]['ca_name']) { ?>
<?php
echo str_replace($list[$i]['ca_name'], '<h6 style="display: inline-block;color: #333;display: inline-block;padding: 0px 10px;">' . $list[$i]['ca_name'] . '</h6>', $board['bo_category_list']);
}
?>
</section>
<h4><?php echo $list[$i]['subject'] ?></h4>
<p style="margin-top:5px; display: none;"><?php echo $list[$i]['wr_content'] ?></p>
<p class="href_lik" style="display:none"><?php echo $list[$i]['href'] ?></p>
<div class="share_btn" style="position:fixed; top:-99999px;">
<input id="myInput_<?php echo $i ?>" value="<?php echo $list[$i]['href'] ?>" readonly style="position:fixed; top:-99999px;">
<p onclick='copy_to_clipboard(<?php echo $i ?>)' class="share_btn_p">공유하기 <i class='fas fa-share-alt'></i></p>
</div>
<!--<p class="btn_down_link" style="display:none;"><?php echo $list[$i]['file'][0]['href'] ?>&js=on</p>-->
<?php echo "<p class='btn_down_name' style='display: none;'>".$list[$i]['file'][0]['source']."</p>"; ?>
<span class="down_count" style="display:none; margin-top:10px;"><?php echo $list[$i]['file']['count'] ? '수업에 필요한 첨부파일 자료가 ' . $list[$i]['file']['count'] . '개 있습니다.<br>' : '' ?></span>
</div>
<div class="bo_info_in_right" style="float:right; font-weight:100; display:none;">
<?php
$url = "https://www.googleapis.com/youtube/v3/videos?key=AIzaSyANTsrUm3O4GbT9qXjXJR1UjzFl1JkUIYU&part=snippet,contentDetails,statistics&id=".$list[$i]['wr_10'];
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$content = curl_exec($ch);
curl_close($ch);
$result = json_decode($content);
$di = new DateInterval($result->items[0]->contentDetails->duration);
echo "<span class='bo_date'>출처 : ".$result->items[0]->snippet->channelTitle."</span><br>";
echo "<span class='bo_date'>동영상 길이 : ".$di->format('%i분%s초')."</span>";
?>
<span class="bo_date" style="display:none;"> <i class="fas fa-comments"></i> <?php echo $list[$i]['comment_cnt'] ?></span>
<span class="bo_date" style="display:none;"> <i class="fas fa-thumbs-up"></i> <?php echo $list[$i]['wr_good'] ?></span>
<!--<span class="bo_date"> <i class="fa fa-clock-o"></i> <?php echo $list[$i]['wr_10'] ?></span>-->
<!--
<?php if ($list[$i]['comment_cnt']) { ?><span class="sound_only">댓글</span> <i class="fas fa-comments"></i> <?php echo $list[$i]['comment_cnt']; ?> <?php } ?>
<?php if ($list[$i]['wr_good']) { ?><i class="fas fa-thumbs-up"></i> <?php echo $list[$i]['wr_good'] ?> <?php } ?>
<?php if ($list[$i]['wr_nogood']) { ?><i class="fa fa-thumbs-o-down"></i> <?php echo $list[$i]['wr_nogood'] ?> <?php } ?>--></div>
</div>
</a>
<div class="video_text">
<a href="<?php echo $list[$i]['href'] ?>">
<span style="font-size:.55em; padding-bottom:10px; width:100%;"><?php echo $list[$i]['ca_name']; ?><span>
<h4 style="border-top: 1px solid #4c4e6b; margin-top:5px;"><?php echo $list[$i]['subject'] ?></h4>
<!--<p> 상세설명 가나다라마바사 아자차카타파하</p>
<a href="#" class="more">더보기 ></a>-->
</a>
<!--<p class="tit_mem" style="color:#0B79B5 !important; display:inline-block;"><?php echo $list[$i]['name'] ?></p>-->
<div class="bo_info">
<span class="bo_date hit_css"> <i class="fas fa-play"></i> <?php echo $list[$i]['wr_hit'] ?></span>
<!--<span class="sound_only">작성자</span><?php echo $list[$i]['name'] ?>-->
<div class="bo_info_in_right" style="font-weight:100;">
<?php
$url = "https://www.googleapis.com/youtube/v3/videos?key=AIzaSyANTsrUm3O4GbT9qXjXJR1UjzFl1JkUIYU&part=snippet,contentDetails,statistics&id=".$list[$i]['wr_10'];
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$content = curl_exec($ch);
curl_close($ch);
$result = json_decode($content);
$di = new DateInterval($result->items[0]->contentDetails->duration);
echo "<span class='bo_date'>출처 : ".$result->items[0]->snippet->channelTitle."</span><br>";
echo "<span class='bo_date'>동영상 길이 : ".$di->format('%i분%s초')."</span>";
?>
<span class="bo_date" style="display:none;"> <i class="fas fa-comments"></i> <?php echo $list[$i]['comment_cnt'] ?></span>
<span class="bo_date" style="display:none;"> <i class="fas fa-thumbs-up"></i> <?php echo $list[$i]['wr_good'] ?></span>
<!--<span class="bo_date"> <i class="fa fa-clock-o"></i> <?php echo $list[$i]['wr_10'] ?></span>-->
<!--
<?php if ($list[$i]['comment_cnt']) { ?><span class="sound_only">댓글</span> <i class="fas fa-comments"></i> <?php echo $list[$i]['comment_cnt']; ?> <?php } ?>
<?php if ($list[$i]['wr_good']) { ?><i class="fas fa-thumbs-up"></i> <?php echo $list[$i]['wr_good'] ?> <?php } ?>
<?php if ($list[$i]['wr_nogood']) { ?><i class="fa fa-thumbs-o-down"></i> <?php echo $list[$i]['wr_nogood'] ?> <?php } ?>--></div>
</div>
</div>
<!--<div style="color:#333; float:right;" class="txt">
<a href="<?php echo $list[$i]['href'] ?>">
<?php if ($list[$i]['comment_cnt']) { ?><span style="font-weight:bold; color:#ff6666;"> <?php echo $list[$i]['wr_comment']; ?><span><?php } ?></a>
</div>-->
<?php if ($is_checkbox) { ?>
<div class="txt" style="font-size:9px; color:#999; letter-spacing:0px; float:right; line-height:25px; text-align:right;">
<input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>">
</div>
<?php } ?>
<div style="clear:both;"></div>
</div>
<?php } ?>
<?php if (count($list) == 0) { echo '<div class="item" style="width:100%; text-align:center;"><h3 style="width:100%; padding:30px;">등록된 게시물이 없습니다.</h3></div>'; } ?>
</div></div></div>
</div>
<div class="moreBar moreBtm">불러오는 중</div>
<div class="scrollTop btmScroll"><i class="fa fa-arrow-down"></i> 마우스 스크롤 (다음글 불러오기)</div>
이런식으로 구조를 게시판 리스트 구조를 잡아놓았는데, 페이지네이션이아닌, 무한스크롤로 구현하려고 합니다.
<script>
var total_page = "<?=$total_page?>";
var now_page = "<?=$page?>";
var roll_page = now_page;
$(window).ready(function(){
console.log(now_page);
if(now_page != 1){
$(".topScroll").show();
}
if(roll_page != total_page){
$(".btmScroll").show();
}
});
$(window).scroll(function(){
var chkBtm = parseInt($(document).height()) - parseInt($(window).height());
if(chkBtm == $(window).scrollTop()){
roll_page++;
if(roll_page <= total_page){
callContent(roll_page,'append');
}
}else if($(window).scrollTop() == 0){
now_page--;
if(now_page > 0){
callContent(now_page,'prepend');
}
}
});
function callContent(a,b){
if(b=='append'){
$(".moreBtm").slideDown();
}else{
$(".moreTop").slideDown();
}
var url = "<?=G5_BBS_URL?>/board.php?bo_table=<?=$bo_table?>&page="+a;
var tbody = "";
var thtml = "";
$.ajax({
type:"POST",
url:url,
dataType : "html",
success: function(html){
tbody = html.split('<div class="container" style="max-width: 100% !important;">');
thtml = tbody[1].split('</div>');
setTimeout(function() {
if(b=='append'){
$(".tbl_head01").find('.container').append(thtml[0]);
}else{
$(".tbl_head01").find('.container').prepend(thtml[0]);
}
$(".moreBar").slideUp();
if(now_page == 1){
$(".topScroll").slideUp();
}
if(roll_page == total_page){
$(".btmScroll").slideUp();
}
}, 1000);
},
error: function(xhr, status, error) {
alert(error);
}
});
}
</script>
스크립트쪽도 이렇게 짜놓았는데,
뭐가 문제인지 잘 구현이 되지않네요 ㅠㅠ 자문을 구해봅니다 ㅠ
답변 1
코드만 보고선 힘들듯합니다. 예제를 봐야할듯하네요
https://sir.kr/g5_skin/27677
여기에 있는 내용을 참고 하였는데, 기본적으로 구조가 테이블 구조로 되어있는데, 지금 구현되어있는 홈페이지는 테이블 구조가 아닌 div구조로 되어있어서 좀 진행이 어려운 상태입니다 ㅠ
답변을 작성하시기 전에 로그인 해주세요.
