게시판 목록에 무한스크롤 테마 패치 > 공지사항

0624 12:48 추가사항

커뮤니티, 샵커뮤니티, 다이나믹테마 /skin_bs/board/보드명/write.skin.html 파일에서  > 가 빠진 부분이 있습니다.

수정전

<input type="hidden" name="wmode" id="wmode" value="{_wmode}"
    {_option_hidden}
    <div class="tbl_frm01 tbl_wrap">

수정후

<input type="hidden" name="wmode" id="wmode" value="{_wmode}">
    {_option_hidden}
    <div class="tbl_frm01 tbl_wrap">

6월 24일 12시 50분 전에 해당 테마를 다운 및 패치하신 분들은 해당 테마를 수정하여 업로드를 했으니 

다시 다운 받으셔서 패치 하시거나 직접수정 해 주시면 되겠습니다.

게시판 목록에 무한스크롤을 사용할 경우, modal 창으로 view페이지를 볼 수 있도록 기능 개선 됐습니다.

마이패치 및 테마 파일을 다운 받으셔서 패치해 주시거나 아래의 내용을 참고해 패치를 해 주신 후

관리자 - 이윰설정 - 게시판설정 - 상세설정 - 목록에서 무한스크롤 사용 체크 유뮤에 따라 사용 가능합니다.

샘플사이트(http://theme.eyoom.net/)에서 무한스크롤이 적용된 게시판을 확인하실 수 있습니다.

수정 내용은 아래와 같습니다.

1. 대상파일 : /eyoom/테마명/layout/head_bs(pc/mo).html

1) 소스추가

수정 후

add_stylesheet('<link rel="stylesheet" href="../css/custom.css" type="text/css" media="screen">',0);

?>
<!--{? !_wmode }-->

2) 소스추가 - 맨 하단

수정 후

        <!--{:}-->
            <div class="basic-bs-main col-md-12">
        <!--{/}-->
<!--{/}-->

커뮤니티, 샵커뮤니티, 다이나믹테마 추가 부분

상단 수정후

add_stylesheet('<link rel="stylesheet" href="../css/basic_bs.css" type="text/css" media="screen">',0);
add_stylesheet('<link rel="stylesheet" href="../css/custom.css" type="text/css" media="screen">',0);
if(!(defined('_WMODE_') && _WMODE_)) {
    add_stylesheet('<link rel="stylesheet" href="../css/colors/default.css" type="text/css" media="screen" id="eb_theme_color">',0);
}

?>

<!--[if lt IE 9]>

2. 대상파일 : /eyoom/테마명/layout/tail_bs(pc/mo).html

1) 소스추가

수정 후

<?php if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가 ?>
<!--{? !_wmode }-->

2) 소스추가

수정 후

    </div>
    <!--{* End Footer *}-->
</div>
<!--{* wrapper *}-->

<!--{/}-->

커뮤니티, 샵커뮤니티, 다이나믹테마 추가 부분

<!--{? !_wmode}-->
    jQuery(document).ready(function ($) {
        "use strict";
        $('.contentHolder').perfectScrollbar();
    });

... 생략...

function switcher_hide() {
        jQuery('.eb-switcher').hide();
    }
    <!--{/}-->
</script>

3. 대상파일 : /eyoom/테마명/skin_bs(pc/mo)/board/스킨명/list.skin.html

1) 소스수정

모든 a태그의 href="{.href}" 코드를 변경해야 함.

href="{.href}" {? wmode}onclick="eb_modal(this.href); return false;"{/}

2) 모달 코드 추가

수정 후

</div>
<!--{? wmode }-->
<div class="modal fade view-iframe-modal" tabindex="-1" role="dialog" aria-labelledby="boardlistModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 id="myLargeModalLabel" class="modal-title"><strong><i class="fa fa-search"></i> View Details</strong></h4>
            </div>
            <div class="modal-body">
                <iframe id="view-iframe" width="100%" frameborder="0"></iframe>
            </div>
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn-e btn-e-dark" type="button">닫기</button>
            </div>
        </div>
    </div>
</div>
<!--{/}-->

<!--{* End Modal *}-->

3) 페이지 버튼 소스 수정
수정 후

<!--{* 페이지 버튼 *}-->
<!--{? eyoom_board.bo_use_infinite_scroll != '1'}-->
{=eb_paging('basic')}
<!--{:}-->
<div id="infinite_pagination">
    <a class="next" href="{C.G5_BBS_URL}/board.php?bo_table={_bo_table}&page={page+1}"></a>
</div>
<!--{/}-->

<div class="margin-bottom-30"></div>

4) 모달 자바스크립트 수정 - 웹진을 예로 든 것이며 갤러리와 블로그는 해당 소스를 참고 바랍니다.
수정 후

</style>

<!--{? wmode }-->

<script type="text/javascript" src="../../../plugins/masonry/jquery.masonry.min.js"></script>
<script type="text/javascript" src="../../../plugins/infinite-scroll/jquery.infinitescroll.min.js"></script>

<script>
function eb_modal(href) {
    $('.view-iframe-modal').modal('show').on('hidden.bs.modal', function () {
        $("#view-iframe").attr("src", "");
    });
    $('.view-iframe-modal').modal('show').on('shown.bs.modal', function () {
        $("#view-iframe").attr("src", href);
        $('#view-iframe').height(parseInt($(window).height() * 0.7));
    });
    return false;
}
$(document).ready(function () {
    $(window).resize(function () {
        $('#view-iframe').height(parseInt($(window).height() * 0.7));
    });
    window.closeModal = function(wr_id){
        $('.view-iframe-modal').modal('hide');
        if(wr_id) {
            var w_id = wr_id.split('|');
            for(var i=0;i<w_id.length;i++) {
                $("#list-item-"+w_id[i]).hide();
            }
        }
    };
});

$(document).ready(function(){
    var $container = $('.webzine-boxes');

    $container.infinitescroll({
        navSelector  : "#infinite_pagination",
        nextSelector : "#infinite_pagination .next",
        itemSelector : ".webzine-boxes-in",
        loading: {
            finishedMsg: 'END',
            img: '../../../image/loading.gif'
        }
    },

    function( newElements ) {
        var $newElems = $( newElements ).css({ opacity: 1 });
        $newElems.imagesLoaded(function(){
            $newElems.animate({ opacity: 1 });
            $container.masonry( 'appended', $newElems, true );
        });
    });

});
</script>
<!--{/}-->

<!--{?_is_checkbox}-->
<script>

5)  id="list-item-{.wr_id}" 추가

<!--{@ list}-->
    <!--{? .is_notice}-->
    ...
    <!--{:}-->
    <div id="list-item-{.wr_id}" ...>

4. 대상파일 : /eyoom/테마명/skin_bs(pc/mo)/board/스킨명/view.skin.html

1) 소스수정

수정 후

            <!--{? _search_href}--><li><a href="{_search_href}" class="btn btn-default" type="button">검색</a></li><!--{/}-->
            <li><a href="{_list_href}" {? _wmode}onclick="close_modal();return false;"{/} class="btn btn-default" type="button">목록</a></li>
            <!--{? _reply_href}--><li><a href="{_reply_href}" class="btn btn-default" type="button">답변</a></li><!--{/}-->

2) 소스추가

수정 후

<!--{/}-->

function close_modal(wr_id) {
    window.parent.closeModal(wr_id);
}

function board_move(href)
{
    window.open(href, "boardmove", "left=50, top=50, width=500, height=550, scrollbars=1");
}
</script>

5. 대상파일 : /eyoom/테마명/skin_bs(pc/mo)/board/스킨명/view_comment.skin.html

1) 소스수정

수정 후

            <input type="hidden" name="wr_1" value="{_wr_1}">
            <input type="hidden" name="cmt_amt" value="{_cmt_amt}">
            <input type="hidden" name="wmode" value="{_wmode}">

            <header><i class="fa fa-pencil"></i> 댓글쓰기</header>

6. 대상파일 : /eyoom/테마명/skin_bs(pc/mo)/board/스킨명/write.skin.html

1) 소스수정

수정 후

    <input type="hidden" name="wr_1" id="wr_1" value="{_wr_1}">
    <input type="hidden" name="wmode" id="wmode" value="{_wmode}">
    {_option_hidden}
    <div class="tbl_frm01 tbl_wrap">

    <div class="text-center">
        <input type="submit" value="작성완료" id="btn_submit" accesskey="s" class="btn-e">
        <a href="{? _wmode}javascript:history.go(-1){:}./board.php?bo_table={_bo_table}{/}" class="btn-e btn-e-dark">취소</a>
    </div>
    </form>

    <input type="hidden" name="act" value="{_act}">
    <input type="hidden" name="url" value="{_SERVER.HTTP_REFERER}">
    <input type="hidden" name="wmode" value="{_wmode}">

    <div class="headline"><h4><i class="fa fa-copy"></i> {g5.title}</h4></div>

body {
    color: #333;
    font-size: 13px;
    line-height: 1.6;
    overflow-x: hidden;
}