코드블럭 모달창 결과 확인 - SyntaxHighlight 적용 > 기능성 게시판

• 목록

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