https://github.com/jmert/html-figure-pager

A small Javascript library for building figure pagers
https://github.com/jmert/html-figure-pager

figures html javascript

Last synced: about 1 year ago
JSON representation

A small Javascript library for building figure pagers

• Host: GitHub
• URL: https://github.com/jmert/html-figure-pager
• Owner: jmert
• License: mit
• Created: 2020-05-07T01:51:06.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-04-05T02:55:27.000Z (about 3 years ago)
• Last Synced: 2025-01-29T06:49:09.262Z (over 1 year ago)
• Topics: figures, html, javascript
• Language: JavaScript
• Size: 460 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# HTML Figure Pager

*An active example of this Javascript library can be found

[here](https://jmert.github.io/html-figure-pager/index.html).*

This package provides a small, self-contained Javascript library which allows one to

easily create "figure pagers" in their HTML documents.

In my graduate research group, we often had to generate many plots (numbering anywhere from

a handful to many thousands) that showed data in various combinations or processing options.

Beyond a few figures, it is impractical to show all combinations linearly on a page, so we

used the so-called figure pagers to allow interactive selection of a single image to show

at a time from a collection.

For instance, the following screenshot is one simple example where there are two

types of options ("Mode" and "Color map") which can both take on a variety of values.

By clicking on an option, the figure to the right is updated according to a user-defined

mapping from option values to image file name.

![screenshot](screenshot.png)

## Cloning

The demo linked above is contained within the `gh-pages` branch of this repository, and

it contains a large number of images.

With a normal `git clone`, all of these images are downloaded as part of the git history,

increasing the download and storage size significantly beyond the small size of the pager

script itself.

To avoid downloading the unnecessary demo, you may instead use a shallow clone to obtain

a copy of only the latest commit, and then "unshallow" the branch to obtain the full

history of the `master` branch while completely ignoring the `gh-pages` branch.

```bash

git clone --depth 1 https://github.com/jmert/html-figure-pager

cd html-figure-pager

git pull --unshallow

```