두가지 타입의 네이버 페이징입니다.
원하시는 형태로 적용해보세요.
1번 : 네이버 샵N에서 사용하는 페이징중 기본 빨간색 페이징입니다.
① /lib/common.lib.php 파일의 상단에 있는
function get_paging (~~~ 을 찾아서 아래의 내용으로 바꿔줍니다.
function get_paging($write_pages, $cur_page, $total_page, $url, $add="")
{
$str = "<div class=\"paginate _page_area page_loaded\">";
if ($cur_page > 1) {
$str .= "<a href='".$url.($start_page)."' class=\"pre_end\">맨앞</a><a href='" . $url . ($cur_page-1) . "{$add}' class=\"pre\">이전</a>";
}
else{
$str .= "";
}
$start_page = ( ( (int)( ($cur_page - 1 ) / $write_pages ) ) * $write_pages ) + 1;
$end_page = $start_page + $write_pages - 1;
if ($end_page >= $total_page) $end_page = $total_page;
$pre_count = $start_page-$write_pages;
if($pre_count <= 0)$pre_count=1;
$start_paging=$start_page-1;
if ($start_page > 1) $str .= "<a class='number' href='" . $url . ($start_page-1) . "{$add}'>$pre_count ~ $start_paging</a>";
if ($total_page > 1) {
for ($k=$start_page;$k<=$end_page;$k++) {
if ($cur_page != $k)
$str .= "<a href='$url$k{$add}'>$k</a>";
else
$str .= "<strong>$k</strong>";
}
}
$end_paging=$end_page +1;
$page_count=$end_page+$write_pages;
if($total_page < $page_count) $page_count=$total_page;
if ($total_page > $end_page) $str .= "<a href='" . $url . ($end_page+1) . "{$add}'>$end_paging ~ $page_count</a>";
if ($cur_page && $cur_page < $total_page) {
$str .= "<a class='next' href='$url" . ($cur_page+1) . "'>다음</a><a href='$url".($total_page)."' class=\"next_end\">맨뒤</a>";
}
else{
$str .= "";
}
$str .= "</div>";
return $str;
}
② 그누보드 루트의 style.css 파일을 열어 72번째 줄의 부분을 찾아 아래의 내용으로 바꿔줍니다.
.paginate{display:none;height:35px;margin-top:20px;text-align:center}
.paginate a,.paginate strong,.paginate span{display:inline-block;overflow:hidden;position:relative;height:33px;margin-right:-5px;padding:0 12px;border:1px solid transparent;line-height:32px;vertical-align:top;text-decoration:none;font-weight:bold;font-family:verdana}
.paginate strong{}
.paginate .pre{padding:0 14px 0 26px}
.paginate .next{padding:0 26px 0 14px}
.paginate .pre_end{padding:0 14px 0 26px}
.paginate .next_end{padding:0 26px 0 14px}
.paginate .pre,.paginate .next,.paginate .pre_end,.paginate .next_end{position:relative;line-height:35px;font-weight:normal;font-size:11px;font-family:'돋움',dotum}
.paginate .pre:hover{}
.paginate .next:hover{}
.paginate .pre_end:hover{}
.paginate .next_end:hover{}
.paginate a.pre,.paginate a.next{}
.paginate a:hover{text-decoration:none}
.page_loaded{display:block}
.page_only_one{display:block}
.page_no_result{display:none}
.paginate a,.paginate strong,.paginate span{border-color:#e6e6e6;border-bottom-color:#ccc;background:url(http://img.shop.naver.net/front/cube/red/sp_hr.gif) repeat-x 0 0;color:#333}
.paginate strong{color:#ee5834 !important;background:#fff}
.paginate .pre{background:url(http://img.shop.naver.net/front/cube/red/sp_skin.gif) no-repeat 0 -835px !important}
.paginate .next{background:url(http://img.shop.naver.net/front/cube/red/sp_skin.gif) no-repeat 100% -835px !important}
.paginate .pre_end{background:url(http://img.shop.naver.net/front/cube/red/sp_skin.gif) no-repeat 0 -905px !important}
.paginate .next_end{background:url(http://img.shop.naver.net/front/cube/red/sp_skin.gif) no-repeat 100% -905px !important}
.paginate .pre,.paginate .next,.paginate .pre_end,.paginate .next_end{color:#505050}
.paginate .pre:hover{background-position:0 -800px !important}
.paginate .next:hover{background-position:100% -800px !important}
.paginate .pre_end:hover{background-position:0 -870px !important}
.paginate .next_end:hover{background-position:100% -870px !important}
.paginate a.pre,.paginate a.next{color:#333}
.paginate a:hover{background:#fff;color:#ee5834}
2번 : 네이버 이미지 검색부분의 페이징입니다.
① /lib/common.lib.php 파일의 상단에 있는
function get_paging (~~~ 을 찾아서 아래의 내용으로 바꿔줍니다.
function get_paging($write_pages, $cur_page, $total_page, $url, $add="")
{
$str = "<div class=\"paging_imsch\">";
if ($cur_page > 1) {
$str .= "<a href='" . $url . ($cur_page-1) . "{$add}' class=\"bt_prev _btn_prev\"><em>이전</em></a>";
}
else{
$str .= "<span class=\"bt_prev _btn_prev\"><em>이전페이지</em></span>";
}
$start_page = ( ( (int)( ($cur_page - 1 ) / $write_pages ) ) * $write_pages ) + 1;
$end_page = $start_page + $write_pages - 1;
if ($end_page >= $total_page) $end_page = $total_page;
$pre_count = $start_page-$write_pages;
if($pre_count <= 0)$pre_count=1;
$start_paging=$start_page-1;
if ($total_page > 1) {
for ($k=$start_page;$k<=$end_page;$k++) {
if ($cur_page != $k)
$str .= "<a href='$url$k{$add}'>$k</a>";
else
$str .= "<strong><a class=\"_btn_cur\">$k</a></strong>";
}
}
$end_paging=$end_page +1;
$page_count=$end_page+$write_pages;
if($total_page < $page_count) $page_count=$total_page;
if ($cur_page && $cur_page < $total_page) {
$str .= "<a class='bt_next _btn_next' href='$url" . ($cur_page+1) . "'><em>다음</em></a>";
}
else{
$str .= "<span class=\"bt_next _btn_next\"><em>다음페이지</em></span>";
}
$str .= "</div>";
return $str;
}
② 그누보드 루트의 style.css 파일의 가장 하단에 아래의 내용을 추가합니다.
.paging_imsch {
margin: 0 auto;
overflow: hidden;
padding: 35px 0 48px;
text-align: center;
width: 360px;
}
.paging_imsch a, .paging_imsch span {
background: url("../img/sp_imsch.png") no-repeat scroll -28px -100px transparent;
border: 0 none;
color: #666666;
display: inline-block;
font-family: tahoma,applegothic,sans-serif;
font-size: 12px;
font-weight: bolder;
height: 27px;
letter-spacing: -1px;
line-height: 27px;
margin: 0 0 0 -1px;
padding-right: 2px;
text-align: center;
vertical-align: top;
width: 26px;
}
.paging_imsch a:hover {
background-position: -56px -100px;
border: 0 none;
color: #000000;
left: -1px;
padding-left: 2px;
position: relative;
text-decoration: underline;
width: 24px;
}
.paging_imsch em {
font-size: 0;
height: 0;
left: -1px;
overflow: hidden;
position: absolute;
text-indent: -1000px;
top: -1px;
width: 0;
}
.paging_imsch strong a {
background-position: -127px -100px;
color: #15AE20;
height: 30px;
line-height: 29px;
margin: -1px 0 0 -2px;
padding: 0;
position: relative;
width: 30px;
z-index: 1;
}
.paging_imsch strong a:hover {
background-position: -127px -100px;
color: #15AE20;
left: 0;
padding: 0;
text-decoration: none;
width: 30px;
}
.paging_imsch .bt_prev {
background-position: 0 -140px;
margin-right: 1px;
padding: 0;
position: relative;
width: 28px;
}
.paging_imsch .bt_next {
background-position: -83px -140px;
margin-left: -2px;
padding: 0;
position: relative;
width: 28px;
}
.paging_imsch a.bt_prev:hover {
background-position: 0 -180px;
left: 0;
padding: 0;
width: 28px;
}
.paging_imsch a.bt_next:hover {
background-position: -83px -180px;
left: 0;
padding: 0;
width: 28px;
}
.paging_imsch span.bt_prev {
background-position: 0 -100px;
width: 28px;
}
.paging_imsch span.bt_next {
background-position: -83px -100px;
width: 28px;
}
.paging_imsch span.on {
}
.paging_imsch .on {
}
.sp_imsch {
float: left;
margin: 0 5px 0 0;
}
.sp_imsch em {
display: block;
overflow: hidden;
text-indent: -1000px;
}
③ 첨부된 파일의 압축을 풀어서 나오는 sp_imsch.png 파일을 그누보드의 루트에 있는 /img/ 폴더에 업로드 합니다.
※ 로그인 하시면 원본파일을 볼 수 있습니다. ※
원하시는 형태로 적용해보세요.
1번 : 네이버 샵N에서 사용하는 페이징중 기본 빨간색 페이징입니다.
① /lib/common.lib.php 파일의 상단에 있는
function get_paging (~~~ 을 찾아서 아래의 내용으로 바꿔줍니다.
function get_paging($write_pages, $cur_page, $total_page, $url, $add="")
{
$str = "<div class=\"paginate _page_area page_loaded\">";
if ($cur_page > 1) {
$str .= "<a href='".$url.($start_page)."' class=\"pre_end\">맨앞</a><a href='" . $url . ($cur_page-1) . "{$add}' class=\"pre\">이전</a>";
}
else{
$str .= "";
}
$start_page = ( ( (int)( ($cur_page - 1 ) / $write_pages ) ) * $write_pages ) + 1;
$end_page = $start_page + $write_pages - 1;
if ($end_page >= $total_page) $end_page = $total_page;
$pre_count = $start_page-$write_pages;
if($pre_count <= 0)$pre_count=1;
$start_paging=$start_page-1;
if ($start_page > 1) $str .= "<a class='number' href='" . $url . ($start_page-1) . "{$add}'>$pre_count ~ $start_paging</a>";
if ($total_page > 1) {
for ($k=$start_page;$k<=$end_page;$k++) {
if ($cur_page != $k)
$str .= "<a href='$url$k{$add}'>$k</a>";
else
$str .= "<strong>$k</strong>";
}
}
$end_paging=$end_page +1;
$page_count=$end_page+$write_pages;
if($total_page < $page_count) $page_count=$total_page;
if ($total_page > $end_page) $str .= "<a href='" . $url . ($end_page+1) . "{$add}'>$end_paging ~ $page_count</a>";
if ($cur_page && $cur_page < $total_page) {
$str .= "<a class='next' href='$url" . ($cur_page+1) . "'>다음</a><a href='$url".($total_page)."' class=\"next_end\">맨뒤</a>";
}
else{
$str .= "";
}
$str .= "</div>";
return $str;
}
② 그누보드 루트의 style.css 파일을 열어 72번째 줄의 부분을 찾아 아래의 내용으로 바꿔줍니다.
.paginate{display:none;height:35px;margin-top:20px;text-align:center}
.paginate a,.paginate strong,.paginate span{display:inline-block;overflow:hidden;position:relative;height:33px;margin-right:-5px;padding:0 12px;border:1px solid transparent;line-height:32px;vertical-align:top;text-decoration:none;font-weight:bold;font-family:verdana}
.paginate strong{}
.paginate .pre{padding:0 14px 0 26px}
.paginate .next{padding:0 26px 0 14px}
.paginate .pre_end{padding:0 14px 0 26px}
.paginate .next_end{padding:0 26px 0 14px}
.paginate .pre,.paginate .next,.paginate .pre_end,.paginate .next_end{position:relative;line-height:35px;font-weight:normal;font-size:11px;font-family:'돋움',dotum}
.paginate .pre:hover{}
.paginate .next:hover{}
.paginate .pre_end:hover{}
.paginate .next_end:hover{}
.paginate a.pre,.paginate a.next{}
.paginate a:hover{text-decoration:none}
.page_loaded{display:block}
.page_only_one{display:block}
.page_no_result{display:none}
.paginate a,.paginate strong,.paginate span{border-color:#e6e6e6;border-bottom-color:#ccc;background:url(http://img.shop.naver.net/front/cube/red/sp_hr.gif) repeat-x 0 0;color:#333}
.paginate strong{color:#ee5834 !important;background:#fff}
.paginate .pre{background:url(http://img.shop.naver.net/front/cube/red/sp_skin.gif) no-repeat 0 -835px !important}
.paginate .next{background:url(http://img.shop.naver.net/front/cube/red/sp_skin.gif) no-repeat 100% -835px !important}
.paginate .pre_end{background:url(http://img.shop.naver.net/front/cube/red/sp_skin.gif) no-repeat 0 -905px !important}
.paginate .next_end{background:url(http://img.shop.naver.net/front/cube/red/sp_skin.gif) no-repeat 100% -905px !important}
.paginate .pre,.paginate .next,.paginate .pre_end,.paginate .next_end{color:#505050}
.paginate .pre:hover{background-position:0 -800px !important}
.paginate .next:hover{background-position:100% -800px !important}
.paginate .pre_end:hover{background-position:0 -870px !important}
.paginate .next_end:hover{background-position:100% -870px !important}
.paginate a.pre,.paginate a.next{color:#333}
.paginate a:hover{background:#fff;color:#ee5834}
2번 : 네이버 이미지 검색부분의 페이징입니다.
① /lib/common.lib.php 파일의 상단에 있는
function get_paging (~~~ 을 찾아서 아래의 내용으로 바꿔줍니다.
function get_paging($write_pages, $cur_page, $total_page, $url, $add="")
{
$str = "<div class=\"paging_imsch\">";
if ($cur_page > 1) {
$str .= "<a href='" . $url . ($cur_page-1) . "{$add}' class=\"bt_prev _btn_prev\"><em>이전</em></a>";
}
else{
$str .= "<span class=\"bt_prev _btn_prev\"><em>이전페이지</em></span>";
}
$start_page = ( ( (int)( ($cur_page - 1 ) / $write_pages ) ) * $write_pages ) + 1;
$end_page = $start_page + $write_pages - 1;
if ($end_page >= $total_page) $end_page = $total_page;
$pre_count = $start_page-$write_pages;
if($pre_count <= 0)$pre_count=1;
$start_paging=$start_page-1;
if ($total_page > 1) {
for ($k=$start_page;$k<=$end_page;$k++) {
if ($cur_page != $k)
$str .= "<a href='$url$k{$add}'>$k</a>";
else
$str .= "<strong><a class=\"_btn_cur\">$k</a></strong>";
}
}
$end_paging=$end_page +1;
$page_count=$end_page+$write_pages;
if($total_page < $page_count) $page_count=$total_page;
if ($cur_page && $cur_page < $total_page) {
$str .= "<a class='bt_next _btn_next' href='$url" . ($cur_page+1) . "'><em>다음</em></a>";
}
else{
$str .= "<span class=\"bt_next _btn_next\"><em>다음페이지</em></span>";
}
$str .= "</div>";
return $str;
}
② 그누보드 루트의 style.css 파일의 가장 하단에 아래의 내용을 추가합니다.
.paging_imsch {
margin: 0 auto;
overflow: hidden;
padding: 35px 0 48px;
text-align: center;
width: 360px;
}
.paging_imsch a, .paging_imsch span {
background: url("../img/sp_imsch.png") no-repeat scroll -28px -100px transparent;
border: 0 none;
color: #666666;
display: inline-block;
font-family: tahoma,applegothic,sans-serif;
font-size: 12px;
font-weight: bolder;
height: 27px;
letter-spacing: -1px;
line-height: 27px;
margin: 0 0 0 -1px;
padding-right: 2px;
text-align: center;
vertical-align: top;
width: 26px;
}
.paging_imsch a:hover {
background-position: -56px -100px;
border: 0 none;
color: #000000;
left: -1px;
padding-left: 2px;
position: relative;
text-decoration: underline;
width: 24px;
}
.paging_imsch em {
font-size: 0;
height: 0;
left: -1px;
overflow: hidden;
position: absolute;
text-indent: -1000px;
top: -1px;
width: 0;
}
.paging_imsch strong a {
background-position: -127px -100px;
color: #15AE20;
height: 30px;
line-height: 29px;
margin: -1px 0 0 -2px;
padding: 0;
position: relative;
width: 30px;
z-index: 1;
}
.paging_imsch strong a:hover {
background-position: -127px -100px;
color: #15AE20;
left: 0;
padding: 0;
text-decoration: none;
width: 30px;
}
.paging_imsch .bt_prev {
background-position: 0 -140px;
margin-right: 1px;
padding: 0;
position: relative;
width: 28px;
}
.paging_imsch .bt_next {
background-position: -83px -140px;
margin-left: -2px;
padding: 0;
position: relative;
width: 28px;
}
.paging_imsch a.bt_prev:hover {
background-position: 0 -180px;
left: 0;
padding: 0;
width: 28px;
}
.paging_imsch a.bt_next:hover {
background-position: -83px -180px;
left: 0;
padding: 0;
width: 28px;
}
.paging_imsch span.bt_prev {
background-position: 0 -100px;
width: 28px;
}
.paging_imsch span.bt_next {
background-position: -83px -100px;
width: 28px;
}
.paging_imsch span.on {
}
.paging_imsch .on {
}
.sp_imsch {
float: left;
margin: 0 5px 0 0;
}
.sp_imsch em {
display: block;
overflow: hidden;
text-indent: -1000px;
}
③ 첨부된 파일의 압축을 풀어서 나오는 sp_imsch.png 파일을 그누보드의 루트에 있는 /img/ 폴더에 업로드 합니다.
※ 로그인 하시면 원본파일을 볼 수 있습니다. ※
웹스터디 2014-01-04 10:44:49
0
답글달기