Page Notes

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.

To use the control, you'll first need to add the galleryControl.js to your page and then modify it to include some information about the images you want to display! Instructions are in the file itself.

Then, you'll need to add the <gw-gallery name="name here"></gw-gallery> element to your page where you want the gallery to be! You just need to give it a name which matches what you've put in the javascript file.

There are a few optional attributes for the gallery element which help with smaller screen size:

minImgWidth
A string specifying what the smallest allowed width of the images themselves is, below which there will be a vertical scrollbar. For example, 250px.
minImgHeight
A string specifying what the smallest allowed height of the images is. Note that setting this can make images blurry.
maxImgHeight
A string specifying what the largest allowed height of the images is. Note that setting this can make images blurry.
reflowWidth
A string specifying the width at which the gallery will reflow to put the buttons below the image. For example, 500px.
startAt
The index of the image the gallery should start at, zero-indexed. The default is the last image.

There are also a couple CSS variables you can set to adjust the colors.

--border-color
The color of the border around the images.
--icon-color
The color of the arrows in the buttons

Note: there's an older version of this control.

Files

Add the galleryControl.js file to your page to get started!

Markup

  • galleryDemo.html

Scripts

  • galleryControl.js
  • comicGalleryDemo.js
  • personalizationControl.js

Styles

  • comicGalleryDemo.css

Known Users

  • damosden / MSPain (old version)
  • children-of-sorrows (old version)