swiper 갤러리 게시판 그누보드 변수 적용 문제

swiper 갤러리 게시판 그누보드 변수 적용 문제

QA

swiper 갤러리 게시판 그누보드 변수 적용 문제

본문

안녕하세요

 

Swiper 갤러리 게시판

 

위 게시판을 사용중입니다.

많은 댓글이 달렸는데 피드백을 주신지 오래된 것 같아 여기에 글을 남기는데 파일이 워낙 많아 list.skin.php 게시판 코드만 남긴다고 해결이 될지 모르겠네요

 

일반적인 그누보드 변수가 적용이 되지 않아 글 제목이나 내용을 노출 시킬 수가 없네요 ㅠㅠ

 

일단 코드 남겨보겠습니다.

 

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="<?php echo G5_JS_URL; ?>/swiper-4.4.6/dist/css/swiper.min.css"> -->
<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>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <p>고객님의 리뷰만으로도 <?=$config['cf_title']?>는 <span>이미 검증</span> 되었습니다.</p>
        <!-- 레이어창 -->
        <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 id="exif_info_bg" class="exif_info"></div>
                    <div id="exif_info" class="exif_info"></div>
                    <div id="content_info_bg" class="content_info"></div>
                    <div id="content_info" class="pop_open content_info"></div> -->
                    <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'];?>'/>
                            <h4>제목</h4>
                            <p>내용</p>
                        </div>
                    <?php } ?>
                    </div>
                    <!-- page navigation -->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>
            <!-- <div class="bookmark"><?php // echo BookMark($total_count, $img_file_url, $files); ?></div> -->
        </div>
    </div>
</div>
<!-- <script src="<?php echo G5_JS_URL; ?>/swiper-4.4.6/dist/js/swiper.min.js"></script> -->
<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);
                        $('#sw span.subject').attr('data-id',data.wr_id);
                        $('#content_info').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']); // 촬영정보
});
</script>

<?php
// $end_memory = memory_get_usage(); // 메모리사용량 체크 끝.
// if($is_admin) {
// echo "<center>";
// echo "<span style='font-size:15px;font-weight:bold;'>";
// echo '갤러리 메모리 사용량 : '.number_format($end_memory - $start_memory).' byte'.PHP_EOL;
// echo "</span></center>";
// }
?>
 

 

중간에 '제목', '내용'으로 입력해놓은 부분에 각 글에 대한 제목과 내용을 노출시키려 합니다.

그누보드 변수만 적용이 된다면 뷰게시판으로 링크 거는 것도 어렵지 않을 것 같은데...

변수가 적용되지 않는 이유를 찾기는 저로서는 너무 어렵네요 ㅠㅠ

 

필요한 파일은 전달 가능하니 고수님들 도움 좀 부탁드리겠습니다..

 

감사합니다.

이 질문에 댓글 쓰기 :

답변 2

ajax로 exif 정보를 가져올때 이미지가 등록된 게시글의 제목과 내용도 함께 불러옵니다.

 

제목과 내용 부분을 아래와 같이 수정해주시고.

<h4 class="wr_subject">제목</h4>
<p class="wr_content">내용</p>

 

exif_info 함수내 코드를 아래와 같이 각각 변경해 주세요.

수정전 : $('#exif_chk .subject').text(data.wr_subject);
수정후 : $('.wr_subject').text(data.wr_subject);

 

 

수정전 : $('#content_info').html(data.wr_content);
수정후 : $('.wr_content').html(data.wr_content);

정말 감사합니다.
제가 그누보드 변수를 적용하는 방법으로 진행하고 뷰게시판으로의 링크는 직접 진행 하려고 했는데 안되겠네요... 죄송하지만 리스트의 각 게시물 클릭 시 해당하는 글로(뷰게시판) 넘어가게 하는 방법도 알려주실 수 있을까요?
부탁드려봅니다 ㅠㅠ

해당 파일은 g5_board_file (첨부파일 테이블)만 참조하고 있기 때문입니다.


<div class="swiper-wrapper">
                    <?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> -->
                            <img width='100%' height='100%' src='<?php echo $img_file_url;?>/<?php echo $files[$i]['bf_file'];?>'/>
                            <h4><?php echo $row['wr_subject'] ?></h4>
                            <h4><?php echo $row['wr_content'] ?></h4>
                        </div>
                    <?php } ?>

 

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

회원로그인

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