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 } ?>
답변을 작성하시기 전에 로그인 해주세요.
