스와이퍼 다음, 이전 게시물 > 그누보드5 스킨

그누보드5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

스와이퍼 다음, 이전 게시물 정보

게시판 스와이퍼 다음, 이전 게시물

첨부파일

mobile.zip (36.6K) 16회 다운로드 2022-05-30 13:09:18 포인트 차감1
skin.zip (66.3K) 7회 다운로드 2022-05-30 13:09:18 포인트 차감1
테스트한 버전5.4.14
호환 가능 버전5.4 이상

본문

마우스나, 모바일에 제스처로 스와이프 하시면 다음페이지 이전페이지로 이동하는 스킨입니다.

컨텐츠가 많은 게시판에서 유용하더군요.

 

 

3422125589_1653883701.6505.png

 

그누보드 5.4에서 테스트 했습니다.

5.4 이상이면 어디든 적용할 수 있게 소스를 정리 해두었습니다.

 

5.4버전 베이직 게시판 쓰시는 분들은 그냥 다운로드 해서 적용하시면되구요.

 

다른 스킨이나 다른 버전? 게시판인 경우 view.skin.php 파일 제일 하단에

 

<?

/////////////////// 스와이퍼 페이징 by 벌이뉨 22-05-30 //////////////////////////

?>

.... 내용.....

 

<?

/////////////////// 스와이퍼 페이징 by 벌이뉨 22-05-30 //////////////////////////

?>

 

소스를 붙여 넣기 하시면 될 것 같습니다.


 
<?php 
/////////////////// 스와이퍼 페이징 by 벌이뉨 22-05-30 //////////////////////////
?>
<!-- Initialize Swiper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.5.0/swiper-bundle.min.js"></script>
<script>
    var mousePoint = 80;
    var sw_po = 1;
    var sw_po_jawoo = 1; 
    var prev_href = "<?=htmlspecialchars_decode($prev_href)?>";
    var next_href = "<?=htmlspecialchars_decode($next_href)?>";
    var currentPosition=0;
    var side_top = "240px";
    var side_rlfet = "30px";
    if(g5_is_mobile){
        side_top = "150px";
        side_rlfet = "5px";
    }
    function go_to(url){
        location.href=url;
    }
    $(function(){
        $('#bo_v').wrap('<div class="swiper-root"></div>').wrap('<div class="swiper-wrapper"></div>');
        $('.swiper-root').prepend('<div id="sidebox">다음 페이지</div><div id="sidebox_left">이전 페이지</div>');
        $('#sidebox').css({'top': side_top,'right': side_rlfet});
        $('#sidebox_left').css({'top': side_top,'left': side_rlfet});
        currentPosition = parseInt($("#sidebox").css("top"));
        var swiper = new Swiper('.swiper-root', {
            init: false
        });  
        swiper.on('transitionEnd', function(swiper) {
            if(sw_po > mousePoint){
                if(prev_href != ""){
                    go_to(prev_href);
                }
            }else if(sw_po < mousePoint*-1){
                if(next_href != ""){
                    go_to(next_href);
                }
            }
        });
        swiper.on('setTranslate', function(swiper, translate) {
            if(translate != 0) sw_po = translate;
            sw_po_jawoo = translate;
        
            if(sw_po_jawoo > 10){
                if(prev_href != "")
                    $("#sidebox_left").fadeIn();
            }else if(sw_po_jawoo < -10){
                if(next_href != "")
                    $("#sidebox").fadeIn();
            }else{
                $("#sidebox_left").fadeOut();
                $("#sidebox").fadeOut();
            }
        });
        swiper.init();
    });
    
    $(window).scroll(function(){
        var con_height = parseInt($(".swiper-wrapper").height());        
        var position = $(window).scrollTop();
        var top_position = position+currentPosition;
        if(con_height < top_position) top_position = con_height;           
        $("#sidebox").stop().animate({"top":top_position+"px"},500);
        $("#sidebox_left").stop().animate({"top":top_position+"px"},500);     
    });    
</script>    
<style>
#sidebox { 
    width : 80px;
    height : 80px;
    background-color:red; 
    position:absolute; 
    display:none;
    padding: 3px 2px;
    border-radius: 50%;
    text-align:center;
    line-height:80px;
    color: #fff;
    font-weight: bold;
}
#sidebox_left { 
    width : 80px;
    height : 80px;
    background-color:red; 
    position:absolute; 
    display:none;
    padding: 3px 2px;
    border-radius: 50%;
    text-align:center;
    line-height:80px;
    color: #fff;
    font-weight: bold;
}
</style>
<?php 
/////////////////// 스와이퍼 페이징 by 벌이뉨 22-05-30 //////////////////////////
?>

 

위 코드에서  $('#bo_v') 은 스와이퍼를 적용할 영역입니다. 

즉 순수한 베이직 게시판은 <article id="bo_v" style="width:<?php echo $width; ?>">를 div로 두번 감싸서

스와이퍼 영역을 만듭니다.

 

순수 베이직 게시판이 아니시라면 $('#bo_v')를 스와이퍼 적용할 영역으로 바꾸시면됩니다.

 

게시판 리스트에서 스와이퍼 페이징은 팁 자료실에 올려 두었습니다.

https://sir.kr/g5_tip/18578

추천
17

댓글 전체

오늘 오전에 이런 기능 있으면 PC는 물론 특히 모바일에서 매우 유용하겠다고 생각했는데!
아직 적용은 안해보았지만 감사합니다
전체 2,164 |RSS
그누보드5 스킨 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT