이전글, 다음글, 목록으로 구현
본문
그누5.3 + 아미나 사용중입니다.
리모컨을 구현하려고 하는데, 생각처럼 되질 않네요 ㅠ
페이지에 최상단에
// G53 이하
$list_href = './board.php?bo_table='.$bo_table;
if (!$board['bo_use_list_view1']) {
if ($sql_search)
$sql_search = " and " . $sql_search;
// 윗글을 얻음
$sql = " select wr_id, wr_subject, wr_comment, wr_datetime from {$write_table} where wr_is_comment = 0 and wr_num = '{$write['wr_num']}' and wr_reply < '{$write['wr_reply']}' {$sql_search} order by wr_num desc, wr_reply desc limit 1 ";
$prev = sql_fetch($sql);
// 위의 쿼리문으로 값을 얻지 못했다면
if (!$prev['wr_id']) {
$sql = " select wr_id, wr_subject, wr_comment, wr_datetime from {$write_table} where wr_is_comment = 0 and wr_num < '{$write['wr_num']}' {$sql_search} order by wr_num desc, wr_reply desc limit 1 ";
$prev = sql_fetch($sql);
}
// 아래글을 얻음
$sql = " select wr_id, wr_subject, wr_comment, wr_datetime from {$write_table} where wr_is_comment = 0 and wr_num = '{$write['wr_num']}' and wr_reply > '{$write['wr_reply']}' {$sql_search} order by wr_num, wr_reply limit 1 ";
$next = sql_fetch($sql);
// 위의 쿼리문으로 값을 얻지 못했다면
if (!$next['wr_id']) {
$sql = " select wr_id, wr_subject, wr_comment, wr_datetime from {$write_table} where wr_is_comment = 0 and wr_num > '{$write['wr_num']}' {$sql_search} order by wr_num, wr_reply limit 1 ";
$next = sql_fetch($sql);
}
}
// 이전글 링크
$prev_href = '';
if (isset($prev['wr_id']) && $prev['wr_id']) {
$prev_wr_subject = get_text(cut_str($prev['wr_subject'], 255));
$prev_wr_comment = $prev['wr_comment'];
$prev_wr_date = $prev['wr_datetime'];
$prev_href = './board.php?bo_table='.$bo_table.'&wr_id='.$prev['wr_id'].$qstr;
}
// 다음글 링크
$next_href = '';
if (isset($next['wr_id']) && $next['wr_id']) {
$next_wr_subject = get_text(cut_str($next['wr_subject'], 255));
$next_wr_comment = $next['wr_comment'];
$next_wr_date = $next['wr_datetime'];
$next_href = './board.php?bo_table='.$bo_table.'&wr_id='.$next['wr_id'].$qstr;
}
// 내용스킨
if(is_file($view_skin_path.'/view.skin.php')) {
include_once($view_skin_path.'/view.skin.php');
} else {
echo '<div class="well text-center"><i class="fa fa-bell red"></i> 설정하신 내용스킨('.$boset['view_skin'].')이 존재하지 않습니다.</div>';
}
삽입 후
<aside id="sidebar-btn">
<ul>
<li>
<a href="<?php echo $prev_href.$modal_query; ?>" title="이전 글">
<div class="go-left">
<span class="sidebar-btn-box bg-navy">
<span class="sidebar-btn">
<i class="fa fa-chevron-circle-left"></i>
</span>
</span>
</a>
</li>
</div>
<li>
<a href="#" title="위로">
<div class="go-up">
<span class="sidebar-btn-box bg-navy">
<span class="sidebar-btn">
<i class="fa fa-arrow-up"></i>
</span>
</span>
</a>
</li>
</div>
<li>
<a href="#bo_vc" title="댓글">
<div class="go-edit">
<span class="sidebar-btn-box bg-navy">
<span class="sidebar-btn">
<i class="fa fa-edit"></i>
</span>
</span>
</a>
</li>
<li>
<a href="<?php echo $list_href ?>" title="목록">
<div class="go-edit">
<span class="sidebar-btn-box bg-navy">
<span class="sidebar-btn">
<i class="fa fa-edit"></i>
</span>
</span>
</a>
</li>
</div>
<?php if(IS_YC) { //영카트 ?>
<li>
<a href="javascript:;" onclick="sidebar_open('sidebar-cart');" title="쇼핑">
<span class="sidebar-btn-box bg-navy">
<span class="sidebar-btn">
<i class="fa fa-shopping-bag"></i>
<?php if($member['cart'] || $member['today']) { ?>
<span class="sidebar-btn-label en bg-orangered"><?php echo $member['cart'] + $member['today'];?></span>
<?php } ?>
</span>
</span>
</a>
</li>
<?php } ?>
<li>
<a href="#" title="아래">
<div class="go-down">
<span class="sidebar-btn-box bg-navy">
<span class="sidebar-btn">
<i class="fa fa-arrow-down"></i>
</span>
</span>
</a>
</li>
</div>
<li>
<a href="<?php echo $next_href.$modal_query; ?>" title="다음 글">
<div class="go-right">
<span class="sidebar-btn-box bg-navy">
<span class="sidebar-btn">
<i class="fa fa-chevron-circle-right"></i>
</span>
</span>
</a>
</li>
</div>
</ul>
</aside>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$( window ).scroll( function() {
if ($(this).scrollTop() > 30 ) {
$('.go-left,.go-right,.go-edit,.go-list,.go-up,.go-center,.go-down,.go').fadeIn();
$('#rightnav').fadeOut();
} else {
$('.go-left,.go-right,.go-edit,.go-list,.go-up,.go-center,.go-down,.go').fadeOut();
$('#rightnav').fadeIn();
}
});
});
$(function() {
$(".go-up").on("click", function(e) {
$("html, body").animate({scrollTop:0}, '500');
return false;
});
$(".go-center").on("click", function(e) {
var middle_pos = $("body").offset().top - ( $(window).height() - $("body").outerHeight(true) ) / 2;
$("html, body").animate({scrollTop:middle_pos}, '500');
return false;
});
$(".go-down").on("click", function(e) {
$("html, body").animate({scrollTop:$(document).height()}, '500');
return false;
});
});
</script>
<style>
#quick {position:absolute;top:50%;left:0;width:50px;margin-top:-157.5px;z-index: 9999999999}#quick li {position:relative}#quick li button {width:50px;height:50px;border:0;font-size:1.325em;color:#f00;background:rgba(48,89,199,0.2)}#quick .qk_tit {display:none;position:absolute;top:0px;right:60px;white-space:pre;padding:0 15px;line-height:30px;color:#f00;background:rgba(48,89,199,0.2);font-size:1em;border-radius:5px}#quick .qk_tit:after {content:"";position:absolute;top:10px;right:-8px;display:inline-block;width:0;height:0;border-style:solid;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid rgba(48,89,199,0.2);color:transparent}#quick li:hover .qk_tit {display:block}#rightnav {display:none;position: fixed;width:45px;height:auto;right:0;z-index: 9999999999}.rightnav0 {position: fixed;font-size:12px;top:250px;width:45px;height:25px;padding:3px 0 0 7px;right:-20px;border-left:1px solid rgba(48,89,199,0.2);border-top:1px solid rgba(48,89,199,0.2);border-bottom:1px solid rgba(48,89,199,0.2);border-radius:10px 0 0 10px;background:rgba(255,255,255,0.5)}.rightnav1 {position: fixed;font-size:12px;top:275px;width:45px;height:25px;padding:3px 0 0 7px;right:-20px;border-left:1px solid rgba(48,89,199,0.2);border-top:1px solid rgba(48,89,199,0.2);border-bottom:1px solid rgba(48,89,199,0.2);border-radius:10px 0 0 10px;background:rgba(255,255,255,0.5)}.rightnav0:hover,.rightnav1:hover {cursor:pointer;color:#f00;background:rgba(48,89,199,0.2)}
</style>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$( window ).scroll( function() {
if ($(this).scrollTop() > 30 ) {
$('.go-left,.go-right,.go-edit,.go-list,.go-up,.go-center,.go-down,.go').fadeIn();
$('#rightnav').fadeOut();
} else {
$('.go-left,.go-right,.go-edit,.go-list,.go-up,.go-center,.go-down,.go').fadeOut();
$('#rightnav').fadeIn();
}
});
});
$(function() {
$(".go-up").on("click", function(e) {
$("html, body").animate({scrollTop:0}, '500');
return false;
});
$(".go-center").on("click", function(e) {
var middle_pos = $("body").offset().top - ( $(window).height() - $("body").outerHeight(true) ) / 2;
$("html, body").animate({scrollTop:middle_pos}, '500');
return false;
});
$(".go-down").on("click", function(e) {
$("html, body").animate({scrollTop:$(document).height()}, '500');
return false;
});
});
</script>
다음과 같이 넣었습니다.
이전글, 다음글, 목록으로가 진행되질 않습니다 ㅠ
댓글로, 위, 아래는 진행이 되구요 ㅠ
뭐가 문제일까요 ㅠ
답변 1
<?php if (defined('_INDEX_')) { ?>
<div id="arrnav">
<style>.goo-up {border-top:1px solid rgba(48,89,199,0.2);border-radius:10px 10px 0 0}</style>
<a href="#" title="위로" class="goo-up"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
<a href="#" title="중간" class="goo-center"><i class="fa fa-circle" aria-hidden="true"></i></a>
<a href="#" title="아래" class="goo-down"><i class="fa fa-arrow-down" aria-hidden="true"></i></a>
</div>
<?php } ?>
<div id="arrnav">
<?php
if ($bo_table && $wr_id && $board['bo_use_list_view'] == '0'){ ?>
<style>.goo-up {border-top:0px solid rgba(48,89,199,0.2);border-radius:0 0 0 0}</style>
<?php if ($prev_href) { ?><a href="<?php echo $prev_href ?>" class="goo-left" title="<?php echo $prev_wr_subject;?>"><?php } else { ?><a href="#" class="goo-left" style="color:#04040422" title="처음 입니다."><?php } ?><i class="fa fa-caret-left" aria-hidden="true"></i></a>
<?php if ($next_href) { ?><a href="<?php echo $next_href ?>" class="goo-right" title="<?php echo $next_wr_subject;?>"><?php } else { ?><a href="#" class="goo-right" style="color:#04040422" title="끝 입니다."><?php } ?><i class="fa fa-caret-right" aria-hidden="true"></i></a>
<?php if (!$prev_href&&!$next_href)echo '<style>.goo-left,.goo-right{height:0.1px!important}</style>';?>
<a href="#bo_vc" class="goo-edit" title="댓글"><i class="fa fa-edit" aria-hidden="true"></i></a>
<a href="<?php echo $list_href ?>" class="goo-list" title="목록"><i class="fa fa-list" aria-hidden="true"></i></a>
<a href="#" title="위로" class="goo-up"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
<a href="#" title="중간" class="goo-center"><i class="fa fa-circle" aria-hidden="true"></i></a>
<a href="#" title="아래" class="goo-down"><i class="fa fa-arrow-down" aria-hidden="true"></i></a>
<?php } elseif (!defined('_INDEX_')) { ?>
<style>.goo-up {border-top:1px solid rgba(48,89,199,0.2);border-radius:10px 10px 0 0}</style>
<a href="#" title="위로" class="goo-up"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
<a href="#" title="중간" class="goo-center"><i class="fa fa-circle" aria-hidden="true"></i></a>
<a href="#" title="아래" class="goo-down"><i class="fa fa-arrow-down" aria-hidden="true"></i></a>
<?php } ?>
</div>
<script type="text/javascript" charset="utf-8">
$(window).scroll(function () {
var height = $(document).scrollTop();
if (parseInt(height) > 60) {
$('#gnb').css({
"position": "fixed",
"top": "0",
"display": "block",
"width": "100%",
"z-index" : "10000"
});
$('#wrapper').css({
"padding-top":"30px"
});
} else {
$('#gnb').css({
"display": "block",
"position": "relative",
"z-index" : "10000"
});
$('#wrapper').css({
"padding-top":"0px"
});
}
});
$(document).ready(function(){$(window).scroll(function(){var state=$('#aside').css('display');if($(this).scrollTop()>30){$('.goo-left,.goo-right,.goo-edit,.goo-list,.goo-up,.goo-center,.goo-down').fadeIn()}else{$('.goo-left,.goo-right,.goo-edit,.goo-list,.goo-up,.goo-center,.goo-down').fadeOut()}})});$(function(){$(".goo-up").on("click",function(e){$("html, body").animate({scrollTop:0},'500');return false});$(".goo-center").on("click",function(e){var middle_pos=$("body").offset().top-($(window).height()-$("body").outerHeight(true))/2;$("html, body").animate({scrollTop:middle_pos},'500');return false});$(".goo-down").on("click",function(e){$("html, body").animate({scrollTop:$(document).height()},'500');return false})});
$(function(){
var nava = $('#gnb,#tnb'); //헤더를 변수에 넣기
var page = $('#container'); //색상이 변할 부분
var pageOffsetTop = page.offset().top; //색상 변할 부분의 top값 구하기
$(window).resize(function(){ //반응형을 대비하여 리사이즈시 top값을 다시 계산
pageOffsetTop = page.offset().top;
});
$(window).on('scroll', function(){
if($(window).scrollTop() >= 60){ //($(window).scrollTop() >= pageOffsetTop) { // 스크롤이 page보다 밑에 내려가면
nava.addClass('down'); //클래스 추가
} else { // 스크롤 올릴 때
nava.removeClass('down'); //클래스 제거
}
});
});
</script>
<style>
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background-color:#fff}
::-webkit-scrollbar-thumb{background:#badcff99;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#ff80ed66}
::-webkit-scrollbar-thumb:active{background:#ff2525}
::-webkit-scrollbar-button {display:none}
#arrnav {position: fixed;right:30px;width:25px;text-align:center;z-index: 9}
.goo-left {position: fixed;right:30.5px;bottom:195px;width: 12.5px;height: 25px;font-size: 16px;border-left:1px solid rgba(48,89,199,0.2);border-top:1px solid rgba(48,89,199,0.2);border-radius:10px 0 0 0;background-color:rgba(255,255,255,0.2)}
.goo-right {position: fixed;right:18px;bottom:195px;width: 12.5px;height: 25px;font-size: 16px;border-top:1px solid rgba(48,89,199,0.2);border-right:1px solid rgba(48,89,199,0.2);border-radius:0 10px 0 0;background-color:rgba(255,255,255,0.2)}
.goo-edit {position: fixed;right:18px;bottom:170px;width: 25px;height: 25px;font-size: 16px;border-left:1px solid rgba(48,89,199,0.2);border-right:1px solid rgba(48,89,199,0.2);background-color:rgba(255,255,255,0.2)}
.goo-list {position: fixed;right:18px;bottom:145px;width: 25px;height: 25px;font-size: 16px;border-left:1px solid rgba(48,89,199,0.2);border-right:1px solid rgba(48,89,199,0.2);background-color:rgba(255,255,255,0.2)}
.goo-up {position: fixed;right:18px;bottom:120px;width: 25px;height: 25px;font-size: 16px;border-left:1px solid rgba(48,89,199,0.2);border-right:1px solid rgba(48,89,199,0.2);background-color:rgba(255,255,255,0.2)}
.goo-center {position:fixed;right:18px;bottom:95px;width:25px;height:25px;line-height:25px;font-size:10px;border-left:1px solid rgba(48,89,199,0.2);border-right:1px solid rgba(48,89,199,0.2);background:rgba(255,255,255,0.2)}
.goo-down {position: fixed;right:18px;bottom:70px;width: 25px;height: 25px;font-size: 16px;border-left:1px solid rgba(48,89,199,0.2);border-right:1px solid rgba(48,89,199,0.2);border-bottom:1px solid rgba(48,89,199,0.2);border-radius:0 0 10px 10px;background-color:rgba(255,255,255,0.2)}
.goo-down:hover,.goo-up:hover,.goo-center:hover,.goo-left:hover,.goo-right:hover,.goo-edit:hover,.goo-list:hover {color:#f00;background:rgba(48,89,199,0.2)}
.gyv{margin-top:-20px;height:40px;color:rgba(200,200,200,.1);text-align:center}.gyv:hover {color:#fa0}
</style>
답변 감사합니다 ㅠㅠ 이상하게 pc에서는 먹히는데 모바일에서는 안먹히네요 (이전글, 다음글, 목록으로)
방식은 pc는 인클루트 하는 방식인데, 모바일은 위젯(아미나 테마)에 넣는 방식을 사용하고 있거든요... 도대체 무엇이 문제인지 모르겠습니다 ㅠ
pc용 입니다.
굳이 모바일에서도 사용을 하려면 되기는 하는데, tail.php에 넣어서 사용하세요.
말씀대로 tail.php에서 인클루드로 불러오니까 되네요;; 근데 만약 인클루드가 아니라 페이지에 직접 적용하고 싶으면 어떻게 하면 되는 걸까요?
위젯 페이지에 적용하고 싶은데, 직접 소스를 넣으면 버튼이 먹히지 않습니다... 어떤 변수를 집어 넣어줘야 하는 걸까요?
위젯은 아직 해보지 안아서 잘 모르겠습니다.
감사합니다! 어떻게든 해보겠습니다 :)
답변을 작성하시기 전에 로그인 해주세요.
