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개씩 노출 시키고 있는데 마지막으로 올린 게시물만 반복 노출이 되는 것입니다.
제목 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'] ?>
<?
}
?>
이런식입니다.
안녕하세요
네 그 기본 그누보드 변수가 안먹더라구요,
전 문의에서,
'해당 파일은 g5_board_file (첨부파일 테이블)만 참조하고 있기 때문입니다.'
라는 답변이 달렸었습니다.
저의 답변이나 이분의 답변에서 중요한건 반복문이 왜 $list만큼 맵핑이 아닌 10번의 반복이 돌아가는지를 여쭙는거에용 원본 소스코드가 그랬나요?
소스 그대로 넣고 돌려 봤는데 별 이상 없이 계속 잘 돌아 갑니다.
답변을 작성하시기 전에 로그인 해주세요.
