Skip to content
On this page

그누보드 무제한 배너 출력하기

설명 :

과정은 이렇다~ 일정한 날짜에 맞춰서 출력되는데 시간 지나면 중단된다.

단 무제한 출력 허용하면 그것만 계속 나오고 나머진 중단된다.

일단 배너에 필드 값 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;}
}

여기까지!! 나머진 응용하면된다.