부트스트랩 5.3 사용한 유튜브 게시판&갤러리 스킨 정보
게시판 부트스트랩 5.3 사용한 유튜브 게시판&갤러리 스킨관련링크
첨부파일
본문
저번 리스트 버전 말고 이번에는 유튜브 및 갤러리 게시판 겸용 스킨을 올려드립니다.
부트스트랩 이용 홈페이지 작업하다가 부트스트랩 공부용으로 사용하실 수 있는 분들을 위하여 공유합니다.
기본형태입니다.
이미지 또는 동영상 썸네일을 클릭하면
이렇게 기본적으로 출력됩니다.
그리고 카테고리 형태 변경을 원하시면
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 두 부분을 꼭 체크해보세요.
단지, 저의 의견으로는 2가지 이유 일 것 같습니다.
하나는 유튜브 아이디를 잘못 입력했을 경우, 두번째는 유튜브 서비스 종료된 경우 입니다.
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 참고하시면 될 듯 합니다.
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="">';
}
}
?>
유튜브 이미지가 먼저 나오게끔 되어있습니다. 그런데 저 유튜브 이미지가 잘 안나오는 유튜브게시글이 있어서요..
유튜브를 링크를 걸고 리스트 화면에서 썸네일이미지까지 불러와 지는데
썸네일 클릭시 창이 뜨질않습니다
제목을 클릭하면 되는데.. 어디부분이 문제일까요 ㅜㅜ
안녕하세요 오늘도 좋은 하루 되세요
좋은 스킨 감사합니다. 꼭 사용 하고 싶어서 사용해 보았는데요
이런 결과가 나와서요
그누보드 사용한지가 한달되어 가고요
수준은 완전 초보 입니다.
<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>
클릭하면
이렇게 오른쪽에 바가 생기면서 이렇게 떠서요
완전 초보수준이라서 어떻게 해야 할지 몰라 이렇게 부탁드립니다. 뭐가 문제일가요
감사합니다 ㅠ.ㅠ
view.sns.bootstrap.skin.php
위의 파일이 없어서 파서 에러 뜨는데요 확인좀 부탁드립니다.
압축파일 목록에 해당파일이 없습니다.
