부트스트랩 5.3 사용한 유튜브 게시판&갤러리 스킨 > 그누보드5 스킨

그누보드5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

부트스트랩 5.3 사용한 유튜브 게시판&갤러리 스킨 정보

게시판 부트스트랩 5.3 사용한 유튜브 게시판&갤러리 스킨

첨부파일

b5_youtube_basic_ver_0.00001.zip (25.4K) 203회 다운로드 2023-09-04 18:08:45 포인트 차감20
테스트한 버전5.5.8.3.3
호환 가능 버전5.3 이상

본문

저번 리스트 버전 말고 이번에는 유튜브 및 갤러리 게시판 겸용 스킨을 올려드립니다. 

부트스트랩 이용 홈페이지 작업하다가 부트스트랩 공부용으로 사용하실 수 있는 분들을 위하여 공유합니다.

기본형태입니다. 

 

1954485033_1693818346.4343.png

 

이미지 또는 동영상 썸네일을 클릭하면

1954485033_1693818377.2357.png

 

이렇게 기본적으로 출력됩니다. 

 

 

1954485033_1693818446.4947.jpg

 

그리고  카테고리 형태 변경을 원하시면

list.skin.php 61번줄에서 

$b_category_setting =array( "class"=>"nav-tabs","use"=>"2"); 로 하시면 탭형태

$b_category_setting =array( "class"=>"","use"=>"1"); 로 하시면  "드롭다운형태"로 나옵니다. 

이미지 참고해 주시고요. 

탭형태를 다른 형태로 하고 싶으시면
https://getbootstrap.kr/docs/5.3/components/navs-tabs/
참고하시어 

$b_category_setting =array( "class"=>"탭클래스","use"=>"2"); 로 하시면 탭형태
위와 같이 변경해 주시면 됩니다. 

 

샘플 URL 
http://liveshowhost.net/bbs/board.php?bo_table=youtube_basic_005

 

 

사용방법:

1. www/skin/board 폴더에 업로드하시거나, www/theme/basic/skin/board 폴더에 업로드합니다.
2. ./head.sub.php 파일에 Bootstrap의 CSS와 JS를 포함시켜주세요. 
<!doctype html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

3. 관리자페이지에서 스킨을 적용하세요

추천
16

댓글 전체

게시물을 클릭하면 영상은 잘 나오는데 클릭하기전 게시물 리스트 보는 화면에서는 썸네일이 하나도 안 뜹니다. 무엇을 해야 할까요?
입력을 제대로 하셨는지요? 다른분들도 그렇게 나오는지 궁금합니다.
썸네일 이미지는 파일#1에 올려야지만 나오게 했습니다.
그리고, 유튜브 함께 올렸을 경우, 이미지보다는 유튜브가 먼저나옵니다.
안녕하세요.
저는 타이틀 글자가 안뜨는데 어딜 봐야할까요? 잘 몰라 건들지도 못하고 있습니다 ㅠㅠ
사진만 봐서는 어디인지 모르겠고요.
대표적으로 저렇게 나올 떄는 두가지 부분을 체크하셔야 할 듯 합니다.

1. css 부분

list.skin.php  275줄
<h1 class="modal-title fs-5" id="youtubeModalLabel">Modal title</h1>
이부분에 css 가 충돌이 있는 지 예를 들어 글자색이 흰색으로 되어 있는 지 체크 해보세요.
F12를 눌러 개발자 모드로 보시면 됩니다.

지금 현재는 사진을 봐서는 이 부분은 아닌 것 같습니다. 이유인즉 자바스크립쪽이면
Modal title 이라고 제목에 나오게 되어 있습니다.


2. javascript 부분
list.skin.php  128줄
$img_content = '<img class="popup_youtube img-fluid" data-me_id="'.$list[$i]['wr_1'].'" src="https://img.youtube.com/vi/'.$list[$i]['wr_1'].'/maxresdefault.jpg" alt="'.$list[$i]['subject'].'">';

위와 같이 보시면 유튜브이미지를 불러오는 부분이 있습니다.
alt 부분에 "글의 제목"이 들어가는 부분이 있습니다.
이부분을 체크해 보세요.
F12을 눌러 보시면 아실 수 있습니다.
이 부분이 빈공간으로 남아 있으면 출력되지 않습니다.
아마도 이 부분일 가능성이 있는 것 같습니다.
alt 즉, 글의 제목이 빈공간으로 남아 있는지 확인해보세요.
위와 같아야 합니다.

참고사항으로 list.skin.php  315줄이 유튜브 팝업을 불러오는 부분입니다.

$(document).on("click",".popup_youtube", function(e){
var me_title = $(this).attr("alt");  //이 부분이  글의 제목을 불러옵니다.
var me_id = $(this).data('me_id');
var me_url = "https://www.youtube.com/embed/" + me_id;
$('#youtubeModalLabel').text(me_title);;
$('#mj-youtube').attr('src', me_url );
ytuModal.show();
});

1, 2 두 부분을 꼭 체크해보세요.
4개의 게시글을 등록할때는 썸네일이미지가 유튜브에 있는걸로 제대로 나왔는데, 5번째 이미지와 6번째 이미지가 첨부이미지와 같이 목록에 나옵니다. 뭐가 이상이 있을까요? 동일하게 올렸는데..
이미지만 봐서는 정확한 답변을 말씀 드리릴 수 없을 것 같습니다.
단지, 저의 의견으로는 2가지 이유 일 것 같습니다.
하나는 유튜브 아이디를 잘못 입력했을 경우, 두번째는 유튜브 서비스 종료된 경우 입니다.
스킨은 원래부터 파일첨부1의 이미지가 나오게 되어 있습니다. 고칠 것이 없는데요...

list.skin.php 파일 130 줄에 보시면 썸네일 이미지 나오는 부분이 있습니다.

/* 썸네일 이미지 */
$thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height'], false, true);
if($thumb['alt']){
$alt_txt = $thumb['alt'];
}else{
$alt_txt = $list[$i]['subject'];
}
    if($thumb['src']) {
      $img_content = '<img src="'.$thumb['src'].'" data-big_img="'.$thumb['ori'].'" class="popup_imgview img-responsive img-rounded" alt="'.$alt_txt.'" >';
      } else {
      $img_content = '<img class="img-fluid" src="http://placehold.it/700x300" alt="">';
      }


만약 더 정확하게 나오게 하고 싶다면.
https://sir.kr/qa/105448 참고하시면 될 듯 합니다.
<?php for ($i=0; $i<count($list); $i++) {
if($list[$i]['wr_1']) {
$img_content = '<img class="popup_youtube img-fluid" data-me_id="'.$list[$i]['wr_1'].'" src="https://img.youtube.com/vi/'.$list[$i]['wr_1'].'/maxresdefault.jpg" alt="'.$list[$i]['subject'].'">';
}else{
/* 썸네일 이미지 */
    $thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height'], false, true);
if($thumb['alt']){
$alt_txt = $thumb['alt'];
}else{
$alt_txt = $list[$i]['subject'];
}
    if($thumb['src']) {
      $img_content = '<img src="'.$thumb['src'].'" data-big_img="'.$thumb['ori'].'" class="popup_imgview img-responsive img-rounded" alt="'.$alt_txt.'" >';
      } else {
      $img_content = '<img class="img-fluid" src="http://placehold.it/700x300" alt="">';
      }
}
?>

유튜브 이미지가 먼저 나오게끔 되어있습니다. 그런데 저 유튜브 이미지가 잘 안나오는 유튜브게시글이 있어서요..
네 답변 주셔서 감사합니다. 위에 제가 올린 소스에서 첨부이미지가 목록 이미지로 나오게끔 하려면 어떻게 수정해주면 될까요?
유튜브 썸네일 클릭해도 아무런 반응이 없는경우.. 새로운창이 뜨질 않습니다
유튜브를 링크를 걸고 리스트 화면에서 썸네일이미지까지 불러와 지는데
썸네일 클릭시 창이 뜨질않습니다

제목을 클릭하면 되는데..  어디부분이 문제일까요 ㅜㅜ
글로 적어주시면 알 수가 없습니다. 적용한 소스를 보여주신다면 대략 알 수 있을 것 같은데요. 보통 실수하시는 부분은 jquery 부분이라 생각합니다. ID 값과 Jquery 부분을 확인해 주세요.

안녕하세요 오늘도 좋은 하루 되세요
좋은 스킨 감사합니다. 꼭 사용 하고 싶어서 사용해 보았는데요 

이런 결과가 나와서요 
그누보드 사용한지가 한달되어 가고요
수준은 완전 초보 입니다.

<p><iframe src="http://www.*******.com/g5/bbs/board.php?bo_table=test" width="100%"onload=resizeFrame(this) scrolling="no"  frameborder="0"  marginheight="0" marginwidth="0" id ="sub05" name="sub05"></iframe></p>

 

932fb2d149094c8a9f33db60acdf2530_1705460684_4267.jpg

클릭하면 

 

932fb2d149094c8a9f33db60acdf2530_1705460698_9136.jpg

이렇게 오른쪽에 바가 생기면서 이렇게 떠서요
완전 초보수준이라서 어떻게 해야 할지 몰라 이렇게 부탁드립니다. 뭐가 문제일가요

전체 2,448 |RSS
그누보드5 스킨 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT