갤러리 리스트 썸네일형 샘플 > 팁

<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>