HOME 팁엔테크 팁엔테크
목록
글쓰기
크게 작게 인쇄

[그누보드]네이버 페이징 2 종류 따라하기

슈퍼맨 웹스터디
2012-05-06 19:44:31 | 조회4,108 | 댓글1 |추천0 |신고0
두가지 타입의 네이버 페이징입니다.
원하시는 형태로 적용해보세요.

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/ 폴더에 업로드 합니다.



※ 로그인 하시면 원본파일을 볼 수 있습니다. ※

0
스크랩
홈페이지
페이스북
트위터
요즘
미투데이
스크랩
코멘트 1

  • 슈퍼맨 웹스터디 2014-01-04 10:44:49

    0

    * 비밀글 입니다.

    답글달기

자동등록방지 코드
목록
글쓰기
그누보드팁 | 전체게시물 160
안내

포인트안내닫기

  • 글읽기0
  • 글쓰기100
  • 댓글쓰기50
  • 다운로드-500
그누보드팁리스트
번호 제목 글쓴이 날짜 조회 추천
 공지  텍스트
색상코드표
 슈퍼맨 웹스터디 12-17 - -
160 파일첨부
[기타]게시판 스팸 실시간 차단
+1 링크 		슈퍼맨 웹스터디 12-07 4928 0
159 텍스트
[그누보드]하루에 같은 아이피로 글쓰기 제한하기
+3 		슈퍼맨 웹스터디 12-07 4320 0
158 텍스트
[후딱빌더]상단 타이틀 변경
+1 		슈퍼맨 웹스터디 01-10 5451 0
157 텍스트
[기타]"/bin/rm : 인수 명단이 너무 김" 현상 발생시 해결방법
 슈퍼맨 웹스터디 12-14 5069 0
156 텍스트
[G5]url에 타 도메인을 지정할 수 없습니다.
링크 		슈퍼맨 웹스터디 12-06 7200 0
155 텍스트
[그누보드]관리자일 경우 리스트 개수 조절하기
링크 		슈퍼맨 웹스터디 11-27 5265 0
154 텍스트
[그누보드]글 번호 날짜순으로 정렬하기
링크 		슈퍼맨 웹스터디 09-27 6243 0
153 텍스트
[그누보드]관리자와 그룹관리자만 아이프레임(iframe) 사용하고자 할때
 슈퍼맨 웹스터디 09-06 4944 0
152 텍스트
[그누보드]g4s의 ckeditor를 g4버전에 설치하기
+2 링크 		슈퍼맨 웹스터디 08-15 5197 1
151 파일첨부
[G5]그누보드에서 G4S로 이전시 첨부파일 출력 업데이트
링크 		슈퍼맨 웹스터디 07-19 4557 0
150 파일첨부
[그누보드]탈퇴 회원 선택후 완전히 삭제하기
링크 		슈퍼맨 웹스터디 07-12 6243 0
149 파일첨부
[그누보드]지정한 기간이 지나면 글 수정 못하게 하기
링크 		슈퍼맨 웹스터디 07-02 6014 0
148 파일첨부
[후딱빌더]전체 회원포인트 초기화하기
+2 링크 		슈퍼맨 웹스터디 06-06 4789 0
147 텍스트
[그누보드]cheditor 이미지 첨부시 호스트네임 사용안하기
 슈퍼맨 웹스터디 04-02 4809 0
146 파일첨부
[기타][변환툴] XE에서 그누보드4로 게시판 이전툴
링크 		슈퍼맨 웹스터디 03-28 4966 0
145 파일첨부
[기타][변환툴] XE에서 그누보드4로 회원,레벨,포인트 변환기
링크 		슈퍼맨 웹스터디 03-28 4962 0
144 파일첨부
[그누보드]리스트에서 새코멘트 표시하기
+1 		슈퍼맨 웹스터디 03-19 4808 0
143 파일첨부
[그누보드]드래그시 배경화면색상 변경하기
 슈퍼맨 웹스터디 03-13 4929 0
142 텍스트
[기타][URL 복사 클립보드] 익스,파폭,크롬 가능 소스
+4 		슈퍼맨 웹스터디 03-12 6968 0
141 텍스트
[그누보드]시리얼 넘버 생성
링크 		슈퍼맨 웹스터디 02-15 5316 0
12345678맨뒤
검색
글쓰기