전체목록보이기 사용 체크 유무에 상관없이 View 페이지에서 이전글, 다음글의 버튼이 보이고 각 버튼에 마우스를 올렸을 때 첨부된 이미지, 에디터 이미지, 동영상 썸네일, 외부 이미지 썸네일이 나오도록 해 보자.
 
외부 이미지의 썸네일도 보여지도록 아래 링크의 선행작업이 필요하다.
https://yadolee.com/bbs/board.php?bo_table=tip&wr_id=817

1. 그누보드/bbs/view.php를 열어 if (!$board['bo_use_list_view']) {를 검색하여 아래와 같이 수정한다.

수정 전

if (!$board['bo_use_list_view']) {
    if ($sql_search)
        $sql_search = " and " . $sql_search;

    // 윗글을 얻음
    $sql = " select wr_id, wr_subject, 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 (! (isset($prev['wr_id']) && $prev['wr_id'])) {
        $sql = " select wr_id, wr_subject, 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_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 (! (isset($next['wr_id']) && $next['wr_id'])) {
        $sql = " select wr_id, wr_subject, 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);
    }
}

수정 후

// 주석처리, 전체목록보이기 체크시에도 이전글 다음글 버튼 나타내기
//if (!$board['bo_use_list_view']) {
    if ($sql_search)
        $sql_search = " and " . $sql_search;

    // 윗글을 얻음
    //$sql = " select wr_id, wr_subject, 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 ";
    //추가, 여분필드도 가져오기
    $sql = " select wr_id, wr_subject, wr_datetime, wr_4 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 (! (isset($prev['wr_id']) && $prev['wr_id'])) {
        //$sql = " select wr_id, wr_subject, 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 ";
        //추가, 여분필드도 가져오기
        $sql = " select wr_id, wr_subject, wr_datetime, wr_4 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_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 ";
    //추가, 여분필드도 가져오기
    $sql = " select wr_id, wr_subject, wr_datetime, wr_4 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 (! (isset($next['wr_id']) && $next['wr_id'])) {
        //$sql = " select wr_id, wr_subject, 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 ";
        //추가, 여분필드도 가져오기
        $sql = " select wr_id, wr_subject, wr_datetime, wr_4 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);
    }
//}

2. 그누보드5/eyoom/user_program/board/view.skin.php를 열어 적당한 위치에 아래 소스를 넣는다.

// 이전글 프리뷰
if (isset($prev['wr_id']) && $prev['wr_id']) {
    $prev_img = get_list_thumbnail($bo_table, $prev['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height']);
    if($prev_img['src']) {
        $prev['img_content'] = "<img class='img-responsive' src='".$prev_img['src']."' alt='".$prev_img['alt']."'>";
        $prev['img_src'] = $prev_img['src'];
    } else {
        // wr_4 unserialize
        $prev_wr_4 = unserialize($prev['wr_4']);
        if(!$prev_wr_4) $prev_wr_4 = array();
        if($prev['wr_4']) {
            $prev_img['src'] = $prev_wr_4['thumb_src'];
            if($prev_img['src']) {
                $prev['img_content'] = "<img class='img-responsive' src='".$prev_img['src']."'>";
                $prev['img_src'] = $prev_img['src'];
            } else {
                $prev_img['src'] = $prev_wr_4['extimg_thumb'];
                if($prev_img) {
                    $prev['img_content'] = "<img class='img-responsive' src='".$prev_img['src']."'>";
                    $prev['img_src'] = $prev_img['src'];
                }
            }
        }
    }
}

// 다음글 프리뷰
if (isset($next['wr_id']) && $next['wr_id']) {
    $next_img = get_list_thumbnail($bo_table, $next['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height']);
    if($next_img['src']) {
        $next['img_content'] = "<img class='img-responsive' src='".$next_img['src']."' alt='".$next_img['alt']."'>";
        $next['img_src'] = $next_img['src'];
    } else {
        // wr_4 unserialize
        $next_wr_4 = unserialize($next['wr_4']);
        if(!$next_wr_4) $next_wr_4 = array();
        if($next['wr_4']) {
            $next_img['src'] = $next_wr_4['thumb_src'];
            if($next_img['src']) {
                $next['img_content'] = "<img class='img-responsive' src='".$next_img['src']."'>";
                $next['img_src'] = $next_img['src'];
            } else {
                $next_img['src'] = $next_wr_4['extimg_thumb'];
                if($next_img) {
                    $next['img_content'] = "<img class='img-responsive' src='".$next_img['src']."'>";
                    $next['img_src'] = $next_img['src'];
                }
            }
        }
    }
}

3. 변경하고자 하는 스킨의 view.skin.html을 열어 이전글과 다음글을 아래와 같이 수정한다.

수정 전

            <!--{? _prev_href}--><li><a href="{_prev_href}" class="btn-e btn-e-light-grey" type="button">이전글</a></li><!--{/}-->
            <!--{? _next_href}--><li><a href="{_next_href}" class="btn-e btn-e-light-grey" type="button">다음글</a></li><!--{/}-->

수정 후

            <!--{? _prev_href}--><li><a href="{_prev_href}" class="btn btn-danger" type="button"{? !C.G5_IS_MOBILE} data-trigger="hover" data-placement="top auto" title="<i class='far fa-arrow-alt-circle-up'></i> {_prev_wr_subject}" data-toggle="popover" {? _prev_img}data-content="<div class='prev-img'>{_prev.img_content}</div>"{/}{/}>다음글</a></li><!--{/}-->
            <!--{? _next_href}--><li><a href="{_next_href}" class="btn btn-warning" type="button"{? !C.G5_IS_MOBILE} data-trigger="hover" data-placement="top auto" title="<i class='far fa-arrow-alt-circle-down'></i> {_next_wr_subject}" data-toggle="popover" {? _next_img}data-content="<div class='next-img'>{_next.img_content}</div>"{/}{/}>이전글</a></li><!--{/}-->

참고로 위 다음글과 이전글의 버튼 문구가 뒤바뀐 걸 알 수 있는데 버튼 위치나 순서상의 선택이니 본인 판단에 따르도록 하자.

팝업 스타일 정의하도록 view.skin.html 상단에 아래 css를 넣는다.

.popover{max-width:174px}
{? !_prev_img && !_next_img}.popover-content{display:none}{:}.popover-content{display:contents}{/}
.popover-title{font-size:11px;letter-spacing:-1px;line-height:1em;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;background:#fff;border-bottom:none}
.popover-content .prev-img, .popover-content .next-img{overflow:hidden;max-height:125px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}

마우스 오버 시 팝업이 작동하도록 view.skin.html 하단 쪽에 아래 스크립트를 넣는다.

$(document).ready(function(){
    $('[data-toggle="popover"]').popover({html:true,container:'.board-view-atc',delay:{show:0,hide:0},animation:false});
    $('[data-toggle="popover"]').on('shown.bs.popover', function () {
        $('.popover-content .prev-img').addClass('animated flipInX');
        $('.popover-content .next-img').addClass('animated flipInX');
    })
});