그누보드 갤러리 게시판 무한 스크롤

참고 자료는 일반 게시판 (table)형 무한 스크롤이길래

갤러리형(ul>li)으로 변경,,

 

 

아래 내용 찾아서 중간중간 추가,,

 

list

<form name="fboardlist" id="fboardlist" action="<?php echo G5_BBS_URL; ?>/board_list_update.php" onsubmit="return fboardlist_submit(this);" method="post">
<input type="hidden" name="bo_table" value="<?php echo $bo_table ?>">
<input type="hidden" name="sfl" value="<?php echo $sfl ?>">
<input type="hidden" name="stx" value="<?php echo $stx ?>">
<input type="hidden" name="spt" value="<?php echo $spt ?>">
<input type="hidden" name="sst" value="<?php echo $sst ?>">
<input type="hidden" name="sod" value="<?php echo $sod ?>">
<input type="hidden" name="page" value="<?php echo $page ?>">
<input type="hidden" name="sw" value="">

<!-- 추가 시작 -->
<div class="scrollTop topScroll"><i class="fa fa-arrow-up"></i> 마우스 스크롤 (이전글 불러오기)</div>
<div class="moreBar moreTop">불러오는 중</div>
<!-- 추가 끝 -->

<!-- 게시판 페이지 정보 및 버튼 시작 { -->

<ul id="gall_ul" class="gall_row">
    <!-- 추가 시작 -->
    <? $now_row = ''; ?>
    <!-- 추가 끝 -->
    <?php for ($i = 0; $i < count($list); $i++) {

      // 추가 시작
      $now_row = $list[$i]['wr_id'];
      // 추가 끝

      $classes = array();

      $classes[] = 'gall_li';
      $classes[] = 'col-gn-' . $bo_gallery_cols;

    <?php if (count($list) == 0) {
      echo "<li class=\"empty_list\">게시물이 없습니다.</li>";
    } ?>
  </ul>

  <!-- 추가 시작 -->
  <div class="moreBar moreBtm">불러오는 중</div>
  <div class="scrollTop btmScroll"><i class="fa fa-arrow-down"></i> 마우스 스크롤 (다음글 불러오기)</div>
  <!-- 추가 끝 -->


  <!-- 페이지 -->
  <?php //echo $write_pages; 
  ?>
  <!-- 페이지 -->

  <!-- 추가 시작 -->
  <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;
      $.ajax({
        type: "POST",
        url: url,
        dataType: "html",
        success: function(html) {

          var append_data = $(html).find('#gall_ul').html();
          var cking = $(html).find('.empty_list').attr("datano");
          setTimeout(function() {
            if (b == 'append') {
              $("#gall_ul").append(append_data);
            } else {
              $("#gall_ul").prepend(append_data);
            }
            $(".moreBar").slideUp();

            if (now_page == 1) {
              $(".topScroll").slideUp();
            }

            if (roll_page == total_page) {
              $(".btmScroll").slideUp();
            }
          }, 1000);

        },
        error: function(xhr, status, error) {
          alert(error);
        }
      });
    }
  </script>
  <!-- 추가 끝 -->

  <?php if ($list_href || $is_checkbox || $write_href) { ?>

 

 

css

.moreBar,
.scrollTop{ width:100%; height:auto; overflow:hidden; text-align:center; line-height:30px; font-size:12px; margin-top:20px; margin-bottom:20px; display:none; }

 

출처: https://sir.kr/bbs/board.php?bo_table=g5_skin&wr_id=27677

무한스크롤 게시판 스킨 > SIR