Swiper 슬라이더 사용 게시판 오류

Swiper 슬라이더 사용 게시판 오류

QA

Swiper 슬라이더 사용 게시판 오류

본문

안녕하세요

 

벌써 같은 게시판에 대해서 3번째 질문을 드리네요 ㅠ

 

게시판

 

위 게시판을 사용중이고 list.skin.php 페이지 코드는 아래와 같은 상태입니다.

 


<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);
unset($list);
//ini_set('memory_limit', '64M'); // 사진갯수가 많아 오류가 날 경우 주석을 풀고 메모리를 적절하게 수정해주세요.
//phpinfo();  // 허용 메모리 확인 : 주석 제거후 memory_limit 검색.
$start_memory = memory_get_usage(); // 메모리사용량 체크 시작
include_once($board_skin_path."/skin.function.php");
$db_use = "Y"; //DB 사용시 'Y', 폴더 사용시 'N' 구분 주의.
if($db_use=="Y") {
    // DB 사용시 수정하지 않아도 됩니다.
    $img_file_url = G5_URL."/data/file/".$bo_table;
    $img_file_path = G5_PATH."/data/file/".$bo_table;
    $files = db_Files($bo_table);
} else {
    // 폴더용으로 사용시 반드시 이미지가 있는 디렉토리 경로를 설정하세요.
    // 디렉토리 파일리스트 ( 폴더PATH, 정렬구분(오름차순 - asc, 내림차순 - desc)
    $img_file_url = G5_URL."/test_img"; // 이미지 파일 URL, 마지막에 '/' 제외하세요.
    $img_file_path = G5_PATH."/test_img"; // 이미지 파일 패쓰, 마지막에 '/' 제외하세요.
    $files = dir_files($img_file_path, 'desc'); //디렉토리에 있는 파일선택
}
$total_count = count($files); // 전체파일갯수.
// 이미지가 없다면... 숫자 이미지 10개 로드
if($total_count==0) {
    // 디렉토리 파일리스트 ( 폴더PATH, 정렬구분(오름차순 - asc, 내림차순 - desc)
    $img_file_url = $board_skin_url."/no_image"; // 이미지 파일 URL, 마지막에 '/' 제외하세요.
    $img_file_path = $board_skin_path."/no_image"; // 이미지 파일 패쓰, 마지막에 '/' 제외하세요.
    $files = dir_files($img_file_path, 'desc'); //디렉토리에 있는 파일선택
    $total_count = count($files); // 전체파일갯수.
}
//print_r2($files); // 배열정보 확인시 주석 제거.
?>
<script>
var board_skin_url = "<?php echo $board_skin_url; ?>";
var board_skin_path = "<?php echo $board_skin_path; ?>";
</script>
<script src="<?php echo $board_skin_url; ?>/script.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css">
<!-- 게시판 목록 시작 { -->
<div id="bo_list" style="width:<?php echo $width; ?>">
    <div>
        <!-- 레이어창 -->
        <div class="m_layer  pop_layer  hidden">
            <div class="pop_inbox">
              <iframe name="ifm_write" id="ifm_write" src="" scrolling='auto'></iframe>
            </div>
            <div class="pop_close">창 닫 기</div>
        </div>
        <!-- 레이어 창 -->
        <!-- 게시판 페이지 정보 및 버튼 시작 { -->
        <div id="bo_btn_top">
            <?php if ($rss_href || $write_href) { ?>
            <ul class="btn_bo_user">
                <?php if ($rss_href) { ?><li><a href="<?php echo $rss_href ?>" class="btn_b01 btn"><i class="fa fa-rss" aria-hidden="true"></i> RSS</a></li><?php } ?>
                <?php if ($admin_href) { ?><li><a href="<?php echo $admin_href ?>" class="btn_admin btn" style="font-size:1rem"><i class="fa fa-user-circle" aria-hidden="true"></i> 관리자</a></li><?php } ?>
                <?php if ($write_href) { ?><li><a href="<?php echo $write_href ?>" class="btn_b02 btn" style="font-size:1rem"><i class="fa fa-pencil" aria-hidden="true"></i> 글쓰기</a></li><?php } ?>
            </ul>
            <?php } ?>
        </div>
        <!-- } 게시판 페이지 정보 및 버튼 끝 -->
        <div id="gallery_content">
            <!-- <span name="swiper-help">키보드 화살표키를 눌러 이전 또는 다음 사진으로 이동 할 수 있습니다.</span> -->
            <div id="sw">
                <div id="exif_chk" style="display:none">
                    <span id="set_subject" class="btn_view pop_open" title="글내용을 새창으로 보기">자세히보기</span>
                    <span class="subject" data-id='<?php echo $files[0]['wr_id'];?>' title='자세히 보기'></span><!-- 글제목-->
                    <span id="content_btn" class="content_on"></span><!-- 본문내용 온오프 버튼 -->
                    <span id="set_exif" class="exif_on"></span><!-- EXIF 온오프 버튼 -->
                </div>
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                    <?php for($i=0; $i < 10; $i++) { ?>
                        <div class="swiper-slide">
                            <!--<span class='page'><?php // echo ($i+1)."/".$total_count; ?></span>-->
                            <img width='100%' height='100%' src='<?php echo $img_file_url;?>/<?php echo $files[$i]['bf_file'];?>'/>
                            <div style="height:150px;padding:10px">
                                <h4 class="wr_subject" data-no="">제목</h4>
                                <p class="wr_content">내용</p>
                            </div>
                        </div>
                    <?php } ?>
                    </div>
                    <!-- page navigation -->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>
        </div>
        <p class="blnk2">다음 성공스토리의 자리는 <?=$config['cf_title']?>를 선택하신 가맹점주님의 자리입니다.</p>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.min.js"></script>
<script>
$(function() {
    // 슬라이드 넘길때 가장 가까운값 찾아서 색인에 표시하기 위해 색인을 배열로 생성.
    var sak_arr = $("div.bookmark span").map(function() {
                    return $(this).text();
                    }).get();
    var files = <?php echo json_encode($files); ?>; // DB 또는 폴더에서 불러온 이미지배열
    var img_url = "<?php echo $img_file_url; ?>"; // 이미지 파일 URL
    var img_path = "<?php echo $img_file_path; ?>"; // 이미지 파일 path
    var total = "<?php echo $total_count; ?>"; // 갤러리사진 전체 갯수.
    var db_use = "<?php echo $db_use; ?>"; // 갤러리 타입이 DB인지 폴더인지 구분.
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 5, // 한번에 보이는 슬라이드 갯수
        /* swiper-slide에 각각 margin-right를 준다. */
        spaceBetween: 20,
        autoHeight: true, //enable auto height
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        loop:true, // false 하면 이미지 10만 로딩, true시 지정한 수만큼 로드
        autoplay: {
            delay: 2500,
        },
        speed: 700,
        keyboard: {
            enabled: true,
            onlyInViewport: false,
        },
        //mousewheel: {
            //invert: false,
        //},
    });
    // 페이지가 로드되면 1페이지며, 1페이지에서 좌측에서 우측으로 슬라이드를 하지 못하게 설정 1페이지에서는 무조건 우측에서 좌측으로 가능.
    swiper.allowSlidePrev=false;
    swiper.on('slideNextTransitionStart', function(event, data) {
        swiper.allowSlidePrev=true; // 좌측->우측 슬라이드 잠금해제
        var div_page = $("div.swiper-slide-active span").text();
        var div_idx = $("div.swiper-slide").index($("div.swiper-slide-active"));
        var page = div_page.split("/");
        var real_page = parseInt(page[0]);
        sak(parseInt(page[0])); // 색인 강조 - 가장 가까운값 찾아서 하이라이트
        if(parseInt(page[0]) == total) {
            swiper.allowSlideNext=false; // 좌측->우측 슬라이드 잠금
            return false;
        }
        // 촬영정보
        exif_info(files[(real_page-1)]['wr_id'], files[(real_page-1)]['bf_no'], db_use, img_path, files[(real_page-1)]['bf_file']);
        img_idx = parseInt(page[0]) + 2;
        var no = (img_idx+1) % 10;
        no = (no==0)? 10:no;
        if((img_idx+1)>total) {
            return false;
        }
        $('div.swiper-slide').eq(no).html("<span class='page'>"+(img_idx+1)+" / "+total+"</span><img src='"+img_url+"/"+files[img_idx]['bf_file']+"'  width='100%' height='100%'/>");
        if(no == 1 || no == 10) {
            no = (no==1)? 11:0;
            $('div.swiper-slide').eq(no).html("<span class='page'>"+(img_idx+1)+" / "+total+"</span><img src='"+img_url+"/"+files[img_idx]['bf_file']+"'  width='100%' height='100%'/>");
        }
    });
    swiper.on('slidePrevTransitionStart', function() {
        swiper.allowSlideNext=true; // 우측 -> 좌측 슬라이드 잠금해제
        var div_page = $("div.swiper-slide-active span").text();
        var div_idx = $("div.swiper-slide").index($("div.swiper-slide-active"));
        var page = div_page.split("/");
        var real_page = parseInt(page[0]);
        sak(parseInt(page[0])); // 색인 강조 - 가장 가까운값 찾아서 하이라이트
        if(page[0] == 1) {
            swiper.allowSlidePrev=false; // 좌측->우측 슬라이드 잠금
            return false;
        }
        // 촬영정보
        exif_info(files[(real_page-1)]['wr_id'], files[(real_page-1)]['bf_no'], db_use, img_path, files[(real_page-1)]['bf_file']);
        img_idx = parseInt(page[0]) - 3;
        var no = (img_idx+1) % 10;
        no = (no==0)? 10:no;
        if((img_idx+1) < 1) {
            return false;
        }
        $('div.swiper-slide').eq(no).html("<span class='page'>"+(img_idx+1)+" / "+total+"</span><img src='"+img_url+"/"+files[img_idx]['bf_file']+"'  width='100%' height='100%'/>");
        if(no == 1 || no == 10) {
            no = (no==1)? 11:0;
            $('div.swiper-slide').eq(no).html("<span class='page'>"+(img_idx+1)+" / "+total+"</span><img src='"+img_url+"/"+files[img_idx]['bf_file']+"'  width='100%' height='100%'/>");
        }
    });

    // 페이지 이동.
    bk = function(page) {
        var total = files.length;
        var url = img_url;
        var start = page; //시작페이지는 항상 1, 11, 21, 31, 41 . . . 로 시작되어야 합니다.
        var end = page+10; // 고정값.
        sak(page); // 색인 강조 - 가장 가까운값 찾아서 하이라이트
        end = (end > (total+1))? (total+1):end;
        var n = 1;
        for(i=start; i < end; i++) {

            $('div.swiper-slide').eq(n).html("<span class='page'>"+i+" / "+total+"</span><img src='"+url+"/"+files[(i-1)]['bf_file']+"'  width='100%' height='100%'/>");
            if(n == 1 || n == 10) {
                no = (n==1)? 11:0;
                $('div.swiper-slide').eq(no).html("<span class='page'>"+i+" / "+total+"</span><img src='"+url+"/"+files[(i-1)]['bf_file']+"'  width='100%' height='100%'/>");
            }
            if(n==5) {
                // 촬영정보
                exif_info(files[(i-1)]['wr_id'], files[(i-1)]['bf_no'], db_use, img_path, files[(i-1)]['bf_file']);
            }
            n++;
        }
        swiper.slideTo(5, 1000, true);  // 페이지 이동시 항상 중앙으로 이동. (다섯번째)
        swiper.allowSlidePrev=true; // 우측 -> 좌측 슬라이드 잠금해제
        swiper.allowSlideNext=true; // 좌측 -> 우측 슬라이드 잠금해제
    }
    // 슬라이드를 넘길때 현재 페이지가 색션의 숫자와 가장 가까운 색션을 찾아서 하이라이트 해준다.
    sak = function(page) {
        var data = sak_arr; // 색인배열
        var target = page; // page와 가까운값
        var near = 0;
        var idx = 0;
        var abs = 0; //여기에 '' 값이 들어감
        var min = total; //해당 범위에서 가장 큰 값
        for (var i = 0; i < data.length; i++)
        {
            abs = ((data[i] - target) < 0) ? -(data[i] - target):(data[i] - target);
            if (abs < min)
            {
                min = abs; //MIN
                near = data[i]; //near : 가까운값
                idx = i; // 가까운값의 span 인덱스
            }
        }
        $("div.bookmark span").css({"background":""});
        $("div.bookmark span").eq(idx).css({"background":"#dd6666"});
    }
    exif_info = function(wr_id, bf_no, db_use, filepath, filename) {
        $.ajax({
            type : "POST",
            url : board_skin_url+"/exif_info.php?bo_table="+g5_bo_table,
            data : {
                "wr_id":wr_id,
                "bf_no":bf_no,
                "db_use":db_use,
                "fp":filepath,
                "fn":filename
            },
            dataType: "json",
            async: false,
            cache: false,
            error : function(error) {
                //alert("Error!");
            },
            success : function(data) {
                if(data) {
                    if(db_use=='Y') {
                        $('#exif_info').html(data.exif);
                        // $('#exif_chk .subject').text(data.wr_subject);
                        $('.wr_subject').text(data.wr_subject);
                        $('.wr_subject').data('no', data.wr_id);
                        $('#sw span.subject').attr('data-id',data.wr_id);
                        // $('#content_info').html(data.wr_content);
                        $('.wr_content').html(data.wr_content);
                    } else {
                        $('#exif_info').html(data.exif);
                    }
                }
            },
            complete : function() {
                //alert("complete!");
            }
        });
    }
    sak('1'); // 접속할때 초기값. (첫번째 사진으로)
    exif_info(files[0]['wr_id'], files[0]['bf_no'], db_use, img_path, files[0]['bf_file']); // 촬영정보
    $('.swiper-slide').on('click', function() {
        let wr_id = $(this).find('.wr_subject').data('no');
        location.href = "<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $bo_table ?>&wr_id=" + wr_id;
    });
});
</script>

 

최초에 그누보드 변수가 먹지를 않아 질문을 드렸는데 제목과 내용 노출, 뷰페이지로의 링크는 해결이 되었습니다.

 

현재 맞닥들인 문제는,

 

총 10개의 게시물을 5개씩 노출 시키고 있는데 마지막으로 올린 게시물만 반복 노출이 되는 것입니다.

 

1935517851_1664342838.895.png

 

제목 01 ~ 제목 10까지 글을 올렸는데 제목 10만 위와 같이 나오고 있습니다.

 

추가로 코드가 필요하면 댓글 남겨주시면 올리도록 하겠습니다.

 

도움 부탁드립니다ㅠㅠ

 

감사합니다

 

이 질문에 댓글 쓰기 :

답변 4

수정


                    <?php for ($i = 0; $i < 10; $i++) { 
                        $tmp_write_table = $g5['write_prefix'] . $bo_table;
                        $sql = "select * from {$tmp_write_table} where wr_id = '{$files[$i]['wr_id']}'";
                        $row = sql_fetch($sql);
                    ?>
                        <div class="swiper-slide">
                            <!--<span class='page'><?php // echo ($i+1)."/".$total_count; ?></span>-->
                            <a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $bo_table ?>&wr_id=<?php echo $row['wr_id'] ?>">
                            <img width='100%' height='100%' src='<?php echo $img_file_url;?>/<?php echo $files[$i]['bf_file'];?>'/>
                            <div style="height:150px;padding:10px">
                                <h4 class="wr_subject" data-no=""><?php echo $row['wr_subject'] ?></h4>
                                <p class="wr_content"><?php echo $row['wr_content'] ?></p>
                            </div>
                            </a>
                        </div>
                    <?php } ?>

 

주석처리 or 삭제

* $('.wr_subject').text(data.wr_subject);
$('.wr_subject').data('no', data.wr_id);

$('.wr_content').html(data.wr_content);

 

* $('.swiper-slide').on('click', function() {
        let wr_id = $(this).find('.wr_subject').data('no');
        location.href = "<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $bo_table ?>&wr_id=" + wr_id;
    });



<?php for($i=0; $i < 10; $i++) { ?>
                        <div class="swiper-slide">
                            <!--<span class='page'><?php // echo ($i+1)."/".$total_count; ?></span>-->
                            <img width='100%' height='100%' src='<?php echo $img_file_url;?>/<?php echo $files[$i]['bf_file'];?>'/>
                            <div style="height:150px;padding:10px">
                                <h4 class="wr_subject" data-no="">제목</h4>
                                <p class="wr_content">내용</p>
                            </div>
                        </div>
                    <?php } ?>


원래 코드가 이게 맞나요?... 


<!--<span class='page'><?php // echo ($i+1)."/".$total_count; ?></span>-->

원래는 이 부분 주석이 풀려 있었고,


<div style="height:150px;padding:10px">
                                <h4 class="wr_subject" data-no="">제목</h4>
                                <p class="wr_content">내용</p>
                            </div>

이 부분은 추가 된 부분입니다.

<?php for($i=0; $i < 10; $i++) { ?>
                        <div class="swiper-slide">
                            <!--<span class='page'><?php // echo ($i+1)."/".$total_count; ?></span>-->
                            <img width='100%' height='100%' src='<?php echo $img_file_url;?>/<?php echo $files[$i]['bf_file'];?>'/>
                            <div style="height:150px;padding:10px">
                                <h4 class="wr_subject" data-no="">제목</h4>
                                <p class="wr_content">내용</p>
                            </div>
                        </div>
                    <?php } ?>

 

위 부분이 이상한거 같네요 보통 리스트 스킨에서 리스트 불러오는 부분은

<?php
        for ($i=0; $i<count($list); $i++) {

?>

제목 : <?php echo $list[$i]['subject'] ?>

<?

}

?>

이런식입니다. 

 

답변을 작성하시기 전에 로그인 해주세요.
전체 93
QA 내용 검색

회원로그인

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