Comic Gallery Demo

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