Swiper 슬라이더를 이용한 메인페이지 게시판글 연동이 가능한가요?
본문
최신글 스킨을 이용해서 슬라이드 배너로 노출하는것은 스킨을 검색해서 찾다보니 해결됬습니다.
그런데... 문제는 최신글 스킨을 게시판으로 연동을 하니 한개의 게시판에만 적용이 되더라구요.
저는 메인화면에 게시판별로 슬라이드 배너로 노출을 시키고 싶거든요.
Swiper 슬라이더를 이용해서 이미지 링크부분을 프로그래밍으로 게시판 게시물로 연동이 가능할까요?
가능하다면 고수님들의 조언 부탁드립니다.
저는 초보인점을 생각해서... 최대한 쉽게 설명해주시면 감사하겠습니다. ^^;;
답변 2
<div id="responsive_wrapper" style="max-width: 700px; margin: 0 auto;">
<ul id="demo3" class="slides">
<?php for ($i=0; $i<count($list); $i++) { ?>
<li>
<?php $thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height']); ?>
<?php if($thumb['src'] != ''){?>
<img src="<?php echo $thumb['src']?>">
<?php }else{?>
<img src="<?php echo '이미지없을시 사용하는 이미지 경로'?>" alt="<?php echo '이미지없을시 사용하는 이미지 경로'?>">
<?php }?>
<div class="slide-desc">
<h2><?php echo $list[$i]['subject']?></h2>
<p><?php echo conv_content(mb_strimwidth($list[$i]['wr_content'], 0, 100, '..', 'UTF-8') , 150)?> <a class="more" href="<?php echo $list[$i]['href'] ?>">더보기</a></p>
</div>
</li>
<?php } ?>
</ul>
</div>
이걸로 사용해보시고 문의사항 있으면 말씀 주세요
위에 소스를 적용해 보았지만...
이미지 경로를 못찾아서 이미지가 아무것도 노출이 되지 않습니다. ^^;;
앗.. 그새 내용이 바꼇네요 혹시
문제는 최신글 스킨을 게시판으로 연동을 하니 한개의 게시판에만 적용이 되더라구요.
이부분 소스코드를 볼 수 있을까요? 아마 <?php latest('000', '0000') ?>
의 형태로 돼있을것같은데
앗~ 다른 방법을 찾아볼려고 질문을 할려고했더니 질문이 2개이상이면 안된다고해서..
답변이 없길래 수정을 했었거든요.. ^^;;
그런데, 글 작성후 확인하니 답변을 주셨네요.
우선, 답변 감사합니다.
알려주신방법으로 적용해볼께요.
현재 테스트중인 스킨은 기본 스킨에서 수정중입니다.
<h2 class="sound_only">최신글</h2>
<div class="latest_wr">
<!-- 최신글 시작 { -->
<?php
// 최신글
$sql = " select bo_table
from `{$g5['board_table']}` a left join `{$g5['group_table']}` b on (a.gr_id=b.gr_id)
where a.bo_device <> 'mobile' ";
if(!$is_admin)
$sql .= " and a.bo_use_cert = '' ";
$sql .= " and a.bo_table not in ('', '') "; //공지사항과 갤러리 게시판은 제외
$sql .= " order by b.gr_order, a.bo_order ";
$result = sql_query($sql);
for ($i=0; $row=sql_fetch_array($result); $i++) {
if ($i%2==1) $lt_style = "margin-left:2%";
else $lt_style = "";
?>
<div style="float:left;<?php echo $lt_style ?>" class="lt_wr">
<?php
// 이 함수가 바로 최신글을 추출하는 역할을 합니다.
// 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수);
// 테마의 스킨을 사용하려면 theme/basic 과 같이 지정
echo latest('theme/skdslider', $row['bo_table'], 6, 24);
?>
</div>
<?php
}
?>
<!-- } 최신글 끝 -->
</div>
<div class="latest_wr">
<!-- 사진 최신글2 { -->
<?php
// 이 함수가 바로 최신글을 추출하는 역할을 합니다.
// 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수);
// 테마의 스킨을 사용하려면 theme/basic 과 같이 지정
echo latest('theme/basic', 'gallery', 5, 23);
?>
<!-- } 사진 최신글2 끝 -->
</div>
latest.skin.php에서
ul 의 아이디값이 demo3으로 중복되어서 실행이 안되는것 같습니다.
아이디를 <ul id="<?php echo $board[bo_table]?>" class="slides">
이런식으로 바꿔주셔야 할것같아요
되나요???
그런데, 스킨 소스에서 demo3 으로
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#demo3').skdslider({delay:5000, animationSpeed: 2000,showNextPrev:true,showPlayButton:true,autoSlide:true,animationType:'fading'});
jQuery('#responsive').change(function(){
$('#responsive_wrapper').width(jQuery(this).val());
$(window).trigger('resize');
});
});
</script>
슬라이드 설정이 적용되어있는것 같은데요.
id 부분을 수정하면 이곳이 문제가 되지 않을까요?
저부분도 보테이블명 변수로 처리해주시면 될것같습니다
class와 다르게 id는 고유적이여야해서 말씀주신부분처럼 하나는 적용이 되는데 나머지 적용이 안되는게 그 이유같습니다
고유명으로 바꿔주니 여러개 작동이 되네용
저는 무슨 문제일까요?
보내주신 소스 코드로 수정을 다 했지만...
슬라이드도 노출이 없고, 이미지도 모두 노출이 없습니다.
[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[ latest.skin.php ]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
$board['bo_gallery_width'] = 700;
$board['bo_gallery_height'] = 300;
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$latest_skin_url.'/style.css">', 0);
?>
<!-- <script src="http://code.jquery.com/jquery.js"></script> -->
<script src="<?php echo $latest_skin_url?>/src/skdslider.min.js"></script>
<link href="<?php echo $latest_skin_url?>/src/skdslider.css" rel="stylesheet">
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#bo_table').skdslider({delay:5000, animationSpeed: 2000,showNextPrev:true,showPlayButton:true,autoSlide:true,animationType:'fading'});
jQuery('#responsive').change(function(){
$('#responsive_wrapper').width(jQuery(this).val());
$(window).trigger('resize');
});
});
</script>
<div id="responsive_wrapper" style="max-width: 700px; margin: 0 auto;">
<ul id="<?php echo $board[bo_table]?>" class="slides">
<?php for ($i=0; $i<count($list); $i++) { ?>
<li>
<?php $thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height']); ?>
<?php if($thumb['src'] != ''){?>
<img src="<?php echo $thumb['src']?>">
<?php }else{?>
<img src="<?php echo '이미지없을시 사용하는 이미지 경로'?>" alt="<?php echo '이미지없을시 사용하는 이미지 경로'?>">
<?php }?>
<div class="slide-desc">
<h2><?php echo $list[$i]['subject']?></h2>
<p><?php echo conv_content(mb_strimwidth($list[$i]['wr_content'], 0, 100, '..', 'UTF-8') , 150)?> <a class="more" href="<?php echo $list[$i]['href'] ?>">더보기</a></p>
</div>
</li>
<?php } ?>
</ul>
</div>
[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[ index.php ]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]
<?php
define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if (G5_IS_MOBILE) {
include_once(G5_THEME_MOBILE_PATH.'/index.php');
return;
}
include_once(G5_THEME_PATH.'/head.php');
?>
<h2 class="sound_only">최신글</h2>
<div class="latest_wr">
<!-- 최신글 시작 { -->
<?php
// 최신글
$sql = " select bo_table
from `{$g5['board_table']}` a left join `{$g5['group_table']}` b on (a.gr_id=b.gr_id)
where a.bo_device <> 'mobile' ";
if(!$is_admin)
$sql .= " and a.bo_use_cert = '' ";
$sql .= " and a.bo_table not in ('', '') "; //공지사항과 갤러리 게시판은 제외
$sql .= " order by b.gr_order, a.bo_order ";
$result = sql_query($sql);
for ($i=0; $row=sql_fetch_array($result); $i++) {
if ($i%2==1) $lt_style = "margin-left:2%";
else $lt_style = "";
?>
<div style="float:left;<?php echo $lt_style ?>" class="lt_wr">
<?php
// 이 함수가 바로 최신글을 추출하는 역할을 합니다.
// 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수);
// 테마의 스킨을 사용하려면 theme/basic 과 같이 지정
echo latest('theme/skdslider', $row['bo_table'], 6, 24);
?>
</div>
<?php
}
?>
<!-- } 최신글 끝 -->
</div>
<div class="latest_wr">
<!-- 사진 최신글2 { -->
<?php
// 이 함수가 바로 최신글을 추출하는 역할을 합니다.
// 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수);
// 테마의 스킨을 사용하려면 theme/basic 과 같이 지정
echo latest('theme/skdslider', 'gallery', 5, 23);
?>
<!-- } 사진 최신글2 끝 -->
</div>
<?php
include_once(G5_THEME_PATH.'/tail.php');
?>
latest.skin.php에서
jQuery('#bo_table').skdslider({delay:5000, animationSpeed: 2000,showNextPrev:true,showPlayButton:true,autoSlide:true,animationType:'fading'});
를
jQuery('#<?php echo $board[bo_table]?>').skdslider({delay:5000, animationSpeed: 2000,showNextPrev:true,showPlayButton:true,autoSlide:true,animationType:'fading'});
으로 바꿔보시겠어요???
방금 알려주신 소스로 변경해보아도...
스크립트가 실행이 안되는것 같습니다.
처음에는 이미지는 안보여도 화살표랑 슬라이드 관련 이미지는 노출이 되었는데..
지금은 그것도 없고, 이미지도 아무것도 노출되는것이 없습니다. ㅠ_ㅠ
크롬 개발자모드에서 보면 오류 표시로...
GET ..... 404 (Not Found)
이미지 파일 불러오는 과정에서 오류가 생긴것 같습니다.
