갤러리 [1] : 좌우형 바닐라 슬라이드 - 내용삽입 > 그누보드5 팁자료실

그누보드5 팁자료실

갤러리 [1] : 좌우형 바닐라 슬라이드 - 내용삽입 정보

갤러리 [1] : 좌우형 바닐라 슬라이드 - 내용삽입

본문

   

1. 원칙적으로는 https://sir.kr/g5_tip/16653 와 원리가 같지만 각 이미지마다 내용물을 넣을 수 있습니다.

 

2. 내용물은 이미지숫자와 똑같이 content_1, content_2, content_3, ...

이런식으로 넣어주고 쌍따옴표 안에 html 태그를 넣어줍니다.

 

3. 내용물 쌍따옴표 안의 html 에 따옴표가 필요할 때는 쌍따옴표를 넣지 말고 외따옴표를 넣어야 합니다.

 

4. 내용물이 필요없을 때는 content_3 = ""; 으로 따옴표 안을 빈칸으로 만들어 주세요.

만일 그렇지 않고 변수 자체를 없애면 언디파인드가 영문으로 출력됩니다.

 

5. 스타일은 인라인으로 주었는데 따로 빼내어 클래스 등으로 css 처리하는 것이 더 간명할 수도 있습니다.

 

----------

 

content_1 : 폰트로 현재창 링크 - a태그를 쓰지 않고 onclick=location.href='주소' 로 걸었음

content_2 : 이미지로 새창 링크 - a태그를 쓰지 않고 onclick=window.open('주소') 로 걸었음

content_3 = ""; : 내용없음

content_4 : 두 줄 이상일 때 <br> 처리

content_5 : 위치이동 : 기본위치는 정중앙이므로 div 의 스타일에서 margin 속성을 이용하여 양수 음수 퍼센트로 이동함

 

--------------------

 


<style>
.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; // 이미지 세로 가로 사이즈 - 세로부터 입력할 것
slideSpeed = 10; // 슬라이드 속도, 숫자가 작아질수록 빨라짐
btnMargin = 20; // 하단과의 간격, 0을 주면 무슨 옵션인지 알 것임
autoSec = 4; // 자동넘기기 시간, 0을 주면 자동옵션 무력화
slideRadius = "40px"; // 갤러리 라운드 테두리 픽셀이나 퍼센트값
btnBasic = "#ffffff"; // 개별버튼 색상
btnTarget = "#ff0000"; // 현재버튼 색상
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/bELCNX/btrcQgkv9KH/uveax6oD38I50NtGsIYWTk/img.jpg";
image_2 = "https://blog.kakaocdn.net/dn/c19gna/btrcVj8QRB4/lmlmPAekpz4QpTd9AvkLX0/img.jpg";
image_3 = "https://blog.kakaocdn.net/dn/b0X4p0/btrcNJAjLX6/gHo23ivNNaxYskk9Mq4kV0/img.jpg";
image_4 = "https://blog.kakaocdn.net/dn/wT2Eu/btrcOjVFt6I/HrZYlCVgO1RGe2HouIbzUk/img.jpg";
image_5 = "https://blog.kakaocdn.net/dn/beSgol/btrc4Ei32I2/E5OkZ7ffKi9bBSjJZ6oOMk/img.jpg";
content_1 = "<div style='cursor:pointer;font-family:Times New Roman;font-size:48px;font-weight:bold;color:#cccccc' onclick=location.href='https://sir.kr'>SIR.KR</div>";
content_2 = "<div style=cursor:pointer onclick=window.open('https://sir.kr')><img src=https://blog.kakaocdn.net/dn/dtieGD/btrc4DRZTh1/P6gH4lxZoozWto0JrsRIYK/img.png style=dispaly:block></div>";
content_3 = "";
content_4 = "<div style='font-family:Times New Roman;font-size:48px;font-weight:bold;color:#cccccc'>SIR.KR<br><img src=https://blog.kakaocdn.net/dn/dtieGD/btrc4DRZTh1/P6gH4lxZoozWto0JrsRIYK/img.png style=dispaly:block></div>";
content_5 = "<div style=margin-top:30%;margin-left:-60%><img src=https://blog.kakaocdn.net/dn/dtieGD/btrc4DRZTh1/P6gH4lxZoozWto0JrsRIYK/img.png style=dispaly:block></div>";
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) {
        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;
        }
        slideMode(-100 * ((imgNumber = arguments[0]) - 1));
        autoCount = 1;
        currentNum.innerText = ("0" + imgNumber).slice(-2);
    }
}
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]);
}
onresize = function() {
    galleryHeight = galleryDiv.offsetWidth * hwRatio;
    galleryDiv.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:" + slideRadius + ">");
    document.write("<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 align=center>" + this['content_' + img] + "</td>");
    document.write("</table><table id=buttonTable style=width:100% cellpadding=20 cellspacing=0>");
    document.write("<td align=left><img class=buttonImage src=" + prevImage + " onclick=galleryGo('prev')></td><td align=right><img class=buttonImage src=" + nextImage + " onclick=galleryGo('next')></td></table>");
    document.write("<div id=buttonDiv style=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>

 

--------------------

 

[ 참고사항 ]

 

1. 내용물 안에 움직이는 글자를 넣고 싶으면 css 나 자바 스크립트로 쪼물딱 대는 것보다는 그냥 편하게 포토샵에서 gif 로 만드는 것이 첫번째로 정신건강에 이롭습니다.

 

2. 폰트나 이미지 크기는 pc 의 크기대로 모바일에서 보입니다.

만일 모바일 최적화를 원한다면 먼저 pc 버전을 만든 후 처음부터 모바일에 맞는 이미지 사이즈와 폰트를 설정하고 거기에 맞는 모바일용 갤러리를 새로 만들어서 자바 스크립트나 미디어 쿼리등을 이용하여 pc 에서는 A갤러리, 모바일에서는 B갤러리가 보이게끔 하는 것이 두번째로 정신건강에 이롭습니다.

괜히 이 소스 안에서 pc 와 모바일을 분기하는 소스를 넣으려다가는 매우 매우 매우 작업이 고단해집니다. 

 

3. 마지막으로 <img>, <audio>, <video>, <iframe> 을 쓸 때는 반드시 style=display:block 를 첨가해 줍니다.

그렇지 않으면 https://sir.kr/g5_tip/14975 에서 몰라무서워님이 언급한 대로 엘레먼트 아래에 "뻘공간"이 생기게 됩니다.

다만 style=display:block 을 주면 뻘공간은 사라지는 대신 엘레먼트 자체가 div 처럼 되어 버려서 좌측에 내용물을 위치시키려면 float:left 가 필요하게 된다는 것도 기억을 해 주세요.

추천
6

댓글 20개

안녕하세요.
저는 구찌의 홈페이지처럼 상단레이아웃 로고 뒤에 슬라이드가 오게끔 만들고 싶은데요.
그렇게 하려면 어떻게 해야하는지 알려주실 수 있을까요?
나중에 다시 정주행해서 보니 비타주리님 슬라이드의 유용함을 다시 느낍니다.
잘 쓰고 있습니다. 감사합니다.
전체 2,411 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

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