ImageFrame

Run of the mill simple JS image slider module.

A simple single-file JavaScript image sliding gallery container without any dependencies.

Usage

Warning

You might needs secure HTTPS context/CORS functionality to load images.

1. Simply include the file at a path relative to site/project root.
2. Ensure image files are located at path relative to site/project root.
3. On the JS side, identify & fetch the ImageFrame view holder.
4. Instantiate ImageFrame object via connecting it with the view holder.
5. Call the initialization method ini(imagelist, transitionDelay) where:

• imagelist: A list of strings representing the relative path to image files.
• transitionDelay: Time specifying how long each image should be shown before switching.
• HTML (app.htm)

<!DOCTYPE html>
<html lang="en">
<head>
<title>ImageFrame</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/imageframe.css"/>
</head>
<body>
<main>
  <div id="imageframe-view"></div>
</main>
<script type="module" src="app.js"></script>
</body>
</html>

• JS (app.js)

import { ImageFrame } from './imageframe.js'

window.addEventListener('load', () => {
  const imageframeView = document.getElementById('imageframe-view'); // Get container view.
  if(imageframeView === null) {
    throw new Error('No ImageFrame container found');
  }
  window.imageframe = new ImageFrame(imageframeView); // Initialize ImageFrame & connect to view.

  // List of image items to view.
  const imagelist = [
    './image/img01.png',
    './image/img02.png',
    './image/img03.png',
    './image/img04.png',
    './image/img05.png',
  ];

  // Load up...
  window.imageframe.ini(imagelist, 3200); // 2nd arg = 0 to disable slideshow feature.
  // window.imageframe.animateOn(); // Seems to not be necessary, but won't hurt in case of any 'complication'.
}, { once: true });

window.addEventListener('pageshow', () => {
  window.imageframe.animateOn();
});

window.addEventListener('pagehide', () => {
  window.imageframe.animateOff();
});