부트스트랩 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. 관리자페이지에서 스킨을 적용하세요
15
댓글 전체
썸네일 이미지는 파일#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="">';
}
}
?>
유튜브 이미지가 먼저 나오게끔 되어있습니다. 그런데 저 유튜브 이미지가 잘 안나오는 유튜브게시글이 있어서요..
유튜브를 링크를 걸고 리스트 화면에서 썸네일이미지까지 불러와 지는데
썸네일 클릭시 창이 뜨질않습니다
제목을 클릭하면 되는데.. 어디부분이 문제일까요 ㅜㅜ
