그누보드 QA - 유튜브 플로터 팝업 게시판 무한 스크롤로 응용시 문제

유튜브 플로터 팝업 게시판 무한 스크롤로 응용시 문제

qoqofh 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2021.06.08 13:42:10 조회 1761 (211.♡.♡.172)

본문

https://sir.kr/g5_skin/40277?sfl=wr_subject%7C%7Cwr_content&stx=%ED%94%8C%EB%A1%9C%ED%84%B0

이 게시판 스킨을 활용하여 유튜브 플로터형태의 게시판을 사용중 입니다.

위 사진은 현재 게시판 이미지 이며, 스크롤을 진행하여 다음 2페이지의 리스트를 불러오면 아래와 같이 나옵니다.(게시글 수는 총 9개인데, 3개가 떠야하는데 1개만 뜨고, 심지어 1개가 뜬 리스트를 클릭하면 팝업플로터가 되지 않습니다 ㅠ)

기존 스킨에서 좀 응용을 하여 무한스크롤리스트로 구현을진행하고 있는데, 뭐가 문제인지 잘되지 않네요 ㅠㅠ

스크립트는 이렇습니다.


<script>
    var total_page = "<?=$total_page?>";
    var now_page = "<?=$page?>";
    var roll_page = now_page;
    
    $(window).ready(function(){
        console.log(roll_page);
        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');
            }
        }
    });
    function callContent(a,b){
        if(b=='append'){
            $(".moreBtm").slideDown();
        }
        var url = "<?=G5_BBS_URL?>/board.php?bo_table=<?=$bo_table?>&page="+a;
        var tbody = "";
        var thtml = "";
        $.ajax({
            type:"GET",
            url:url,
            dataType : "html",
            success: function(html){
                tbody = html.split("<div class='portfolio__grid hover--one three--columns tbl_head01 tbl_wrap'>");
                thtml = tbody[1].split("</div>");
                setTimeout(function() { 
                    if(b=='append'){
                        $("div.portfolio__grid").append(thtml[0]);
                    }
                    $(".moreBar").slideUp();

                    if(roll_page == total_page){
                        $(".btmScroll").slideUp();
                    }
                }, 1000);
                
            },
            error: function(xhr, status, error) {
                alert(error);
            }  
        });
    }
</script>

팝업스크립트는 이렇습니다.


<script>
        $(".popyt").click(function() {
            
            var _bo = '<?php echo $bo_table ?>';
    var _id = $(this).data('wr_id');
    $.ajax({
        url: '<?php echo $board_skin_url ?>/ajax_hit.php',
        type: 'POST',
        data: {bo_table : _bo, wr_id : _id},
        success: function(data) {
            //alert(data);
        }
    });
            
            $(".video-popup").addClass("reveal"),
                $(".video-popup .video-wrapper").remove(),
                $(".video-popup").append("<div class='video-wrapper'><div class='video-wrapper_div2'><div class='video-wrapper_div'><iframe width='1000' height='563' src='https://youtube.com/embed/" + $(this).data("video") + "?rel=0&playsinline=1&autoplay=0' allow='accelerometer; gyroscope; picture-in-picture; encrypted-media' allowfullscreen style=''></iframe><div class='tit_box_con'>" + $(this).find("div.share_btn").html() + "<span class='ca_name_but'>분류 : </span><span class='ca_name_tit'>" + $(this).find("span").html() + "</span><span class='select_tit'>" + $(this).find("h5.select_view").html() + "</span><span class='subject_tit'>" + $(this).find("h4").html() + "</span><div class='right_box'>" + $(this).find("div.bo_info_in_right").html() + "<div class='con_download'><a href='" + $(this).find("p.href_lik").html() + "'>자세히 보기</a></div></div><span class='wr_content_txt'>" + $(this).find("p").html() + "</span>" + $(this).find('.wr_link').html() + "</div></div></div></div>");
            
            
        });
       
function copy_to_clipboard(idx) {    
    var copyText = document.getElementById('myInput_' + idx);
    copyText.select();
    copyText.setSelectionRange(0, 99999);
    document.execCommand("Copy");
    alert('링크가 복사되었습니다.');
}
    </script>

무엇이 문제일까요 ㅠㅠ?