[이윰] View 페이지에서 이전글, 다음글 버튼에 제목과 썸네일을 가져오기
페이지 정보
shadow2fox
1,541 2 2
2021.01.10 13:18
짧은주소
-
https://yadolee.com/tip/809 주소복사
평점
본문
View 페이지에서 이전글, 다음글 버튼에 제목과 썸네일을 가져오기
전체목록보이기 사용 체크 유무에 상관없이 View 페이지에서 이전글, 다음글의 버튼이 보이고 각 버튼에 마우스를 올렸을 때 첨부된 이미지, 에디터 이미지, 동영상 썸네일, 외부 이미지 썸네일이 나오도록 해 보자.
외부 이미지의 썸네일도 보여지도록 아래 링크의 선행작업이 필요하다.
https://yadolee.com/bbs/board.php?bo_table=tip&wr_id=817
1. 그누보드/bbs/view.php를 열어 if (!$board['bo_use_list_view']) {를 검색하여 아래와 같이 수정한다.
수정 전
2. 그누보드5/eyoom/user_program/board/view.skin.php를 열어 적당한 위치에 아래 소스를 넣는다.
3. 변경하고자 하는 스킨의 view.skin.html을 열어 이전글과 다음글을 아래와 같이 수정한다.
수정 전
팝업 스타일 정의하도록 view.skin.html 상단에 아래 css를 넣는다.
마우스 오버 시 팝업이 작동하도록 view.skin.html 하단 쪽에 아래 스크립트를 넣는다.
외부 이미지의 썸네일도 보여지도록 아래 링크의 선행작업이 필요하다.
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');
})
});
추천인 2
레벨 142
경험치 3,034,631
Progress Bar 74%
- 가입일 : 2015-03-10 12:21:44
- 서명 : 인간에게 가장 큰 선물은
자기 자신에게 기회를 주는 것이다.
- 크리스 가드너, Chris Gardner -
- 자기소개 : There's never a shortcut to happiness.
-
[골라먹는 요리] 햄 계란밥2024-04-28
-
1 [짤방 게시판] 토키짱 - 주간 플레이보이 2024 No.102024-04-23
-
1 🔞[짤방 게시판] 야마사키 마미 - 주간 플레이보이 2024 No.102024-04-23
-
[짤방 게시판] 이케다 레이라 - 주간 플레이보이 2024 No.102024-04-23
-
1 [짤방 게시판] 이리키 마리 - 주간 플레이보이 2024 No.102024-04-23
-
[뮤직 비디오 게시판] November Rain - Guns N' Roses [Use Your Illusion I] 1991년2024-04-22
-
[뮤직 비디오 게시판] Sweet Child O' Mine - Guns N' Roses [Appetite for Destruction] 1987년2024-04-21
-
1 [짤방 게시판] 타카츠루 모모하 - 주간 플레이보이 2024 No.102024-04-20
-
[생활 정보] 100원이 넘는 적립 금액은 최초이지 않나 싶네요 고생하셨습니다{이모티콘}2024-04-23
-
[자유 게시판] 부활 곡에 잘 어울릴 듯 한 보이스 컬러네요 동감입니다2024-03-31
-
[생활 정보] 80원의 행복이네요{이모티콘}2024-03-21
-
[자유 게시판] 같은 의견이에요2024-03-14
-
[자유 게시판] 다시 봐도 감동입니다{이모티콘}2024-03-11
-
[자유 게시판] 제가 라이브 시청을 하지 않아야 대활약을 해서 손흥민 선수를 위해 안타깝지만 자제 중입니다{이모티콘} 반더벤 또한 너무 잘하지 않았나 싶었네요2024-03-03
-
[자유 게시판] 하늘구장님 늘 감사드리며 마음을 담아 새해 인사를 전합니다 새해 복 많이 받으세요2024-02-09
-
[이슈와 관심] 최소 누군가는 가학 대통령으로 기억할 것 같습니다2024-01-29
댓글2
하늘구장님의 댓글
와우 감사합니다 좋아요
내사랑님의 댓글
멋진 팁 감사합니다 무조건 추천 적용해 보았는데 외부 이미지가 들어간 과거의 게시글은 여분필드 wr_4에 정보가 없어서 안나오더라구요 그래서 노가다로 작업하느라 진이 다 빠졌네요
축하합니다. 첫 댓글로 19경험치를 획득하였습니다.