first commit 2
This commit is contained in:
hmw1001
@@ -0,0 +1,20 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
/**
|
||||
* rb.mod.banner :: border_anim/banner.skin.php
|
||||
* 배너 그룹 스킨 (래퍼)
|
||||
*/
|
||||
|
||||
// CSS 로드
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_URL.'/rb/rb.mod/banner/skin/border_anim/style.css">', 0);
|
||||
|
||||
// 배너 목록이 있으면 루프를 돌며 skin.php를 include
|
||||
if (isset($banners) && is_array($banners)) {
|
||||
foreach ($banners as $banner) {
|
||||
include(dirname(__FILE__).'/skin.php');
|
||||
}
|
||||
} else if (isset($banner)) {
|
||||
// 단일 배너인 경우
|
||||
include(dirname(__FILE__).'/skin.php');
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,24 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
/**
|
||||
* rb.mod.banner :: border_anim/skin.php
|
||||
* 단일 배너 아이템 스킨
|
||||
*/
|
||||
?>
|
||||
<div class="rb-banner-border-anim">
|
||||
<a href="<?php echo $banner['bn_url']; ?>"
|
||||
target="_<?php echo $banner['bn_new_win'] ? 'blank' : 'self'; ?>"
|
||||
onclick="banner_click_count(this); return true;"
|
||||
data-banner-id="<?php echo $banner['bn_id']; ?>">
|
||||
<div class="banner-image">
|
||||
<?php echo $banner['bn_img']; ?>
|
||||
</div>
|
||||
<div class="banner-content">
|
||||
<h3><?php echo get_text($banner['bn_alt']); ?></h3>
|
||||
</div>
|
||||
<div class="border-top-left"></div>
|
||||
<div class="border-top-right"></div>
|
||||
<div class="border-bottom-left"></div>
|
||||
<div class="border-bottom-right"></div>
|
||||
</a>
|
||||
</div>
|
||||
@@ -0,0 +1,71 @@
|
||||
.rb-banner-border-anim {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.rb-banner-border-anim a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.rb-banner-border-anim .banner-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.rb-banner-border-anim .banner-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.rb-banner-border-anim .banner-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
background: rgba(0,0,0,0.5);
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.rb-banner-border-anim:hover .banner-content {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.rb-banner-border-anim h3 {
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.rb-banner-border-anim [class^="border-"] {
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.rb-banner-border-anim .border-top-left, .rb-banner-border-anim .border-top-right { height: 3px; width: 0; }
|
||||
.rb-banner-border-anim .border-bottom-left, .rb-banner-border-anim .border-bottom-right { width: 3px; height: 0; }
|
||||
|
||||
.rb-banner-border-anim .border-top-left { top: 0; left: 0; }
|
||||
.rb-banner-border-anim .border-top-right { top: 0; right: 0; }
|
||||
.rb-banner-border-anim .border-bottom-left { bottom: 0; left: 0; }
|
||||
.rb-banner-border-anim .border-bottom-right { bottom: 0; right: 0; }
|
||||
|
||||
.rb-banner-border-anim:hover .border-top-left, .rb-banner-border-anim:hover .border-top-right { width: 100%; }
|
||||
.rb-banner-border-anim:hover .border-bottom-left, .rb-banner-border-anim:hover .border-bottom-right { height: 100%; }
|
||||
@@ -0,0 +1,20 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
/**
|
||||
* rb.mod.banner :: card_overlay/banner.skin.php
|
||||
* 배너 그룹 스킨 (래퍼)
|
||||
*/
|
||||
|
||||
// CSS 로드
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_URL.'/rb/rb.mod/banner/skin/card_overlay/style.css">', 0);
|
||||
|
||||
// 배너 목록이 있으면 루프를 돌며 skin.php를 include
|
||||
if (isset($banners) && is_array($banners)) {
|
||||
foreach ($banners as $banner) {
|
||||
include(dirname(__FILE__).'/skin.php');
|
||||
}
|
||||
} else if (isset($banner)) {
|
||||
// 단일 배너인 경우
|
||||
include(dirname(__FILE__).'/skin.php');
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,20 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
/**
|
||||
* rb.mod.banner :: card_overlay/skin.php
|
||||
* 단일 배너 아이템 스킨
|
||||
*/
|
||||
?>
|
||||
<div class="rb-banner-card-overlay">
|
||||
<a href="<?php echo $banner['bn_url']; ?>"
|
||||
target="_<?php echo $banner['bn_new_win'] ? 'blank' : 'self'; ?>"
|
||||
onclick="banner_click_count(this); return true;"
|
||||
data-banner-id="<?php echo $banner['bn_id']; ?>">
|
||||
<div class="banner-image">
|
||||
<?php echo $banner['bn_img']; ?>
|
||||
</div>
|
||||
<div class="banner-content">
|
||||
<h3><?php echo get_text($banner['bn_alt']); ?></h3>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@@ -0,0 +1,46 @@
|
||||
/* 💡 [최종 수정] 스킨 자체는 크기를 갖지 않고, 부모 컨테이너를 100% 채우도록 수정 */
|
||||
.rb-banner-card-overlay {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.rb-banner-card-overlay a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.rb-banner-card-overlay .banner-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.rb-banner-card-overlay .banner-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.rb-banner-card-overlay .banner-content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.rb-banner-card-overlay h3 {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
/**
|
||||
* rb.mod.banner :: image_only/banner.skin.php
|
||||
* 배너 그룹 스킨 (래퍼)
|
||||
*/
|
||||
|
||||
// CSS 로드
|
||||
|
||||
|
||||
// 배너 목록이 있으면 루프를 돌며 skin.php를 include
|
||||
if (isset($banners) && is_array($banners)) {
|
||||
foreach ($banners as $banner) {
|
||||
include(dirname(__FILE__).'/skin.php');
|
||||
}
|
||||
} else if (isset($banner)) {
|
||||
// 단일 배너인 경우
|
||||
include(dirname(__FILE__).'/skin.php');
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,23 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
/**
|
||||
* rb.mod.banner :: image_only/skin.php
|
||||
* 단일 배너 아이템 스킨 (이미지만 출력)
|
||||
*/
|
||||
|
||||
// 💡 [핵심 수정] 이 스킨의 CSS 파일을 불러옵니다.
|
||||
//add_stylesheet('<link rel="stylesheet" href="'.G5_URL.'/rb/rb.mod/banner/skin/image_only/style.css?ver='.G5_SERVER_TIME.'">', 0);
|
||||
|
||||
?>
|
||||
|
||||
<link rel="stylesheet" href="<?php echo G5_URL; ?>/rb/rb.mod/banner/skin/image_only/style.css?ver=<?php echo G5_SERVER_TIME; ?>">
|
||||
<div class="rb-banner-image-only">
|
||||
<a href="<?php echo $banner['bn_url']; ?>"
|
||||
target="_<?php echo $banner['bn_new_win'] ? 'blank' : 'self'; ?>"
|
||||
onclick="banner_click_count(this); return true;"
|
||||
data-banner-id="<?php echo $banner['bn_id']; ?>">
|
||||
<div class="banner-image">
|
||||
<?php echo $banner['bn_img']; ?>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@@ -0,0 +1,26 @@
|
||||
/* Image Only Banner Skin - Final Fix */
|
||||
|
||||
/* 💡 [핵심] 부모(.banner-unit-wrapper)의 공간을 100% 채우도록 강제 */
|
||||
.rb-banner-image-only {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.rb-banner-image-only a,
|
||||
.rb-banner-image-only .banner-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.rb-banner-image-only img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: fill;
|
||||
max-height: 85px;
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
<?php
|
||||
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
|
||||
|
||||
// 💡 [핵심] 스킨이 의존하는 전역 변수들을 명시적으로 선언합니다.
|
||||
global $row_mod, $rb_module_table;
|
||||
|
||||
// 💡 [초기화] $rb_skin 변수를 빈 배열로 먼저 선언합니다.
|
||||
// 이렇게 하면, 아래에서 설정을 불러오지 못하더라도 다른 부분에서 오류가 발생하지 않습니다.
|
||||
$rb_skin = array();
|
||||
|
||||
// 💡 [핵심 수정] Rebuilder 모듈 변수($row_mod)가 존재하고, 그 안에 md_id 값이 있을 때만 DB 조회를 실행합니다.
|
||||
// 이렇게 하면 $row_mod가 null일 때 발생하는 오류를 원천적으로 방지할 수 있습니다.
|
||||
if (isset($row_mod['md_id']) && $row_mod['md_id'] && isset($rb_module_table) && $rb_module_table) {
|
||||
$rb_skin = sql_fetch("SELECT * FROM {$rb_module_table} WHERE md_id = '{$row_mod['md_id']}'");
|
||||
}
|
||||
|
||||
// 💡 [개선] $rb_skin['md_banner_bg'] 값이 없을 경우를 대비하여 기본값을 설정합니다.
|
||||
$md_banner_bg = isset($rb_skin['md_banner_bg']) ? $rb_skin['md_banner_bg'] : '';
|
||||
|
||||
?>
|
||||
|
||||
<style>
|
||||
.basic_item {margin-top: 10px;}
|
||||
.basic_item:first-child {margin-top: 0px;}
|
||||
</style>
|
||||
|
||||
<?php
|
||||
$i = 0; // $i 변수를 초기화
|
||||
|
||||
while ($row = sql_fetch_array($result)) {
|
||||
$bn_border = isset($row['bn_border']) && $row['bn_border'] ? ' bn_border' : '';
|
||||
$bn_radius = isset($row['bn_radius']) && $row['bn_radius'] ? ' bn_radius' : '';
|
||||
|
||||
// 새창 옵션
|
||||
$bn_new_win = isset($row['bn_new_win']) && $row['bn_new_win'] ? ' target="_blank"' : '';
|
||||
|
||||
// 💡 [개선] 배경색($md_banner_bg)이 있을 때만 style 속성을 출력하도록 수정합니다.
|
||||
if ($i == 0) {
|
||||
$bg_style = $md_banner_bg ? ' style="background-color:'.$md_banner_bg.'"' : '';
|
||||
echo '<div class="mod_bn_wrap"'.$bg_style.'>'.PHP_EOL;
|
||||
}
|
||||
|
||||
$bimg = G5_DATA_PATH.'/banners/'.$row['bn_id'];
|
||||
if (file_exists($bimg)) {
|
||||
$banner = '';
|
||||
$size = getimagesize($bimg);
|
||||
echo '<div class="basic_item top_ad '.$bn_border.$bn_radius.'">'.PHP_EOL;
|
||||
if ($row['bn_url'][0] == '#')
|
||||
$banner .= '<a href="'.$row['bn_url'].'">';
|
||||
else if ($row['bn_url'] && $row['bn_url'] != 'http://') {
|
||||
$banner .= '<a href="'.G5_URL.'/rb/rb.mod/banner/bannerhit.php?bn_id='.$row['bn_id'].'"'.$bn_new_win.'>';
|
||||
}
|
||||
echo $banner.'<img src="'.G5_DATA_URL.'/banners/'.$row['bn_id'].'?ver='.G5_SERVER_TIME.'" title="'.get_text($row['bn_alt']).'" width="100%">';
|
||||
if ($banner) {
|
||||
echo '</a>'.PHP_EOL;
|
||||
}
|
||||
|
||||
if (isset($row['bn_ad_ico']) && $row['bn_ad_ico']) {
|
||||
echo '<span class="ico_ad">AD</span>'.PHP_EOL;
|
||||
}
|
||||
echo '</div>'.PHP_EOL;
|
||||
}
|
||||
$i++;
|
||||
}
|
||||
|
||||
if ($i > 0) echo '</div>'.PHP_EOL;
|
||||
?>
|
||||
@@ -0,0 +1,47 @@
|
||||
<?php
|
||||
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
|
||||
|
||||
global $row_mod, $rb_module_table;
|
||||
$rb_skin = sql_fetch (" select * from {$rb_module_table} where md_id = '{$row_mod['md_id']}' "); //최신글 환경설정 테이블 조회 (삭제금지)
|
||||
$md_banner_bg = isset($rb_skin['md_banner_bg']) ? $rb_skin['md_banner_bg'] : '';
|
||||
|
||||
?>
|
||||
|
||||
|
||||
<?php
|
||||
$i = 0; // $i 변수를 초기화
|
||||
|
||||
while ($row = sql_fetch_array($result)) {
|
||||
$bn_border = isset($row['bn_border']) && $row['bn_border'] ? ' bn_border' : '';
|
||||
$bn_radius = isset($row['bn_radius']) && $row['bn_radius'] ? ' bn_radius' : '';
|
||||
|
||||
// 새창 옵션
|
||||
$bn_new_win = isset($row['bn_new_win']) && $row['bn_new_win'] ? ' target="_blank"' : '';
|
||||
|
||||
if ($i == 0) echo '<div class="mod_bn_wrap" style="background-color:'.$md_banner_bg.'">'.PHP_EOL;
|
||||
|
||||
$bimg = G5_DATA_PATH.'/banners/'.$row['bn_id'];
|
||||
if (file_exists($bimg)) {
|
||||
$banner = '';
|
||||
$size = getimagesize($bimg);
|
||||
echo '<div class="random_item top_ad '.$bn_border.$bn_radius.'">'.PHP_EOL;
|
||||
if ($row['bn_url'][0] == '#')
|
||||
$banner .= '<a href="'.$row['bn_url'].'">';
|
||||
else if ($row['bn_url'] && $row['bn_url'] != 'http://') {
|
||||
$banner .= '<a href="'.G5_URL.'/rb/rb.mod/banner/bannerhit.php?bn_id='.$row['bn_id'].'"'.$bn_new_win.'>';
|
||||
}
|
||||
echo $banner.'<img src="'.G5_DATA_URL.'/banners/'.$row['bn_id'].'?ver='.G5_SERVER_TIME.'" title="'.get_text($row['bn_alt']).'" width="100%">';
|
||||
if ($banner) {
|
||||
echo '</a>'.PHP_EOL;
|
||||
}
|
||||
|
||||
if (isset($row['bn_ad_ico']) && $row['bn_ad_ico']) {
|
||||
echo '<span class="ico_ad">AD</span>'.PHP_EOL;
|
||||
}
|
||||
echo '</div>'.PHP_EOL;
|
||||
}
|
||||
$i++;
|
||||
}
|
||||
|
||||
if ($i > 0) echo '</div>'.PHP_EOL;
|
||||
?>
|
||||
@@ -0,0 +1,97 @@
|
||||
<?php
|
||||
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
|
||||
|
||||
global $row_mod, $rb_module_table;
|
||||
$rb_skin = sql_fetch (" select * from {$rb_module_table} where md_id = '{$row_mod['md_id']}' "); //최신글 환경설정 테이블 조회 (삭제금지)
|
||||
$md_banner_bg = isset($rb_skin['md_banner_bg']) ? $rb_skin['md_banner_bg'] : '';
|
||||
|
||||
?>
|
||||
|
||||
<style>
|
||||
.swiper-button-next-slide_bn {right:20px;}
|
||||
.swiper-button-prev-slide_bn {left:20px;}
|
||||
.swiper-button-next-slide_bn svg {width: 10px;}
|
||||
.swiper-button-prev-slide_bn svg {width: 10px;}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<?php
|
||||
$i = 0; // $i 변수를 초기화
|
||||
|
||||
while ($row = sql_fetch_array($result)) {
|
||||
$bn_border = isset($row['bn_border']) && $row['bn_border'] ? ' bn_border' : '';
|
||||
$bn_radius = isset($row['bn_radius']) && $row['bn_radius'] ? ' bn_radius' : '';
|
||||
|
||||
// 새창 옵션
|
||||
$bn_new_win = isset($row['bn_new_win']) && $row['bn_new_win'] ? ' target="_blank"' : '';
|
||||
|
||||
if ($i == 0) echo '<div class="mod_bn_wrap" style="background-color:'.$md_banner_bg.'"><div class="swiper-container swiper-container-slide_bn swiper-container-slide_bn_'.$row_mod['md_id'].'"><ul class="swiper-wrapper swiper-wrapper-slide_bn swiper-wrapper-slide_bn_'.$row_mod['md_id'].'">'.PHP_EOL;
|
||||
|
||||
$bimg = G5_DATA_PATH.'/banners/'.$row['bn_id'];
|
||||
if (file_exists($bimg)) {
|
||||
$banner = '';
|
||||
$size = getimagesize($bimg);
|
||||
echo '<div class="swiper-slide swiper-slide-slide_bn swiper-slide-slide_bn_'.$row_mod['md_id'].' slide_item top_ad '.$bn_border.$bn_radius.'">'.PHP_EOL;
|
||||
if ($row['bn_url'][0] == '#')
|
||||
$banner .= '<a href="'.$row['bn_url'].'">';
|
||||
else if ($row['bn_url'] && $row['bn_url'] != 'http://') {
|
||||
$banner .= '<a href="'.G5_URL.'/rb/rb.mod/banner/bannerhit.php?bn_id='.$row['bn_id'].'"'.$bn_new_win.'>';
|
||||
}
|
||||
echo $banner.'<img src="'.G5_DATA_URL.'/banners/'.$row['bn_id'].'?ver='.G5_SERVER_TIME.'" title="'.get_text($row['bn_alt']).'" width="100%">';
|
||||
if ($banner) {
|
||||
echo '</a>'.PHP_EOL;
|
||||
}
|
||||
|
||||
if (isset($row['bn_ad_ico']) && $row['bn_ad_ico']) {
|
||||
echo '<span class="ico_ad">AD</span>'.PHP_EOL;
|
||||
}
|
||||
echo '</div>'.PHP_EOL;
|
||||
}
|
||||
$i++;
|
||||
}
|
||||
|
||||
if ($i > 0) echo '</ul>';
|
||||
|
||||
if ($i > 1) echo '
|
||||
<div class="swiper-button-next swiper-button-next-slide_bn swiper-button-next-slide_bn_'.$row_mod['md_id'].'">
|
||||
<svg width="24" height="46" viewBox="0 0 24 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 45L22.3333 23L1 1" stroke="#09244B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="swiper-button-prev swiper-button-next-slide_bn swiper-button-prev-slide_bn_'.$row_mod['md_id'].'">
|
||||
<svg width="24" height="46" viewBox="0 0 24 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M23 0.999999L1.66667 23L23 45" stroke="#09244B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>'.PHP_EOL;
|
||||
|
||||
if ($i > 0) echo '</div></div>';
|
||||
|
||||
?>
|
||||
|
||||
<script>
|
||||
|
||||
var swiper = new Swiper('.swiper-container-slide_bn_<?php echo $row_mod['md_id'] ?>', {
|
||||
slidesPerView: 1, //가로갯수
|
||||
spaceBetween: 0, // 간격
|
||||
observer: true, //리셋
|
||||
observeParents: true, //리셋
|
||||
<?php if ($i > 1) { ?>
|
||||
touchRatio: 1,
|
||||
loop: true,
|
||||
|
||||
navigation: { //네비
|
||||
nextEl: '.swiper-button-next-slide_bn_<?php echo $row_mod['md_id'] ?>',
|
||||
prevEl: '.swiper-button-prev-slide_bn_<?php echo $row_mod['md_id'] ?>',
|
||||
},
|
||||
|
||||
<?php } else { ?>
|
||||
touchRatio: 0,
|
||||
loop: false,
|
||||
<?php } ?>
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,58 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
/**
|
||||
* rb.mod.banner :: rb.wide_slide/banner.skin.php
|
||||
* 배너 그룹 스킨 (래퍼)
|
||||
*/
|
||||
|
||||
// CSS 로드
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_URL.'/rb/rb.mod/banner/skin/rb.wide_slide/style.css">', 0);
|
||||
|
||||
// Swiper 라이브러리 로드 (테마에 포함된 경우)
|
||||
if (is_file(G5_THEME_PATH.'/js/swiper/swiper-bundle.min.js')) {
|
||||
add_javascript('<script src="'.G5_THEME_URL.'/js/swiper/swiper-bundle.min.js"></script>', 10);
|
||||
}
|
||||
?>
|
||||
|
||||
<div class="rb-banner-wide-slide">
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<?php
|
||||
// 배너 목록이 있으면 루프를 돌며 skin.php를 include
|
||||
if (isset($banners) && is_array($banners)) {
|
||||
foreach ($banners as $banner) {
|
||||
include(dirname(__FILE__).'/skin.php');
|
||||
}
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<!-- 네비게이션 버튼 -->
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
<!-- 페이징 -->
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 이 스킨 전용 Swiper 초기화
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// 동일한 스킨이 여러 개 있을 수 있으므로, 고유한 클래스를 부여하거나 ID를 사용해야 합니다.
|
||||
// 여기서는 이 스킨의 최상위 클래스 내에 있는 swiper-container를 찾습니다.
|
||||
var swiper = new Swiper('.rb-banner-wide-slide .swiper-container', {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 5000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,14 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
/**
|
||||
* rb.mod.banner :: rb.wide_slide/skin.php
|
||||
* 단일 배너 아이템 스킨 (슬라이드용)
|
||||
*/
|
||||
?>
|
||||
<div class="swiper-slide">
|
||||
<a href="<?php echo $banner['bn_url']; ?>" target="_<?php echo $banner['bn_new_win'] ? 'blank' : 'self'; ?>">
|
||||
<div class="banner-image">
|
||||
<?php echo $banner['bn_img']; ?>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@@ -0,0 +1,53 @@
|
||||
@charset "utf-8";
|
||||
|
||||
/* 💡 [최종 수정] 와이드 슬라이드 스타일 */
|
||||
.rb-banner-wide-slide {
|
||||
position: relative;
|
||||
width: 728px; /* 💡 [핵심] 와이드 배너 너비 고정 */
|
||||
height: 90px; /* 💡 [핵심] 와이드 배너 높이 고정 */
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
border-radius: 8px;
|
||||
margin: 0 auto; /* 중앙 정렬 */
|
||||
}
|
||||
|
||||
.rb-banner-wide-slide .swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.rb-banner-wide-slide .swiper-slide {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.rb-banner-wide-slide .banner-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 💡 [최종 수정] img 태그 자체의 크기를 와이드 배너(728x90)로 강제 고정 */
|
||||
.rb-banner-wide-slide .banner-image img {
|
||||
width: 728px !important;
|
||||
height: 90px !important;
|
||||
object-fit: cover !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Swiper 네비게이션 버튼 스타일 (필요시 수정) */
|
||||
.rb-banner-wide-slide .swiper-button-next,
|
||||
.rb-banner-wide-slide .swiper-button-prev {
|
||||
color: #fff;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.rb-banner-wide-slide .swiper-button-next:after,
|
||||
.rb-banner-wide-slide .swiper-button-prev:after {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.rb-banner-wide-slide .swiper-pagination-bullet-active {
|
||||
background: #fff;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
/**
|
||||
* rb.mod.banner :: split_layout/banner.skin.php
|
||||
* 배너 그룹 스킨 (래퍼)
|
||||
*/
|
||||
|
||||
// CSS 로드
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_URL.'/rb/rb.mod/banner/skin/split_layout/style.css">', 0);
|
||||
|
||||
// 배너 목록이 있으면 루프를 돌며 skin.php를 include
|
||||
if (isset($banners) && is_array($banners)) {
|
||||
foreach ($banners as $banner) {
|
||||
include(dirname(__FILE__).'/skin.php');
|
||||
}
|
||||
} else if (isset($banner)) {
|
||||
// 단일 배너인 경우
|
||||
include(dirname(__FILE__).'/skin.php');
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,39 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
/**
|
||||
* rb.mod.banner :: split_layout/skin.php
|
||||
* 단일 배너 아이템 스킨 (내용에 따라 3단 변신)
|
||||
*/
|
||||
|
||||
// 이미지와 텍스트 유무 확인
|
||||
$has_image = (isset($banner['bn_img']) && !empty($banner['bn_img']));
|
||||
$has_text = (isset($banner['bn_alt']) && !empty($banner['bn_alt']));
|
||||
|
||||
// 클래스 동적 생성
|
||||
$layout_class = '';
|
||||
if ($has_image && $has_text) {
|
||||
$layout_class = 'has-image-and-text';
|
||||
} elseif ($has_image) {
|
||||
$layout_class = 'has-image-only';
|
||||
} elseif ($has_text) {
|
||||
$layout_class = 'has-text-only';
|
||||
}
|
||||
?>
|
||||
<link rel="stylesheet" href="<?php echo G5_URL; ?>/rb/rb.mod/banner/skin/split_layout/style.css?ver=<?php echo G5_SERVER_TIME; ?>">
|
||||
<div class="rb-banner-split-layout <?php echo $layout_class; ?>">
|
||||
<a href="<?php echo $banner['bn_url']; ?>"
|
||||
target="_<?php echo $banner['bn_new_win'] ? 'blank' : 'self'; ?>"
|
||||
onclick="banner_click_count(this); return true;"
|
||||
data-banner-id="<?php echo $banner['bn_id']; ?>">
|
||||
<?php if ($has_image): ?>
|
||||
<div class="banner-image">
|
||||
<?php echo $banner['bn_img']; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if ($has_text): ?>
|
||||
<div class="banner-content">
|
||||
<h3><?php echo get_text($banner['bn_alt']); ?></h3>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</a>
|
||||
</div>
|
||||
@@ -0,0 +1,110 @@
|
||||
/* ================================
|
||||
0. 배너 고정 크기 (절대 필수)
|
||||
================================ */
|
||||
.banner-unit-wrapper {
|
||||
width: 180px;
|
||||
height: 80px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
1. 링크 전체 채우기
|
||||
================================ */
|
||||
.rb-banner-split-layout a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
border: 1px solid #eee;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
2. 이미지 영역 (flex 문제 해결)
|
||||
================================ */
|
||||
.banner-image {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background: #f8f8f8;
|
||||
min-height: 0; /* 🔥 flex 기본값 무력화 */
|
||||
}
|
||||
|
||||
.banner-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
3. 이미지 + 텍스트
|
||||
================================ */
|
||||
.has-image-and-text .banner-image {
|
||||
flex: 0 0 60px; /* 🔥 이게 핵심 */
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.has-image-and-text .banner-content {
|
||||
flex: 0 0 20px;
|
||||
height: 20px;
|
||||
border-top: 1px solid #eee;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.has-image-and-text .banner-content h3 {
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
line-height: 20px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
4. 이미지만
|
||||
================================ */
|
||||
.has-image-only .banner-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/*object-fit: fill;*/
|
||||
max-height: 85px;
|
||||
}
|
||||
.banner-image img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: fill;
|
||||
max-height: 85px;
|
||||
}
|
||||
|
||||
.has-image-only .banner-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
5. 텍스트만
|
||||
================================ */
|
||||
.has-text-only .banner-image {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.has-text-only .banner-content {
|
||||
flex: 0 0 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.has-text-only .banner-content h3 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
/**
|
||||
* rb.mod.banner :: text_reveal/banner.skin.php
|
||||
* 배너 그룹 스킨 (래퍼)
|
||||
*/
|
||||
|
||||
// CSS 로드
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_URL.'/rb/rb.mod/banner/skin/text_reveal/style.css">', 0);
|
||||
|
||||
// 배너 목록이 있으면 루프를 돌며 skin.php를 include
|
||||
if (isset($banners) && is_array($banners)) {
|
||||
foreach ($banners as $banner) {
|
||||
include(dirname(__FILE__).'/skin.php');
|
||||
}
|
||||
} else if (isset($banner)) {
|
||||
// 단일 배너인 경우
|
||||
include(dirname(__FILE__).'/skin.php');
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,20 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
/**
|
||||
* rb.mod.banner :: text_reveal/skin.php
|
||||
* 단일 배너 아이템 스킨
|
||||
*/
|
||||
?>
|
||||
<div class="rb-banner-text-reveal">
|
||||
<a href="<?php echo $banner['bn_url']; ?>"
|
||||
target="_<?php echo $banner['bn_new_win'] ? 'blank' : 'self'; ?>"
|
||||
onclick="banner_click_count(this); return true;"
|
||||
data-banner-id="<?php echo $banner['bn_id']; ?>">
|
||||
<div class="banner-image">
|
||||
<?php echo $banner['bn_img']; ?>
|
||||
</div>
|
||||
<div class="banner-content">
|
||||
<h3><?php echo get_text($banner['bn_alt']); ?></h3>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@@ -0,0 +1,51 @@
|
||||
.rb-banner-text-reveal {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.rb-banner-text-reveal a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.rb-banner-text-reveal .banner-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.rb-banner-text-reveal .banner-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.rb-banner-text-reveal .banner-content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: rgba(0,0,0,0.6);
|
||||
color: #fff;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
.rb-banner-text-reveal:hover .banner-content {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.rb-banner-text-reveal h3 {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
/**
|
||||
* rb.mod.banner :: zoom_in_hover/banner.skin.php
|
||||
* 배너 그룹 스킨 (래퍼)
|
||||
*/
|
||||
|
||||
// CSS 로드
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_URL.'/rb/rb.mod/banner/skin/zoom_in_hover/style.css">', 0);
|
||||
|
||||
// 배너 목록이 있으면 루프를 돌며 skin.php를 include
|
||||
if (isset($banners) && is_array($banners)) {
|
||||
foreach ($banners as $banner) {
|
||||
include(dirname(__FILE__).'/skin.php');
|
||||
}
|
||||
} else if (isset($banner)) {
|
||||
// 단일 배너인 경우
|
||||
include(dirname(__FILE__).'/skin.php');
|
||||
}
|
||||
?>
|
||||
@@ -0,0 +1,20 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
/**
|
||||
* rb.mod.banner :: zoom_in_hover/skin.php
|
||||
* 단일 배너 아이템 스킨
|
||||
*/
|
||||
?>
|
||||
<div class="rb-banner-zoom-in-hover">
|
||||
<a href="<?php echo $banner['bn_url']; ?>"
|
||||
target="_<?php echo $banner['bn_new_win'] ? 'blank' : 'self'; ?>"
|
||||
onclick="banner_click_count(this); return true;"
|
||||
data-banner-id="<?php echo $banner['bn_id']; ?>">
|
||||
<div class="banner-image">
|
||||
<?php echo $banner['bn_img']; ?>
|
||||
</div>
|
||||
<div class="banner-content">
|
||||
<h3><?php echo get_text($banner['bn_alt']); ?></h3>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@@ -0,0 +1,50 @@
|
||||
.rb-banner-zoom-in-hover {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.rb-banner-zoom-in-hover a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.rb-banner-zoom-in-hover .banner-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.rb-banner-zoom-in-hover .banner-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
.rb-banner-zoom-in-hover:hover .banner-image img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.rb-banner-zoom-in-hover .banner-content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.rb-banner-zoom-in-hover h3 {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
Reference in New Issue
Block a user