bootstrap carousel을 이용한 슬라이드 넣는방법 정보
bootstrap carousel을 이용한 슬라이드 넣는방법
관련링크
첨부파일
본문
별도의 파일업로드 없이 head.sub.php와 mobile.index.php에 붙여넣기만 하면됩니다.
- head.sub.php 에 <link> <style>을 넣어줍니다.
- index.php 에 carousel code 를 바로 입력해줍니다.
- carousel 로 표시된 부분을 head.sub.php 와 mobile/index.php 에 복사해서 붙여넣기하면 모바일에서 최신글 바로위에 슬라이드가 나올겁니다.
- carousel 에서 글씨색은 inline style을 이용했습니다 <p style="color: white;"> 에서 칼라를 바꾸면 됩니다.
- <div id="myCarousel" class="carousel slide text-center" data-ride="carousel" style="background: #131111; z-index: -1;">: 배경색은 검은색을 사용했으며 z-index: -1은 배경이 글씨 아래에 위치한다는 의미입니다.
적용방법(mobile 의 경우)
* gnuboard5/head.sub.php 의 <head>에 carousel 부분을 추가합니다.
* gnuboard5/head.sub.php
<?php
// 이 파일은 새로운 파일 생성시 반드시 포함되어야 함
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
// 테마 head.sub.php 파일
if(!defined('G5_IS_ADMIN') && defined('G5_THEME_PATH') && is_file(G5_THEME_PATH.'/head.sub.php')) {
require_once(G5_THEME_PATH.'/head.sub.php');
return;
}
$begin_time = get_microtime();
if (!isset($g5['title'])) {
$g5['title'] = $config['cf_title'];
$g5_head_title = $g5['title'];
}
else {
$g5_head_title = $g5['title']; // 상태바에 표시될 제목
$g5_head_title .= " | ".$config['cf_title'];
}
// 현재 접속자
// 게시판 제목에 ' 포함되면 오류 발생
$g5['lo_location'] = addslashes($g5['title']);
if (!$g5['lo_location'])
$g5['lo_location'] = addslashes(clean_xss_tags($_SERVER['REQUEST_URI']));
$g5['lo_url'] = addslashes(clean_xss_tags($_SERVER['REQUEST_URI']));
if (strstr($g5['lo_url'], '/'.G5_ADMIN_DIR.'/') || $is_admin == 'super') $g5['lo_url'] = '';
/*
// 만료된 페이지로 사용하시는 경우
header("Cache-Control: no-cache"); // HTTP/1.1
header("Expires: 0"); // rfc2616 - Section 14.21
header("Pragma: no-cache"); // HTTP/1.0
*/
?>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<?php
if (G5_IS_MOBILE) {
echo '<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">'.PHP_EOL;
echo '<meta name="HandheldFriendly" content="true">'.PHP_EOL;
echo '<meta name="format-detection" content="telephone=no">'.PHP_EOL;
} else {
echo '<meta http-equiv="imagetoolbar" content="no">'.PHP_EOL;
echo '<meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">'.PHP_EOL;
}
if($config['cf_add_meta'])
echo $config['cf_add_meta'].PHP_EOL;
?>
<title><?php echo $g5_head_title; ?></title>
<?php
if (defined('G5_IS_ADMIN')) {
if(!defined('_THEME_PREVIEW_'))
echo '<link rel="stylesheet" href="'.G5_ADMIN_URL.'/css/admin.css">'.PHP_EOL;
} else {
echo '<link rel="stylesheet" href="'.G5_CSS_URL.'/'.(G5_IS_MOBILE?'mobile':'default').'.css">'.PHP_EOL;
}
?>
<!--[if lte IE 8]>
<script src="<?php echo G5_JS_URL ?>/html5.js"></script>
<![endif]-->
<script>
// 자바스크립트에서 사용하는 전역변수 선언
var g5_url = "<?php echo G5_URL ?>";
var g5_bbs_url = "<?php echo G5_BBS_URL ?>";
var g5_is_member = "<?php echo isset($is_member)?$is_member:''; ?>";
var g5_is_admin = "<?php echo isset($is_admin)?$is_admin:''; ?>";
var g5_is_mobile = "<?php echo G5_IS_MOBILE ?>";
var g5_bo_table = "<?php echo isset($bo_table)?$bo_table:''; ?>";
var g5_sca = "<?php echo isset($sca)?$sca:''; ?>";
var g5_editor = "<?php echo ($config['cf_editor'] && $board['bo_use_dhtml_editor'])?$config['cf_editor']:''; ?>";
var g5_cookie_domain = "<?php echo G5_COOKIE_DOMAIN ?>";
<?php if(defined('G5_IS_ADMIN')) { ?>
var g5_admin_url = "<?php echo G5_ADMIN_URL; ?>";
<?php } ?>
</script>
<script src="<?php echo G5_JS_URL ?>/jquery-1.8.3.min.js"></script>
<script src="<?php echo G5_JS_URL ?>/jquery.menu.js"></script>
<script src="<?php echo G5_JS_URL ?>/common.js"></script>
<script src="<?php echo G5_JS_URL ?>/wrest.js"></script>
<?php
if(G5_IS_MOBILE) {
echo '<script src="'.G5_JS_URL.'/modernizr.custom.70111.js"></script>'.PHP_EOL; // overflow scroll 감지
}
if(!defined('G5_IS_ADMIN'))
echo $config['cf_add_script'];
?>
###################################################################
<!-- carousel -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
height: 100%;
margin: 0;
}
.container {
width: 99%; height: 99%; margin: auto;
}
</style>
<!-- carousel -->
####################################################################
</head>
<body>
<?php
if ($is_member) { // 회원이라면 로그인 중이라는 메세지를 출력해준다.
$sr_admin_msg = '';
if ($is_admin == 'super') $sr_admin_msg = "최고관리자 ";
else if ($is_admin == 'group') $sr_admin_msg = "그룹관리자 ";
else if ($is_admin == 'board') $sr_admin_msg = "게시판관리자 ";
echo '<div id="hd_login_msg">'.$sr_admin_msg.get_text($member['mb_nick']).'님 로그인 중 ';
echo '<a href="'.G5_BBS_URL.'/logout.php">로그아웃</a></div>';
}
?>
========================================================================================
* gnuboard5/mobile/index.php 부분에 carousel 부분을 추가합니다.
* gnuboard5/mobile/index.php
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if(defined('G5_THEME_PATH')) {
require_once(G5_THEME_PATH.'/index.php');
return;
}
include_once(G5_MOBILE_PATH.'/head.php');
?>
###################################################################
<!--carousel -->
<div class="container" >
<p class="text-center" style="color: blue;"><span style="font-style: italic">ad:</span> web developer Tclub</p>
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel" style="background: #131111; z-index: -1;">
<!-- indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#muCarousel" data-slide-to="2"></li>
</ol>
<!-- wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<p style="color: white;">반응형홈페이지는 티클럽이 잘합니다.모바일홈페이지를 어떻게 만드나 고민했는데 깔끔하고 아주 만족합니다.<br><span style="font-style:normal;">북구 구암동 조재술(중기대여업체운영)</span>
</p>
</div><!-- class="item active" -->
<div class="item">
<p style="color: white;">홈페이지는 첫느낌이 중요한데 상쾌하면서 스크롤하면서 보니 지루하지않고 정보가 잘 전달됩니다. 추천합니다.<br><span style="font-style:normal;">수성구 청수로 이은경(영어개인교습소운영)</span>
</p>
</div>
<div class="item">
<p style="color: white;">저는 모바일홈페이지를 유용하게 사용하고있읍니다. 주문확인, 메일발송, 고객관리등...진작에 홈페이지 만들걸 그랬습니다.<br><span style="font-style:normal;">달성군 가창면 김용철(펜션운영)</span>
</p>
</div>
</div><!-- class="carousel-inner" role="listbox" -->
<!-- left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" style="opacity: 0.5"></span>
<!--style="opacity: 0.5": 좌우화살표가 투명하게 나온다.-->
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true" style="opacity: 0.5"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- id="myCarousel" -->
</div>
<!-- carousel 완료 -->
######################################################################
<!-- 메인화면 최신글 시작 -->
<?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 <> 'pc' ";
if(!$is_admin)
$sql .= " and a.bo_use_cert = '' ";
$sql .= " order by b.gr_order, a.bo_order ";
$result = sql_query($sql);
for ($i=0; $row=sql_fetch_array($result); $i++) {
// 이 함수가 바로 최신글을 추출하는 역할을 합니다.
// 스킨은 입력하지 않을 경우 관리자 > 환경설정의 최신글 스킨경로를 기본 스킨으로 합니다.
// 사용방법
// latest(스킨, 게시판아이디, 출력라인, 글자수);
echo latest("basic", $row['bo_table'], 5, 25);
}
?>
<!-- 메인화면 최신글 끝 -->
<?php
include_once(G5_MOBILE_PATH.'/tail.php');
?>
추천
0
0
댓글 0개