Skip to content

Latest commit

 

History

History
83 lines (64 loc) · 2.39 KB

README.md

File metadata and controls

83 lines (64 loc) · 2.39 KB
Raw

ImagePlayer

Javascript image player.

An alternative to animated GIFs.

There are probably better ways of doing this ...

Existing GIF files can be exploded with ImageMagick, e.g.:

$ convert file.gif -coalesce file%03d.jpg
$ ls -1
file.gif
file000.jpg
file001.jpg
file002.jpg
file003.jpg
...

Usage

Include the Javascript in the web page, e.g.:

<script src="imageplayer.js"></script>

Minified version:

<script src="imageplayer.min.js"></script>

Create a new image player, specifying the ID of the HTML element (probably a <div>) in which the player can be inserted, and the images to use, e.g.:

ip = new ImagePlayer({
  element: 'ipDiv',
  images: [
    'example/file000.jpg',
    'example/file001.jpg',
    'example/file002.jpg',
    'example/file003.jpg',
    'example/file004.jpg',
    'example/file005.jpg',
    'example/file006.jpg',
    'example/file007.jpg',
    'example/file008.jpg',
    'example/file009.jpg'
  ],
  autoplay: 0,
  interval: 150,
  icondir:  'images'
});

Options

Required options:

  • element: The ID of the HTML element in which the player will be inserted
  • images: An array of image files to used in the player

Optional options:

  • width: The width, in pixels, to set for the <div> containing the player.
  • height: The height, in pixels, to set for the <div> containing the player.
  • align: Alignment within the <div>. Options: left, right, center. Default: center.
  • interval: The interval in milliseconds between updating images. Default: 300.
  • autoplay: Whether to start playing automatically. Set to 1 for true, 0 for false. Default: 1.
  • controls: Whether controls should be displayed. Set to 1 for true, 0 for false. Default: 1.
  • bgcolor: Background colour to use for player in non full screen mode. Default: #ffffff.
  • fsbgcolor: Background colour to use for player in full screen mode. Default: #383838.
  • closebgcolor: Background colour for full screen close icon. Default: rgba(56, 56, 56, 0.5).
  • closecolor: Foreground colour for full screen close icon. Default: #ffffff
  • icondir: Path to directory containing control icon images (play.png, etc.). Default: images.
  • startindex: Image index from which the player should start. Default 0.

Example