그누보드 - 자바스크립트 "전용" 게시판 최종 버전(?)

자바스크립트 "전용" 게시판 최종 버전(?) 정보

게시판 자바스크립트 "전용" 게시판 최종 버전(?)

첨부파일

js_skin.zip (412.5K) 111회 다운로드 2021-06-25 23:49:36

테스트한 버전5.4.9

호환 가능 버전아마도 모두

본문

예전 게시판 - https://sir.kr/g5_skin/45324 의 버전업으로 더 이상 업뎃은 없습니다.

이 게시판은 오직 html+css+자바스크립트 로만 사용하여야 합니다. php 소스는 적용되지 않습니다.

1. 가장 먼저 첨부파일의 압축을 풀고 html_editor.php 를 bbs 폴더에 올려주세요.

물론 다른 경로로 올려도 되긴 합니다만... 다른 경로로 올렸으면 5번 설명글을 보세요.

http://www.mediaplayer.kr/main/bbs/html_editor.php

미리보기 에디터입니다. 가장 소박(?)하게 만들었습니다. 많은 멀티 기능이 탑재된 에디터들과는 비교가 안 되게 저렴합니다. 그래도 그럭저럭 html+css+자바스크립트의 결과보기 및 소스복사가 가능하고 색상코드 복사기능까지 붙였습니다. 또 창크기 조절 옵션도 있는데 이건 반응형을 염두에 두고 창크기를 왔다갔다 하면서 결과보기를 클릭하면 창크기에 맞게 조절이 가능한지를 실험해 볼 수 있게 하였습니다. 이것 자체로도 유용할 수 있을 거에요.

2. 글쓰기 입력창에 html+css+자바스크립트 소스를 넣은 후 미리보기 버튼 클릭하면 에디터가 새창으로 열리고 에디터의 좌측 입력창에 소스가 들어오면서 결과를 확인할 수 있습니다.

소스 수정시 이 에디터에서 수정한 후 복사하여 원래의 게시글 입력창으로 붙여넣기 해도 됩니다

988289629_1624631572.6893.jpg

3. https://sir.kr/g5_tip/16305 의 절대주소 추출기능도 같이 붙였습니다. 혹 소스를 짜면서 파일의 절대주소가 필요할 때 사용하세요.

4. 모바일에서는 view.skin 으로 보여지기만 할뿐 글쓰기가 불가능합니다. 물론 모바일에서 디바이스를 pc 로 선택하면 가능합니다.

5. 만일 에디터의 주소를 다른 경로로 올렸으면 pc 스킨의 write.skin.php 의 6째줄

$html_editor_url = "../bbs/html_editor.php";

의 주소를 경로에 맞게 수정합니다. http 로 시작하는 절대경로를 줘도 좋고 타사이트에 업로드하여 그 주소를 사용해도 괜찮습니다.

6. 아직은 미완성이지만 첨부파일로 사운드와 이미지만 업로드하면 자동으로 썸네일 리스트 버튼 갤러리가 만들어지는 갤러리 게시판 세팅을 생각하고 있는데... 그 초안 소스를 예제로 올려 드립니다. 에디터에서 직접 확인하거나 게시글을 통해 확인해 보세요.


<script>
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";
imgNumber = autoCount = 1;
function fadeGallery() {
    galleryImage.style.opacity = 1;
    galleryImage.style.backgroundImage = galleryDiv.style.backgroundImage;
    imgNumber = arguments[0];
    galleryDiv.style.backgroundImage = "url(" + this['image_' + imgNumber] + ")";
    fadeMode();
    autoCount = 0;
    mp3Effect.play();
}
function fadeMode() {
    if (galleryImage.style.opacity <= 0) clearInterval(setInterval(fadeStop));
    else galleryImage.style.opacity = galleryImage.style.opacity - 0.01;
}
fadeStop = setInterval(fadeMode, 10);
for (imageTotal = 0; this["image_" + (imageTotal + 1)]; imageTotal++);
function galleryGo() {
    if (arguments[0] == 'next') fadeGallery(imgNumber == imageTotal ? 1 : imgNumber + 1);
    else if (arguments[0] == 'prev') fadeGallery(imgNumber == 1 ? imageTotal : imgNumber - 1);
    else fadeGallery(arguments[0]);
}
function audioPlay() {
    mp3Player.play();
    playBtn.style.display = 'none';
    pauseBtn.style.display = 'block';
    effectMp4.play();
}
function audioPause() {
    mp3Player.pause();
    playBtn.style.display = 'block';
    pauseBtn.style.display = 'none';
    effectMp4.pause();
}
function autoMode() {
    autoCount += 1;
    if (autoCount == 5) {
        galleryGo("next");
        mp3Effect.pause();
        autoCount = 0;
    }
}
autoSec = setInterval(autoMode, 1000);
</script>
<div style=width:100%>
<div id=galleryDiv style=position:relative;background-image:url(https://blog.kakaocdn.net/dn/csRR08/btq799CI5aa/PtkHLaFABEh5GUk7Zdp8OK/img.jpg);background-size:contain;border-radius:20px>
    <div id=galleryImage style=height:100%;opacity:1;background-image:url(https://blog.kakaocdn.net/dn/csRR08/btq799CI5aa/PtkHLaFABEh5GUk7Zdp8OK/img.jpg);background-size:contain;border-radius:20px></div>
    <video id=effectMp4 style=position:absolute;top:0px;left:0px;width:100%;mix-blend-mode:screen;border-radius:20px src=https://blog.kakaocdn.net/dn/chJ8wO/btq8bsuCKPi/9ytHFYHtWa14c861PuCct1/tfile.mp4 autoplay loop muted></video>
    <table style=position:absolute;top:0px;left:0px;width:100%;height:100% cellpadding=30 cellspacing=0 onmouseover=style.opacity='1' onmouseout=style.opacity='0'>
        <td align=left><img style=cursor:pointer src=https://blog.kakaocdn.net/dn/I1GYB/btq8bL8uxVv/guiZYpTMedre9zj97Y1jk0/img.png onclick=galleryGo("prev")></td>
        <td align=center><img id=playBtn style=display:block;opacity:0.5;cursor:pointer src=https://blog.kakaocdn.net/dn/b5BYwO/btq8bsH5Ogy/kkmxKysGs7YXNPtWHKCJoK/img.png onclick=audioPlay()><img id=pauseBtn style=display:none;opacity:0.5;cursor:pointer src=https://blog.kakaocdn.net/dn/b75KEC/btq8a6L15B6/NS06gThLBHCRuRHOZyef5k/img.png onclick=audioPause()></td>
        <td align=right><img style=cursor:pointer src=https://blog.kakaocdn.net/dn/bniCh0/btq8bsg19MB/PJUsaJdJkpJdbkHcWUC9wk/img.png onclick=galleryGo("next")></td>
    </table>
</div>
</div>
<script>galleryDiv.style.height = galleryDiv.clientWidth * 9 / 16 + 'px'</script>
<audio id=mp3Player src=https://blog.kakaocdn.net/dn/dQXro5/btq8bNSPslc/MObPmCjACo5oDD6T1cbfZ1/tfile.mp3 loop></audio>
<audio id=mp3Effect src=https://blog.kakaocdn.net/dn/0amKr/btq79uHsI9J/sorVaDmKDqN1bafF1GAuJ1/tfile.mp3></audio>

댓글 전체

DawnDew 자기소개 아이디로 검색 전체게시물 회원게시물

자바스크립트 "전용" 게시판 최종 버전(?) > 그누보드5 스킨

그누보드5 스킨

관련링크

첨부파일

본문

댓글 전체

회원로그인

로그인