Skip to content

Grounded Wren
Controls
Comic Gallery

Comic Gallery

Personalization

Alternative text 2 — Title Two (10/11/2023) #2 of 2

Page Notes

There's now a newer version of this control!

This page demonstrates a control to view and navigate between image pages, like those of a web comic.

The control works using a URL parameter to specify which image to load (this is the stuff after "?" in the URL). This technique allows people to link directly to particular pages without you needing to create a separate HTML file for each page.

The control requires you have all of the images you want to display in the same folder somewhere on your website. This is specified in the javascript in the COMICS_PATH variable. The javascript uses the COMICS_LIST variable to put them in order by filename, and the COMIC_INFO_MAP variable to map each filename to some metadata. Those should be the only three things you need to update to add new pages - you don't need to modify the HTML.

With some minor tweaks, you can allow the images to loop endlessly without the buttons disabling at the front and end of the list. MSPain does this for reference.

Files

Add the highlighted files to your page to get started!

Markup

comicGalleryDemo.html

Scripts

comicGalleryControl.js
personalizationControl.js

Styles

comicGalleryControl.css
comicGalleryDemo.css

Known Users

damosden / MSPain
children-of-sorrows

Using This Software

Please feel free to use any of the code on this site for your own projects! I do ask that you:

Credit me somewhere
Let me know so I can list you as a user

though I won't require you to do either.

I am more than happy to assist you in using my code; feel free to reach out!

Created by Vera