first commit 2
This commit is contained in:
hmw1001
@@ -0,0 +1,24 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
|
||||
/**
|
||||
* rb.custom :: main_visual_lwd/config.php
|
||||
* LWD 미디어 메인 비주얼 모듈 설정
|
||||
*/
|
||||
|
||||
$main_visual_config = array(
|
||||
// 1. 우측 메뉴 설정 (게시판 ID 및 이름)
|
||||
'right_menu' => array(
|
||||
['id' => 'notice', 'name' => '공지사항'],
|
||||
['id' => 'news', 'name' => '뉴스'],
|
||||
['id' => 'column', 'name' => '칼럼'],
|
||||
['id' => 'interview', 'name' => '인터뷰'],
|
||||
['id' => 'tech', 'name' => '기술'],
|
||||
),
|
||||
|
||||
// 2. 좌측 슬라이더 설정
|
||||
'slider_board_id' => 'main_slide', // 슬라이더 이미지를 가져올 게시판 ID (또는 배너 그룹)
|
||||
'slider_limit' => 5, // 최대 슬라이드 개수
|
||||
'slider_interval' => 5000, // 슬라이드 전환 간격 (ms)
|
||||
);
|
||||
?>
|
||||
@@ -0,0 +1,122 @@
|
||||
.main-visual-lwd {
|
||||
width: 100%;
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.main-visual-lwd-inner {
|
||||
display: flex;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 좌측 슬라이더 */
|
||||
.visual-slider-wrap {
|
||||
width: 75%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cycle-slideshow {
|
||||
width: 100%;
|
||||
height: 450px; /* 슬라이더 높이 */
|
||||
}
|
||||
|
||||
.slide-item a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.slide-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.slide-caption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 30px;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
|
||||
}
|
||||
|
||||
.slide-caption h2 {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.slide-caption p {
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.visual-slider-pager {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.visual-slider-pager button {
|
||||
background: rgba(255,255,255,0.5);
|
||||
border: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
margin: 0 4px;
|
||||
cursor: pointer;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
|
||||
.visual-slider-pager .cycle-pager-active {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* 우측 메뉴 */
|
||||
.visual-menu-wrap {
|
||||
width: 25%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.visual-menu-wrap ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.visual-menu-wrap li {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.visual-menu-wrap li a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
padding: 0 25px;
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.visual-menu-wrap li a:hover {
|
||||
background-color: #0056b3;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.visual-menu-wrap li:last-child a {
|
||||
border-bottom: none;
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
(function() {
|
||||
function initMainVisualLwd(moduleId) {
|
||||
const moduleElement = document.getElementById(moduleId);
|
||||
if (!moduleElement) return;
|
||||
|
||||
const slider = moduleElement.querySelector('.cycle-slideshow');
|
||||
if (!slider) return;
|
||||
|
||||
if (typeof jQuery !== 'undefined' && jQuery.fn.cycle) {
|
||||
const $slider = jQuery(slider);
|
||||
if ($slider.data('cycle.opts')) {
|
||||
$slider.cycle('destroy');
|
||||
}
|
||||
$slider.cycle();
|
||||
} else {
|
||||
console.warn("jQuery Cycle2 라이브러리가 로드되지 않았습니다. 메인 비주얼 슬라이더가 작동하지 않습니다.");
|
||||
}
|
||||
}
|
||||
|
||||
window.initMainVisualLwd = initMainVisualLwd;
|
||||
|
||||
// DOMContentLoaded가 이미 발생했을 수 있으므로, 즉시 실행도 고려
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const el = document.querySelector('.main-visual-lwd');
|
||||
if(el) initMainVisualLwd(el.id);
|
||||
});
|
||||
} else {
|
||||
const el = document.querySelector('.main-visual-lwd');
|
||||
if(el) initMainVisualLwd(el.id);
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,84 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
|
||||
$config_path = __DIR__ . '/config.php';
|
||||
if (!file_exists($config_path)) return;
|
||||
include_once($config_path);
|
||||
|
||||
$visual_id = 'main-visual-lwd-' . uniqid();
|
||||
|
||||
// 좌측 슬라이더 데이터 가져오기 (최신글 lib 사용)
|
||||
$slider_items = get_latest($main_visual_config['slider_board_id'], $main_visual_config['slider_limit'], 50);
|
||||
?>
|
||||
|
||||
<div class="main-visual-lwd" id="<?php echo $visual_id; ?>">
|
||||
<div class="main-visual-lwd-inner">
|
||||
|
||||
<!-- 좌측 슬라이더 -->
|
||||
<div class="visual-slider-wrap">
|
||||
<div class="cycle-slideshow"
|
||||
data-cycle-fx="fade"
|
||||
data-cycle-timeout="<?php echo $main_visual_config['slider_interval']; ?>"
|
||||
data-cycle-slides="> .slide-item"
|
||||
data-cycle-pager=".visual-slider-pager"
|
||||
data-cycle-pager-template="<button type='button'>{{slideNum}}</button>"
|
||||
>
|
||||
<?php foreach ($slider_items as $item): ?>
|
||||
<div class="slide-item">
|
||||
<a href="<?php echo $item['href']; ?>">
|
||||
<div class="slide-image" style="background-image: url('<?php echo $item['img_src_tag'] ? get_list_thumbnail($item['bo_table'], $item['wr_id'], 800, 600)['src'] : ''; ?>');"></div>
|
||||
<div class="slide-caption">
|
||||
<h2><?php echo $item['subject']; ?></h2>
|
||||
<p><?php echo cut_str(strip_tags($item['wr_content']), 100); ?></p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<div class="visual-slider-pager"></div>
|
||||
</div>
|
||||
|
||||
<!-- 우측 메뉴 -->
|
||||
<div class="visual-menu-wrap">
|
||||
<ul>
|
||||
<?php foreach ($main_visual_config['right_menu'] as $menu): ?>
|
||||
<li>
|
||||
<a href="<?php echo get_pretty_url($menu['id']); ?>">
|
||||
<span><?php echo $menu['name']; ?></span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<link rel="stylesheet" href="<?php echo G5_THEME_URL; ?>/rb.custom/main_visual_lwd/module.css?ver=<?php echo G5_CSS_VER; ?>">
|
||||
<script>
|
||||
(function() {
|
||||
var currentModuleId = '<?php echo $visual_id; ?>';
|
||||
var initFunctionName = 'initMainVisualLwd';
|
||||
var scriptId = 'main-visual-lwd-script-' + currentModuleId;
|
||||
|
||||
if (document.getElementById(scriptId)) {
|
||||
if (typeof window[initFunctionName] === 'function') {
|
||||
window[initFunctionName](currentModuleId);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
var script = document.createElement('script');
|
||||
script.id = scriptId;
|
||||
script.src = '<?php echo G5_THEME_URL; ?>/rb.custom/main_visual_lwd/module.js?ver=<?php echo G5_JS_VER; ?>';
|
||||
script.async = true;
|
||||
|
||||
script.onload = function() {
|
||||
if (typeof window[initFunctionName] === 'function') {
|
||||
window[initFunctionName](currentModuleId);
|
||||
}
|
||||
};
|
||||
document.head.appendChild(script);
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user