• 목록
• 답변
• 글쓰기

[code]
<style>
.tdImage { padding-top:5px; }
.imageButton { width:100%; height:100%; display:block; object-fit:cover; cursor:pointer; box-sizing:border-box; }
</style>
<script>
hwRatio = 540 / 960;
slideSpeed = 10;
autoSec = 4;
wightLimit = 6;
nextImage = "https://blog.kakaocdn.net/dn/bniCh0/btq8bsg19MB/PJUsaJdJkpJdbkHcWUC9wk/img.png";
prevImage = "https://blog.kakaocdn.net/dn/I1GYB/btq8bL8uxVv/guiZYpTMedre9zj97Y1jk0/img.png";
image_1 = "https://blog.kakaocdn.net/dn/csRR08/btq799CI5aa/PtkHLaFABEh5GUk7Zdp8OK/img.jpg";
image_2 = "https://blog.kakaocdn.net/dn/1i2I1/btq8bsVCBHv/WccnmtYuL4C4KjEdqSCenK/img.jpg";
image_3 = "https://blog.kakaocdn.net/dn/xBQjY/btq8aOLB6zE/kvl0wXU5HGOa5wRj943fck/img.jpg";
image_4 = "https://blog.kakaocdn.net/dn/qyzaz/btq8bMl03Lh/zqchlJvs17HYcflcKJsJF1/img.jpg";
image_5 = "https://blog.kakaocdn.net/dn/qTFDC/btq8at8K8pH/yxX7giOadkys9yhlH3ssKk/img.jpg";
image_6 = "https://blog.kakaocdn.net/dn/ba1PN1/btq79NzZi9L/xRllNJgag5mwfeKrhdw2AK/img.jpg";
image_7 = "https://blog.kakaocdn.net/dn/3J3Ch/btq79MntdX8/mg1zUkOWgplDDKIg5KXUUk/img.jpg";
image_8 = "https://blog.kakaocdn.net/dn/bnCInn/btq799JxU9n/0IdjW0Y9gG78W577ey0eBK/img.jpg";
image_9 = "https://blog.kakaocdn.net/dn/KRlrB/btq8aNzdErU/CB8kbDIfKmehHHAKEc59J0/img.jpg";
for (imageTotal = 0; this["image_" + (imageTotal + 1)]; imageTotal++);
imgNumber = autoCount = npMode = 1;
slidePosition = 0;
function slideMode(slide) {
    slidePosition = Number(galleryTable.style.marginLeft.slice(0, -1));
    slideGallery = function() {
        if (slidePosition == slide) clearInterval(slideInterval);
        else {
            if (Math.abs(slidePosition - slide) <= 0.5) slidePosition = slide;
            else slidePosition += (slide - slidePosition) / slideSpeed;
            galleryTable.style.marginLeft = slidePosition + "%";
        }
    }
    slideInterval = setInterval(slideGallery, 10);
}
function autoMode() {
    autoCount += 1;
    if (autoCount == autoSec + 1) galleryGo(npMode ? "next" : "prev"), autoCount = 1;
}
if (autoSec > 0) setInterval(autoMode, 1000);
function slideClick() {
    if (slidePosition % 100 == 0) {
        slideMode(-100 * ((imgNumber = arguments[0]) - 1));
        autoCount = 1;
    }
}
function galleryGo() {
    if (arguments[0] == "next") slideClick(imgNumber == imageTotal ? 1 : imgNumber + 1), npMode = 1;
    else if (arguments[0] == "prev") slideClick(imgNumber == 1 ? imageTotal : imgNumber - 1), npMode = 0;
    else slideClick(arguments[0]);
for (img = 1; img <= imageTotal; img++) {
imageTable.getElementsByClassName("imageButton")[img - 1].style.filter = "sepia(80%)";
imageTable.getElementsByClassName("imageButton")[imgNumber - 1].style.filter = "none";
}
}
onresize = function() {
    slideHeight = galleryDiv.offsetWidth * hwRatio;
    galleryDiv.style.height = buttonTable.style.height = slideHeight + "px";
    buttonTable.style.marginTop = -slideHeight + "px";
for (img = 1; img <= imageTotal; img++) imageTable.getElementsByClassName("tdImage")[img - 1].style.height = imageTable.getElementsByClassName("tdImage")[0].offsetWidth + "px"; 
}
function slideHtml() {
    document.write("<div id=galleryDiv style=overflow:hidden><table id=galleryTable cellpadding=0 cellspacing=0 style=width:" + imageTotal * 100 + "%;height:100%;table-layout:fixed;margin-left:0%>");
    for (img = 1; img <= imageTotal; img++) document.write("<td style=background-image:url(" + this['image_' + img] + ");background-size:contain></td>");
    document.write("</table><table id=buttonTable style=width:100% cellpadding=20 cellspacing=0><td align=left><img style=cursor:pointer src=" + prevImage + " onclick=galleryGo('prev')></td><td align=right><img style=cursor:pointer src=" + nextImage + " onclick=galleryGo('next')></td></table></div>");
document.write("<table id=imageTable style=width:100%;table-layout:fixed cellpadding=0 cellspacing=0><tr>");
for (img = 1; img <= imageTotal; img++) {
if (img % wightLimit == 0) {
if (imageTotal <= wightLimit || img == imageTotal) document.write("<td class=tdImage><img class=imageButton src=" + this['image_' + img] + "></td>");
else document.write("<td class=tdImage><img class=imageButton src=" + this['image_' + img] + "></td></tr><tr>");
}
else document.write("<td class=tdImage><img class=imageButton src=" + this['image_' + img] + "></td><td style=width:5px></td>");
}
document.write("</tr></table>");
    galleryGo(1);
    onresize();
}
modeWidth = ("win16win32win64macmacintel").indexOf(navigator.platform.toLowerCase()) < 0 ? "100%" : "960px";
document.write("<div style=width:" + modeWidth + ">");
slideHtml();
document.write("</div>");
for (img = 1; img <= imageTotal; img++) {
imageTable.getElementsByClassName("imageButton")[img - 1].image = img;
imageTable.getElementsByClassName("imageButton")[img - 1].onclick = function() {
galleryGo(this.image);
}
}
</script>[/code]