갤러리 [2] : 알파페이드 바닐라 갤러리

옵션사용은 https://sir.kr/g5_tip/16725 와 대동소이합니다.

내용물은 2번에만 넣어 보았습니다.

[code]

<style>
.fadeTable { width:100%; background-size:contain; }
.buttonImage { cursor:pointer; display:block; }
.spanButton { cursor:pointer; margin-left:5px; opacity:0.7; border-radius:50%; }
.galleryNum { font-family:Times New Roman; font-size:24px; font-weight:bold; color:#ffffff; }
</style>
<script>
hwRatio = 540 / 960; // 이미지 세로 가로 사이즈 - 세로부터 입력할 것
autoSec = 4; // 자동넘기기 시간, 0을 주면 자동옵션 무력화
galleryRadius = "40px"; // 갤러리 라운드 테두리 픽셀이나 퍼센트값
btnBasic = "#ffffff"; // 개별버튼 색상
btnTarget = "#c00000"; // 현재버튼 색상
btnMargin = 20; // 하단과의 간격, 0을 주면 무슨 옵션인지 알 것임
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/dGvqOG/btrcONHUaWw/cvKSoMdobz8gmS3ubZTYcK/img.jpg";
image_2 = "https://blog.kakaocdn.net/dn/cOuCrx/btrcONOGfL6/lnvgPYBKad0JunFVKIwEJK/img.jpg";
image_3 = "https://blog.kakaocdn.net/dn/dWo9XA/btrcMHvnOX6/ErTXdEKAlZ8N2MkFYkJg21/img.jpg";
image_4 = "https://blog.kakaocdn.net/dn/dBEz0N/btrcMHITtp6/GOZ46itTJACPcNa5tNRV51/img.jpg";
image_5 = "https://blog.kakaocdn.net/dn/bLb72S/btrcQeL1OMD/qbN5ZiKrH1CwIK5KTAuIDK/img.jpg";
image_6 = "https://blog.kakaocdn.net/dn/GzK36/btrcNLX5jUg/pDKPswo1SzOjlfoNUZ55Q1/img.jpg";
image_7 = "https://blog.kakaocdn.net/dn/DGJpf/btrcNMio0ac/LNeP6yafJDGg5cDkWM1EOk/img.jpg";
image_8 = "https://blog.kakaocdn.net/dn/wVZg4/btrcStB9IIK/rTBKVE9x6bWIB7m5pBzdk0/img.jpg";
image_9 = "https://blog.kakaocdn.net/dn/cD6A2x/btrcIWfyiWW/pTkL8rciP0FGbv9aKHGIjK/img.jpg";
image_10 = "https://blog.kakaocdn.net/dn/tVATe/btrcNlyCy2A/kzL6ROQ7XSHzWaHvIOIYRk/img.jpg";
content_1 = "";
content_2 = "<img src=https://blog.kakaocdn.net/dn/dtieGD/btrc4DRZTh1/P6gH4lxZoozWto0JrsRIYK/img.png style=dispaly:block>";
content_3 = "";
content_4 = "";
content_5 = "";
content_6 = "";
content_7 = "";
content_8 = "";
content_9 = "";
content_10 = "";
for (imageTotal = 0; this["image_" + (imageTotal + 1)]; imageTotal++);
imgNumber = autoCount = npMode = 1;
function fadeMode() {
    if (galleryTd.style.opacity <= 0) clearInterval(setInterval(fadeInterval));
    else galleryTd.style.opacity -= 0.01;
}
fadeInterval = setInterval(fadeMode, 10);
function autoMode() {
    autoCount += 1;
    if (autoCount == autoSec + 1) galleryGo(npMode ? "next" : "prev"), autoCount = 1;
}
if (autoSec > 0) setInterval(autoMode, 1000);
function fadeChange() {
    if (galleryTd.style.opacity <= 0) {
        galleryTd.style.backgroundImage = galleryTable.style.backgroundImage;
        galleryTd.style.opacity = autoCount = 1;
        galleryTable.style.backgroundImage = "url(" + this['image_' + (imgNumber = arguments[0])] + ")";
        fadeMode();
        for (img = 1; img <= imageTotal; img++) {
            this["btn_" + img].style.width = this["btn_" + img].style.height = img == arguments[0] ? "20px": "15px";
            this["btn_" + img].style.backgroundColor = img == arguments[0] ? btnTarget: btnBasic;
        }
        contentTd.innerHTML = this["content_" + arguments[0]]; 
        currentNum.innerText = ("0" + imgNumber).slice(-2);
    }
}
function galleryGo() {
    if (arguments[0] == "next") fadeChange(imgNumber == imageTotal ? 1 : imgNumber + 1), npMpde = 1;
    else if (arguments[0] == "prev") fadeChange(imgNumber == 1 ? imageTotal : imgNumber - 1), npMode = 0;
    else fadeChange(arguments[0]);
}
onresize = function() {
    galleryHeight = galleryDiv.offsetWidth * hwRatio;
    galleryDiv.style.height = galleryTable.style.height = galleryTd.style.height = buttonTable.style.height = galleryHeight + "px";
    buttonTable.style.marginTop = -galleryHeight + "px";
    buttonDiv.style.marginTop = -(btnMargin + 40 * hwRatio) + "px";
}
function galleryHtml() {
    document.write("<div id=galleryDiv style=overflow:hidden;border-radius:" + galleryRadius + ">");
    document.write("<table id=galleryTable class=fadeTable cellpadding=0 cellspacing=0><td id=galleryTd class=fadeTable></td></table>");
    document.write("<table id=buttonTable style=width:100%;position:relative cellpadding=20 cellspacing=0><td><img class=buttonImage src=" + prevImage + " onclick=galleryGo('prev')></td>");
    document.write("<td id=contentTd align=center></td><td align=right><img class=buttonImage src=" + nextImage + " onclick=galleryGo('next')></td></table>");
    document.write("<div id=buttonDiv style=position:relative;display:flex;justify-content:center;align-items:center><span id=currentNum class=galleryNum style=margin-right:10px></span>");
    for (img = 1; img <= imageTotal; img++) document.write("<span id=btn_" + img + " class=spanButton style=background-color:" + btnBasic + " onclick=galleryGo(" + img + ")></span>");
    document.write("<span id=totalNum class=galleryNum style=margin-left:10px></span></div></div>");
    totalNum.innerText = ("0" + imageTotal).slice(-2);
    btn_1.style.marginLeft = "0px";
    galleryGo(1);
    onresize();
}
</script>
<div style=width:100%><script>galleryHtml()</script></div>

[/code]