File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<!DOCTYPE html>
<html lang="ko">
<head>
<title>온세종학교</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<link href="/resources/front/site/SITE_00000/css/style.css" rel="stylesheet">
<!-- 공통 plugin -->
<script src="/resources/front/site/SITE_00000/js/common/jquery/jquery-3.6.0.min.js"></script>
<script src="/resources/front/site/SITE_00000/js/common/jquery/jquery-ui.min.js"></script>
<!-- //공통 plugin -->
<!-- 페이지 plugin-->
<!-- //페이지 plugin-->
<!-- 공통 퍼블 layout: 개발시 삭제-->
<!-- <script src="/resources/front/site/SITE_00000/js/_layout.js"></script> -->
<!--//퍼블 layout-->
<!-- 공통 메뉴 js-->
<!-- //공통 메뉴 js -->
<!--공통 퍼블 js-->
<script type="module" src="/resources/front/site/SITE_00000/js/common.js"></script>
<!--//공통 퍼블 js-->
</head>
<body>
<section class="textbook-viewer">
<div class="viewer-body">
<div class="viewer-cont">
<div class="textbook-view" id="textbookView">
<div class="textbook-wrap" id="textbookWrap"></div>
</div>
<div class="viewer-cont-fnc">
<div class="viewer-paging fnc-section">
<button class="btn icon-only ico-ppv" onclick="goToFirstPage()">처음으로</button>
<button class="btn icon-only ico-pv" onclick="prevPage()">이전</button>
<span class="paging-num" id="pageNumber">1 페이지 / 6 페이지</span>
<button class="btn icon-only ico-fw" onclick="nextPage()">다음</button>
<button class="btn icon-only ico-ffw" onclick="goToLastPage()">끝으로</button>
<div class="paging-input">
<input type="number" id="pageInput" min="1" max="6" style="width:48px" title="페이지 이동 입력">
<button class="btn sm primary" onclick="goToPage()">Go</button>
</div>
</div>
<div class="fnc-section">
<input type="range" id="zoomSlider" min="1" max="2" step="0.1" value="1" title="zoom 설정" class="zoom-slider">
</div>
<div class="fnc-section btn-group">
<button class="btn icon-only ico-fullscreen" id="fullscreenToggle">전체보기</button>
</div>
</div>
</div>
</div>
</section>
<!--toast-->
<div class="toast"></div>
<!--popup-->
<div class="dim"></div>
<script>
const imagePaths = [
"images/01.jpg", "images/02.jpg", "images/03.jpg", "images/04.jpg", "images/05.jpg",
"images/06.jpg", "images/07.jpg", "images/08.jpg", "images/09.jpg", "images/10.jpg",
"images/11.jpg", "images/12.jpg", "images/13.jpg", "images/14.jpg", "images/15.jpg",
"images/16.jpg", "images/17.jpg", "images/18.jpg", "images/19.jpg", "images/20.jpg",
"images/21.jpg", "images/22.jpg", "images/23.jpg", "images/24.jpg", "images/25.jpg",
"images/26.jpg", "images/27.jpg", "images/28.jpg", "images/29.jpg", "images/30.jpg",
"images/31.jpg", "images/32.jpg", "images/33.jpg", "images/34.jpg", "images/35.jpg",
"images/36.jpg", "images/37.jpg", "images/38.jpg", "images/39.jpg", "images/40.jpg"
];
let currentPageIndex = 0;
let singlePageView = false;
let zoomScale = 1;
let isFullScreen = false;
const textbookView = document.getElementById("textbookView");
const textbookWrap = document.getElementById("textbookWrap");
const zoomSlider = document.getElementById("zoomSlider");
const pageInput = document.getElementById("pageInput");
const pageNumberText = document.getElementById("pageNumber");
const fullscreenToggle = document.getElementById("fullscreenToggle");
// === 유틸 함수 ===
function updatePageNumber() {
const totalPages = imagePaths.length;
if (!singlePageView) {
const leftPage = Math.floor(currentPageIndex / 2) * 2 + 1;
const rightPage = leftPage + 1;
pageNumberText.textContent = `${leftPage}~${rightPage} / ${totalPages}`;
} else {
pageNumberText.textContent = `${currentPageIndex + 1} 페이지 / ${totalPages} 페이지`;
}
}
function updateSliderBackground() {
const min = parseFloat(zoomSlider.min);
const max = parseFloat(zoomSlider.max);
const val = parseFloat(zoomSlider.value);
const percent = ((val - min) / (max - min)) * 100;
zoomSlider.style.background = `linear-gradient(to right, #F65C70 0%, #F65C70 ${percent}%, #5A585E ${percent}%, #5A585E 100%)`;
}
function updateNavigationButtons() {
const firstBtn = document.querySelector('.ico-ppv');
const prevBtn = document.querySelector('.ico-pv');
const nextBtn = document.querySelector('.ico-fw');
const lastBtn = document.querySelector('.ico-ffw');
const step = singlePageView ? 1 : 2;
const lastIndex = imagePaths.length - step;
// 처음, 이전 버튼 비활성화 조건
const isAtStart = currentPageIndex === 0;
// 다음, 끝 버튼 비활성화 조건
const isAtEnd = currentPageIndex >= lastIndex;
firstBtn.disabled = isAtStart;
prevBtn.disabled = isAtStart;
nextBtn.disabled = isAtEnd;
lastBtn.disabled = isAtEnd;
}
// === 페이지 렌더링 ===
function renderPages() {
textbookWrap.innerHTML = "";
textbookWrap.classList.toggle("dual", !singlePageView);
textbookView.classList.toggle("zoomed", zoomScale > 1);
textbookWrap.style.transform = `scale(${zoomScale})`;
if (singlePageView) {
const page = document.createElement("div");
page.className = "page";
page.style.backgroundImage = `url('${imagePaths[currentPageIndex] || ""}')`;
textbookWrap.appendChild(page);
} else {
const leftPage = document.createElement("div");
const rightPage = document.createElement("div");
leftPage.className = "page";
rightPage.className = "page";
leftPage.style.backgroundImage = `url('${imagePaths[currentPageIndex] || ""}')`;
rightPage.style.backgroundImage = `url('${imagePaths[currentPageIndex + 1] || ""}')`;
textbookWrap.appendChild(leftPage);
textbookWrap.appendChild(rightPage);
}
textbookView.scrollLeft = 0;
textbookView.scrollTop = 0;
updatePageNumber();
updateNavigationButtons();
}
// === 페이지 탐색 ===
function nextPage() {
const step = singlePageView ? 1 : 2;
if (currentPageIndex + step < imagePaths.length) {
currentPageIndex += step;
renderPages();
}
}
function prevPage() {
const step = singlePageView ? 1 : 2;
if (currentPageIndex - step >= 0) {
currentPageIndex -= step;
renderPages();
}
}
function goToFirstPage() {
currentPageIndex = 0;
renderPages();
}
function goToLastPage() {
const step = singlePageView ? 1 : 2;
currentPageIndex = imagePaths.length - step;
if (!singlePageView && currentPageIndex % 2 !== 0) {
currentPageIndex -= 1;
}
renderPages();
}
function goToPage() {
const pageNumber = parseInt(pageInput.value, 10);
if (pageNumber >= 1 && pageNumber <= imagePaths.length) {
currentPageIndex = singlePageView ? pageNumber - 1 : Math.floor((pageNumber - 1) / 2) * 2;
renderPages();
} else {
toastShow('잘못된 페이지 번호입니다.');
}
}
function toggleView() {
if (!singlePageView && currentPageIndex % 2 !== 0) {
currentPageIndex -= 1;
}
singlePageView = !singlePageView;
renderPages();
}
// === 줌 슬라이더 ===
zoomSlider.addEventListener("input", () => {
zoomScale = parseFloat(zoomSlider.value);
updateSliderBackground();
renderPages();
});
// === 페이지 입력 ===
pageInput.addEventListener('keydown', (event) => {
if (["Enter", 13].includes(event.key || event.keyCode)) {
event.preventDefault();
goToPage();
}
});
// === 마우스 드래그 ===
let isDragging = false, dragStartX = 0, dragStartY = 0, scrollStartX = 0, scrollStartY = 0;
function onDragStart(x, y) {
if (zoomScale <= 1) return;
isDragging = true;
dragStartX = x;
dragStartY = y;
scrollStartX = textbookView.scrollLeft;
scrollStartY = textbookView.scrollTop;
}
function onDragMove(x, y) {
if (!isDragging) return;
textbookView.scrollLeft = scrollStartX - (x - dragStartX);
textbookView.scrollTop = scrollStartY - (y - dragStartY);
}
function onDragEnd() {
isDragging = false;
}
textbookView.addEventListener("mousedown", (e) => onDragStart(e.clientX, e.clientY));
window.addEventListener("mousemove", (e) => onDragMove(e.clientX, e.clientY));
window.addEventListener("mouseup", onDragEnd);
// === 터치 드래그 ===
textbookView.addEventListener("touchstart", (e) => {
if (e.touches.length === 1) {
const touch = e.touches[0];
onDragStart(touch.clientX, touch.clientY);
}
});
window.addEventListener("touchmove", (e) => {
if (e.touches.length === 1) {
e.preventDefault();
const touch = e.touches[0];
onDragMove(touch.clientX, touch.clientY);
}
}, { passive: false });
window.addEventListener("touchend", onDragEnd);
// === 전체화면 토글 ===
fullscreenToggle.addEventListener("click", () => {
if (isFullScreen) {
closeFullScreenMode();
fullscreenToggle.textContent = "전체화면";
} else {
openFullScreenMode();
fullscreenToggle.textContent = "창모드";
}
isFullScreen = !isFullScreen;
});
function openFullScreenMode() {
const doc = document.documentElement;
(doc.requestFullscreen || doc.webkitRequestFullscreen || doc.mozRequestFullScreen || doc.msRequestFullscreen)?.call(doc);
}
function closeFullScreenMode() {
(document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen)?.call(document);
}
// === 초기화 ===
window.nextPage = nextPage;
window.prevPage = prevPage;
window.toggleView = toggleView;
renderPages();
updateSliderBackground();
</script>
</body>
</html>