갤러리 게시판 샘플 코드 > 그누보드5 팁자료실

그누보드5 팁자료실

갤러리 게시판 샘플 코드 정보

갤러리 게시판 샘플 코드

본문

시간이 좀 나서 갤러리 게시판 샘플 코드 한번 짜 보았습니다.

혹 다른 컨텐츠에 이용하실 분은 그렇게 하시길요. 링크는 그냥 "#" 으로 주었습니다.

pc와 모바일 분기코드는 $is_mobile 이 아니라 자바스크립트로 분기했습니다.

게시판 적용은 며칠 후에나... php 하나도 없이 바닐라 js 로 만들어 보았습니다.

 


<script>
yPercent = 100; // 가로 100퍼센트에 대한 세로 퍼센트
xCut = {"pc" : 4, "mobile" : 2}; // 가로 분할 갯수 - pc 와 모바일 따로 설정
xyMargin = "5px"; // 간격
imgRadius = "20px"; // 라운드 수치 - 50%는 원형
colorRGBA = [["white", "#00000099"], ["yellow", "#c0000099"]]; // ["일반글자색", "일반배경색"], ["공지글자색", "공지배경색"]
//*** $list[$i] 에서 받아올 정보 시작 ***//
//faceData_숫자(0부터) = ["썸네일주소", "제목", "글쓴이", 조회수, "링크주소", 공지=1/일반=0];
faceData_0 = ["https://blog.kakaocdn.net/dn/dpxDdN/btrdj677VT5/FP3chnNKIkRUSzrnNxCxXk/img.jpg", "1번 제목", "1번 작성자", 123, "#", 1];
faceData_1 = ["https://blog.kakaocdn.net/dn/cMFzJT/btq42AwCSOl/XHBN93pdduqeyiLoMCTgv1/img.jpg", "2번 제목", "2번 작성자", 56, "#", 1];
faceData_2 = ["https://blog.kakaocdn.net/dn/cD6A2x/btrcIWfyiWW/pTkL8rciP0FGbv9aKHGIjK/img.jpg", "3번 제목", "3번 작성자", 789, "#", 0];
faceData_3 = ["https://blog.kakaocdn.net/dn/d26tHc/btrbmx09iok/QIJAxZatmdlcmwMavoLOgk/img.jpg", "4번 제목", "4번 작성자", 12, "#", 0];
faceData_4 = ["https://blog.kakaocdn.net/dn/DGJpf/btrcNMio0ac/LNeP6yafJDGg5cDkWM1EOk/img.jpg", "5번 제목", "5번 작성자", 34, "#", 0];
faceData_5 = ["https://blog.kakaocdn.net/dn/biX36N/btrbpOORb8r/eHuuafEDnZy871qwExF5Hk/img.jpg", "6번 제목", "6번 작성자", 56, "#", 0];
faceData_6 = ["https://blog.kakaocdn.net/dn/cxYEsB/btrblj3aFtd/869SF00wBPbnvBmBF8j621/img.jpg", "7번 제목", "7번 작성자", 78, "#", 0];
faceData_7 = ["https://blog.kakaocdn.net/dn/Qlbbm/btq8wechKEh/lX1NqoSY0xS5mQ7q8qJoVk/img.jpg", "8번 제목", "8번 작성자", 90, "#", 0];
faceData_8 = ["https://blog.kakaocdn.net/dn/cT07sW/btq2CJCsmqe/smMKZ6DMru4FxO0nO9CC1k/img.jpg", "9번 제목", "9번 작성자", 0, "#", 0];
faceData_9 = ["https://blog.kakaocdn.net/dn/qTFDC/btq8at8K8pH/yxX7giOadkys9yhlH3ssKk/img.jpg", "10번 제목", "10번 작성자", 1, "#", 0];
faceData_10 = ["https://blog.kakaocdn.net/dn/edfbjB/btq4X5YApNH/v6V055VykFdeNmQXfBO75K/img.jpg", "11번 제목", "11번 작성자", 40, "#", 0];
faceData_11 = ["https://blog.kakaocdn.net/dn/bLBwe9/btq5RvIYCwg/GJuD0y78AHG9qa4sEFornk/img.jpg", "12번 제목", "12번 작성자", 227, "#", 0];
//*** $list[$i] 에서 받아올 정보 마감 ***//
xSplit = xCut[("win16win32win64macmacintel").indexOf(navigator.platform.toLowerCase()) < 0 ? "mobile" : "pc"];
for (imgTotal = 0; this["faceData_" + imgTotal]; imgTotal++);
faceDiv = document.getElementsByClassName("faceImage");
onresize = function() {
    for (face in faceDiv) {
        faceDiv[face].style.height = faceDiv[face].offsetWidth * yPercent / 100 + "px";
        faceDiv[face].style.borderRadius = faceDiv[face].childNodes[0].style.borderRadius = imgRadius;
        faceDiv[face].childNodes[0].childNodes[0].style.color = colorRGBA[this['faceData_' + face][5]][0]; 
        faceDiv[face].childNodes[0].childNodes[0].style.fontSize = ("win16win32win64macmacintel").indexOf(navigator.platform.toLowerCase()) < 0 ? "13px" : "16px";
        faceDiv[face].linkLocation = this["faceData_" + face][4]; 
        faceDiv[face].onclick = function() { location.href = this.linkLocation; }
        faceDiv[face].childNodes[0].style.background = "linear-gradient(to bottom, transparent 0% 70%, " + colorRGBA[this['faceData_' + face][5]][1] + " 70% 100%)";
        faceDiv[face].childNodes[0].childNodes[0].innerHTML = (this['faceData_' + face][5] == 1 ? '[ 공지 ] ' : '') + this['faceData_' + face][1] + "<br>" + this['faceData_' + face][2] + " : " + this['faceData_' + face][3];
    }
}
function faceMode() {
    for (img = 0; img < imgTotal; img++) {
        if (img == 0) document.write("<table style=width:100%;table-layout:fixed cellpadding=0 cellspacing=0><tr><td><div class=faceImage style=background-image:url(" + this['faceData_' + img][0] + ")><div class=faceBack><div class=faceText></div></div></div></td><td style=width:" + xyMargin + "></td>");
        else if (img == imgTotal - 1) {
            if (img % xSplit == 0) document.write("</tr><tr><td style=height:" + xyMargin + "></td></tr><tr><td><div class=faceImage style=background-image:url(" + this['faceData_' + img][0] + ")><div class=faceBack><div class=faceText></div></div></div></td></tr></table>");
            else document.write("<td><div class=faceImage style=background-image:url(" + this['faceData_' + img][0] + ")><div class=faceBack><div class=faceText></div></div></div></td></tr></table>");
        }
        else if (img % xSplit == 0) document.write("</tr><tr><td style=height:" + xyMargin + "></td></tr><tr><td><div class=faceImage style=background-image:url(" + this['faceData_' + img][0] + ")><div class=faceBack><div class=faceText></div></div></div></td><td style=width:" + xyMargin + "></td>");
        else if (img % xSplit == xSplit - 1) document.write("<td><div class=faceImage style=background-image:url(" + this['faceData_' + img][0] + ")><div class=faceBack><div class=faceText></div></div></div></td>");
        else document.write("<td><div class=faceImage style=background-image:url(" + this['faceData_' + img][0] + ")><div class=faceBack><div class=faceText></div></div></div></td><td style=width:" + xyMargin + "></td>");
    }
    onresize();
}
</script>
<style>
@import url(http://cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothic.css);
.faceImage { background-size:cover; background-position:center center; cursor:pointer; }
.faceBack { width:100%; height:100%; display:flex; align-items:flex-end; }
.faceText { color:#ffffff; font-family:'Nanum Barun Gothic'; overflow:hidden; display:flex; justify-content:center; align-items:center; text-align:center; width:100%; height:30%; }
</style>
<div style=width:100%><script>faceMode()</script></div>
추천
10

댓글 16개

이번 팁도 정말 좋습니다. 매우 다양하게 사용할 수 있을 것 같습니다.
메인(index.php)에 사용해서 메뉴를 대신 사용할 수 있게 적용해보았습니다.
늘 좋은 스킨과 유용한 팁을 받기만 합니다. 스킨을 올리고 싶어도 실력이 아마추어라....
감사합니다.
http://pws.co.kr/
꼭 12개를 고집할 필요도 없고 갯수대로 코드를 주면 갯수만큼 생겨납니다.
가로도 4개씩이 아니라 5개씩 3개씩 pc 와 모바일 따로 설정 가능합니다.
근데 인덱스 페이지에 이걸 띄우면 은근히 눈짓 한번씩 주고 가실 분들이 있을 텐데요...
제가 테이블로 코딩을 했거든요. 레이아웃 용이라면 div 의 grid 등으로 만들어야 해요.
오래 전부터 테이블 코딩 하는 습관을 못 버려서 요즘도 레이아웃 빼고는 다 테이블로 만들고 있습니다.ㅋ
전체 126 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

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