AUTHORS NOTE
this is the script I use on the comic pages of my site! feel free to do what you want with it.
I normally put the JAVASCRIPT in a <script> tag in my document <head> but there’s probably a more efficient way to use it.
the HTML included in this document is the bare minimum you need for it all to work! I haven’t included any CSS, please write your own :>
-snail legs
10/10/2025
Hello! I’m here to leave a little updated comment on this! I currently use 11ty’s pagination tools to build my comic pages! They’re really good. Maybe once I’ve finished migrating everything, I’ll do a write-up explaining my 11ty setup.This JS was written aaages ago. In theory it looks like it should still work? But there are better/more complete solutions out there.
Still. I thought I ought to preserve it properly. Feel free to use it as a jumping off point if you want to.
JAVASCRIPT
// path to your source folder - this is just to make the pages array a little more human-readable
let source="/images/comic-folder/"
// an array listing all of your pages in order
let pages= [
source+"p0.png",
source+"p1.png",
source+"p2.png",
source+"p3.png",
]
let index = 0;
// uses changeImage to give functionality to first/next/previous/last buttons!
window.onload = function() {
document.getElementById("first").onclick = new Function("changeImage(0)");
document.getElementById("next").onclick = new Function("changeImage(+1)");
document.getElementById("prev").onclick = new Function("changeImage(-1)");
document.getElementById("last").onclick = new Function("changeImage(2)");
changeImage(0);
}
// uses a switchcase statement to move through the pages array according to which button was pressed
function changeImage(n) {
switch(n) {
case 0:
if (index > 0) {
index=0;
}
break;
case +1:
if (index + n < pages.length) {
index++;
}
break;
case -1:
if (index > 0) {
index--;
}
break;
case 2:
if (index + n < pages.length) {
index=pages.length-1;
}
}
document.getElementById("comic-page").setAttribute("src", pages[index]);
}
HTML
<!-- image with the source attribute set to page 1 or the cover page of the comic -->
<img id="comic-page" src="/images/example.png" title="use the buttons below to flip through the pages!"/>
<!-- navigation buttons! I like to wrap these in a div for styling but like. this should be perfectly functional on its own, so do what you want idk :-) -->
<button type="button" id="first">first</button> -
<button type="button" id="prev">previous</button> -
<button type="button" id="next">next</button> -
<button type="button" id="last">latest</button>
BONUS PYTHON SCRIPT!
09/12/2025
Hello again! I’m sifting through my files right now, and I found the old python script I used to use to generate comic page HTML for this site.I’m going to delete the file now, because I don’t need it anymore! But I thought I’d archive it here, with the also-defunct old JS script I used before it. As with the Javascript above, this was written ages ago, and is pretty bare-bones, and if you want to use it for some reason?? Feel free to do whatever you’d like with it.
# imports OS module
import os
path = "E:/WEBSITES/snail-legs-art/the-bookshelf/"
comicFolder = input("comic folder: ") # comic directory
imageFolder = path + comicFolder + "/images/" # path to the images folder, where comic pages are saved
pages = os.listdir(imageFolder) # creates an array of all the files in the images folder
saveTo = path + comicFolder + "/" # opens the comic directory, which we want to save our html files to
# the template HTML for the comic
template = """
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- stylesheets -->
<link rel="stylesheet" href="/styles/comic-style.css">
<title>snail-legs | comicName</title>
</head>
<body>
<header>
<h1>comicName</h1>
<p style="margin-top: 0;">yearOfCreation - pageCount pages - comicStatus - <a href="downloadLink">PDF download</a></p>
</header>
<a href="nextButton"><img src="images/p0.png"/></a>
<nav>
<a class="nav-btn" href="firstButton">first</a> -
<a class="nav-btn" href="prevButton">previous</a> -
<a class="nav-btn" href="nextButton">next</a> -
<a class="nav-btn" href="lastButton">last</a>
</nav>
<div class="comic-description">
<p>comicDescription</p>
</div>
<p class="comic-footer"><a href="/the-bookshelf/#comicFolder" class="blog-nav">back to the bookshelf</a></p>
</body>
</html>"""
# information about the comic that will be inserted into the html
comicName = input("comic name: ")
yearOfCreation = input("year of creation: ")
pageCount = input("page count: ")
comicStatus = input("comic status: ")
downloadLink = input("download link: ")
# printCopies = input("print copies: ")
comicDescription = input("comic description: ")
pageNumber = 0 # variable to store page number, used to name files
# will loop though items in pages array
for i in pages:
pageNumber += 1
html = template # resets the html to the template
if pageNumber < len(pages):
# inserts the correct image url into the HTML
currentPage = "images/" + "p" + str(pageNumber) + ".png"
html = html.replace("images/p0.png", currentPage)
# sets default values for first/prev/next/last pages
previousPage = str(pageNumber - 1) + ".html"
nextPage = str(pageNumber + 1) + ".html"
firstPage = "/the-bookshelf/" + comicFolder + "/"
lastPage = str(len(pages)-1) + ".html"
# sets "previous" link for page one to the first page, so it doesn't link to a nonexistant "0.html"
if pageNumber == 1:
previousPage = firstPage
# replaces links for first/prev/next/last pages
html = html.replace("prevButton", previousPage)
html = html.replace("nextButton", nextPage)
html = html.replace("firstButton", firstPage)
html = html.replace("lastButton", lastPage)
# inserts comic name, description, and other information into the page
html = html.replace("comicFolder", comicFolder)
html = html.replace("comicName", comicName)
html = html.replace("yearOfCreation", yearOfCreation)
html = html.replace("pageCount", pageCount)
html = html.replace("comicStatus", comicStatus)
html = html.replace("downloadLink", downloadLink)
# html = html.replace("printCopies", printCopies)
html = html.replace("comicDescription", comicDescription)
# creates the empty html files + inserts the edited template HTML
filename = saveTo + str(pageNumber) + ".html"
file = open(filename, "w")
file.write(html)
file.close()
else:
break # otherwise it'd keep going and add an extra page to the end