Search...
그누보드 무제한 배너 출력하기
설명 :
과정은 이렇다~ 일정한 날짜에 맞춰서 출력되는데 시간 지나면 중단된다.
단 무제한 출력 허용하면 그것만 계속 나오고 나머진 중단된다.
일단 배너에 필드 값 1개를 추가 한다.
`bn_unlimited` tinyint NOT NULL DEFAULT '0' COMMENT '무제한출력',
이걸로 쓰면되고
그리고 어드민은 알아서 변경하면된다 라디오 버튼 추가해서 0은 사용안함 1은 사용함으로 쓰면된다.
html
<tr>
<th scope="row"><label for="bn_new_win">무제한출력</label></th>
<td>
<?php echo help("무제한 출력 가능합니다."); ?>
<label for="bn_unlimited1">출력안함</label>
<input type="radio" value="0" id="bn_unlimited1" name="bn_unlimited" <?php echo get_checked($bn['bn_unlimited'], 0); ?>>
<label for="bn_unlimited2">출력함</label>
<input type="radio" value="1" id="bn_unlimited2" name="bn_unlimited" <?php echo get_checked($bn['bn_unlimited'], 1); ?>>
</td>
</tr>
이러고나서 함수는 이걸 쓰면된다.
php
/**
* 배너 출력하기
* 배너 일정시간 지나면 중단되고
* 무제한 돌린건 무제한 나오게~~
* @param null $skin
*/
function display_banners($skin=null)
{
global $g5;
if(!$skin) die("배너 스킨을 입력해주세요.");
$skin_path = G5_THEME_PATH.'/'.G5_SKIN_DIR.'/'.BANNER.'/'.$skin;
if(file_exists($skin_path)) {
// 배너 출력
$sql = " select * from {$g5['factory_banner_table']} order by bn_order, bn_id desc
";
$result = sql_query($sql);
$dataArr = [];
for($i=0;$row=sql_fetch_array($result);$i++) {
if($row['bn_unlimited'] == 1) {
$dataArr[$i] = $row;
}else {
$sql2 = " select * from {$g5['factory_banner_table']}
where '".G5_TIME_YMDHIS."'
between bn_begin_time and bn_end_time
order by bn_order, bn_id desc
";
$rs = sql_query($sql2);
while ($rows=sql_fetch_array($rs)) {
$dataArr = array_merge($dataArr,[$rows]);
}
}
}
include_once $skin_path;
} else {
echo '<p>'.str_replace(G5_PATH.'/', '', $skin_path).' 경로에 스킨 파일이 존재하지 않습니다.</p>';
}
}
사용법은 아래 소스를 하면됨
php
<section class="slide_area mix_box">
<?=display_banners('banner1.skin.php')?>
</section>
당연히 스킨 위치는 /skin/banner/banner1.skin.php 로하면된다.
그리고 배너 스킨 내부는 이거 참고하면된다.
php
<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_SKIN_URL.'/'.BANNER.'/style.css">', 0);
/**
* 여기서 썸네일 사이즈
* 조절 하기
*/
$width = 1890;
$height = 340;
echo '<div class="swiper-container">'.PHP_EOL;
for ($i=0; $i<count($dataArr); $i++) {
$k = $i+1;
if ($i==0)
echo '<div class="swiper-wrapper">'.PHP_EOL;
// 테두리 옵션
$bn_border = ($dataArr[$i]['bn_border']) ? ' slide_bn_border' : '';
// 새창 옵션
$bn_new_win = ($dataArr[$i]['bn_open_use']) ? ' target="_blank"' : '';
$bimg = G5_DATA_PATH.'/'.BANNER.'/'.$dataArr[$i]['bn_id'];
if (file_exists($bimg))
{
$banner = '';
$thumb = get_banner_thumbnail($dataArr[$i]['bn_id'], $width, $height,'alt="'.get_text($dataArr[$i]['bn_alt']).'" class="'.$bn_border.'"');
$size = getimagesize($bimg);
echo '<div class="swiper-slide">'.PHP_EOL;
if (filter_var($dataArr[$i]['bn_url'] , FILTER_VALIDATE_URL)) {
$banner .= '<a href="'.$dataArr[$i]['bn_url'].'"'.$bn_new_win.'>'.PHP_EOL;
}
echo $banner.$thumb;
if($banner)
echo '</a>'.PHP_EOL;
echo '</div>'.PHP_EOL;
}
}
if($i == 0) echo "<div class='empty_banner'>이미지를 등록해주세요. {$width}x{$height}</div>";
if ($i>0) echo '</div>'.PHP_EOL;
echo " <div class=\"swiper-pagination\"></div>
<div class=\"swiper-prev\"></div>
<div class=\"swiper-next\"></div>".PHP_EOL;
echo '</div>'.PHP_EOL;
?>
<script src="https://unpkg.com/swiper@6.3.2/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/gsap.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
loop: true,
loopAdditionalSlides: 1,
autoplay: {
delay:3000,
disabldOnInteraction: true
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},
navigation: {
nextEl: '.swiper-next',
prevEl: '.swiper-prev',
}
});
</script>
css
@charset "utf-8";
/* 스와이퍼 슬라이드 */
.slide_area {width: 100%;height: 300px;overflow: hidden;}
.swiper-container {background-color: #fff;width: 100%;height: 300px;}
.swiper-container .swiper-slide {position: relative;width: 100%;height: 300px}
.swiper-container .swiper-slide a {display: block;}
.swiper-container .swiper-slide img {width: 100%;height: 100%;object-fit: cover;}
.swiper-pagination {bottom: 10px !important;}
.swiper-pagination-bullet-active {background: #FFD140 !important;}
.swiper-prev {background: url("./img/btn-control.png") no-repeat 0 0;width: 33px;height: 45px;position: absolute;top:40%;left:10%;z-index: 999;}
.swiper-next {background: url("./img/btn-control.png") no-repeat 0 0;width: 33px;height: 45px;background-position: -62px 0;position: absolute;top:40%;right:10%;z-index: 999;}
.empty_banner {color: white;text-align: center;line-height: 300px;background: #ccc;font-size: 20px;}
@media (max-width: 320px)
{
.swiper-container {width: 100%!important;height: auto!important;}
}
여기까지!! 나머진 응용하면된다.