갤러리 [2] : 알파페이드 바닐라 갤러리 > 그누보드5 팁자료실

그누보드5 팁자료실

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

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

본문

  

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

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

 


<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>
추천
5

댓글 9개

변수 이름이나 함수이름이 중복되는 것이 많아서...
1. 그냥 html 이나 php 문서 두 개를 따로 만드세요.
2. 각 문서의 body 에 스타일로 마진탑과 마진레프트에 0px을 줍니다.
3.각 문서에 다른 갤러리를 만든 후 갤러리의 가로세로 길이를 잘 계산해서 이 사이즈를 적용한 아이프레임으로 두개 문서를 부르세요.

아. 갤러리를 아이프레임으로 주고 현재창 링크를 줄 때는 onclick 시 location.href 가 아니라 parent.location.href 나 top.location.href 로 바꾸어야 부모창에서 현재창 링크가 일어납니다.


아래와 같은 식으로 아이프레임으로 부르세요.

<iframe style=width:가로px;height:세로px;display:block src=slide.php frameborder=0></iframe>
<br>
<iframe style=width:가로px;height:세로px;display:block src=fade.php frameborder=0></iframe>

단 slide.php 와 fade.php 에는 css 에서 body { margin:0px; } 을 추가해주고
현재장 링크 onclick=location.href='주소' 는 onclick=parent.location.href='주소' 로 바꿔주세요.

한 페이지 안에서 함수 이름 등을 처리 하려다 보니 너무 손이 많이 가네요.
아이프레임이 가장 간명합니다.
전체 2,095 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

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