![](https://i.imgur.com/9UQ54uc.gif"){kind=small}
Manga Reader
Good evening, today I woke up with the desire to create something and share it, and I came up with creating a code for those who would like to share manga on their website.
As always, I like to share the most essential parts, and it will depend on you how you use and edit it with CSS. The code itself is very simple, but it contains what I consider most important.
Features:
- Next / Previous buttons
- Cascade Mode button
- Displays the total number of manga pages
- You can use your keyboard arrows to navigate pages (New)
Online Demo
Complete HTML Code
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manga Reader</title>
</head>
<body>
<button id="prev-btn">Previous</button>
<button id="next-btn">Next</button>
<button id="mode">Cascade Mode</button>
<span id="counter"></span>
<div id="reader"></div>
<script>
// Array of images
let pages = [
"https://via.placeholder.com/300x200/3f5efb/fff?text=Image+1",
"https://via.placeholder.com/300x200/f7b731/fff?text=Image+2",
"https://via.placeholder.com/300x200/20bf6b/fff?text=Image+3",
"https://via.placeholder.com/300x200/eb3b5a/fff?text=Image+4",
"https://via.placeholder.com/300x200/8854d0/fff?text=Image+5",
];
</script>
<script>
// Get DOM elements
const imgContainer = document.getElementById("reader");
const prevBtn = document.getElementById("prev-btn");
const nextBtn = document.getElementById("next-btn");
const counter = document.getElementById("counter");
const showAllBtn = document.getElementById("mode");
// State variables
let currentIndex = 0;
let isShowAll = false;
// Function to display the current image
function showImage() {
imgContainer.innerHTML = "";
const img = document.createElement("img");
img.src = pages[currentIndex];
imgContainer.appendChild(img);
counter.textContent = `Page ${currentIndex + 1} of ${pages.length}`;
prevBtn.disabled = currentIndex === 0;
nextBtn.disabled = currentIndex === pages.length - 1;
}
// Function to display all images
function showAll() {
isShowAll = !isShowAll;
if (isShowAll) {
imgContainer.innerHTML = "";
pages.forEach((image) => {
const img = document.createElement("img");
img.src = image;
imgContainer.appendChild(img);
});
prevBtn.style.display = "none";
nextBtn.style.display = "none";
counter.style.display = "none";
showAllBtn.innerText = "Page Mode";
} else {
showImage();
prevBtn.style.display = "inline";
nextBtn.style.display = "inline";
counter.style.display = "inline";
showAllBtn.innerText = "Cascade Mode";
}
}
// Function to show the previous image
function showPreviousImage() {
if (currentIndex > 0) {
currentIndex--;
showImage();
}
}
// Function to show the next image
function showNextImage() {
if (currentIndex < pages.length - 1) {
currentIndex++;
showImage();
}
}
// Function to handle keyboard events
function handleKeyboardEvent(event) {
const key = event.key;
if (key === "ArrowLeft") {
showPreviousImage();
} else if (key === "ArrowRight") {
showNextImage();
}
}
// Add click events to buttons
nextBtn.addEventListener("click", showNextImage);
prevBtn.addEventListener("click", showPreviousImage);
showAllBtn.addEventListener("click", showAll);
// Add keyboard event listener
document.addEventListener("keydown", handleKeyboardEvent);
// Show the first image
showImage();
</script>
</body>
</html>
```
That's all for today, I hope this is helpful. If you think anything needs to be added, removed, or modified, please let me know. If you need any code, feel free to reach out to me, and I'll try to help if possible.
Don't forget to like, share, and follow me.
Good evening, today I woke up with the desire to create something and share it, and I came up with creating a code for those who would like to share manga on their website.
As always, I like to share the most essential parts, and it will depend on you how you use and edit it with CSS. The code itself is very simple, but it contains what I consider most important.
Features:
- Next / Previous buttons
- Cascade Mode button
- Displays the total number of manga pages
- You can use your keyboard arrows to navigate pages (New)
Online Demo
Complete HTML Code
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manga Reader</title>
</head>
<body>
<button id="prev-btn">Previous</button>
<button id="next-btn">Next</button>
<button id="mode">Cascade Mode</button>
<span id="counter"></span>
<div id="reader"></div>
<script>
// Array of images
let pages = [
"https://via.placeholder.com/300x200/3f5efb/fff?text=Image+1",
"https://via.placeholder.com/300x200/f7b731/fff?text=Image+2",
"https://via.placeholder.com/300x200/20bf6b/fff?text=Image+3",
"https://via.placeholder.com/300x200/eb3b5a/fff?text=Image+4",
"https://via.placeholder.com/300x200/8854d0/fff?text=Image+5",
];
</script>
<script>
// Get DOM elements
const imgContainer = document.getElementById("reader");
const prevBtn = document.getElementById("prev-btn");
const nextBtn = document.getElementById("next-btn");
const counter = document.getElementById("counter");
const showAllBtn = document.getElementById("mode");
// State variables
let currentIndex = 0;
let isShowAll = false;
// Function to display the current image
function showImage() {
imgContainer.innerHTML = "";
const img = document.createElement("img");
img.src = pages[currentIndex];
imgContainer.appendChild(img);
counter.textContent = `Page ${currentIndex + 1} of ${pages.length}`;
prevBtn.disabled = currentIndex === 0;
nextBtn.disabled = currentIndex === pages.length - 1;
}
// Function to display all images
function showAll() {
isShowAll = !isShowAll;
if (isShowAll) {
imgContainer.innerHTML = "";
pages.forEach((image) => {
const img = document.createElement("img");
img.src = image;
imgContainer.appendChild(img);
});
prevBtn.style.display = "none";
nextBtn.style.display = "none";
counter.style.display = "none";
showAllBtn.innerText = "Page Mode";
} else {
showImage();
prevBtn.style.display = "inline";
nextBtn.style.display = "inline";
counter.style.display = "inline";
showAllBtn.innerText = "Cascade Mode";
}
}
// Function to show the previous image
function showPreviousImage() {
if (currentIndex > 0) {
currentIndex--;
showImage();
}
}
// Function to show the next image
function showNextImage() {
if (currentIndex < pages.length - 1) {
currentIndex++;
showImage();
}
}
// Function to handle keyboard events
function handleKeyboardEvent(event) {
const key = event.key;
if (key === "ArrowLeft") {
showPreviousImage();
} else if (key === "ArrowRight") {
showNextImage();
}
}
// Add click events to buttons
nextBtn.addEventListener("click", showNextImage);
prevBtn.addEventListener("click", showPreviousImage);
showAllBtn.addEventListener("click", showAll);
// Add keyboard event listener
document.addEventListener("keydown", handleKeyboardEvent);
// Show the first image
showImage();
</script>
</body>
</html>
```
That's all for today, I hope this is helpful. If you think anything needs to be added, removed, or modified, please let me know. If you need any code, feel free to reach out to me, and I'll try to help if possible.
Don't forget to like, share, and follow me.