Package Exports

interactiveimagejs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (interactiveimagejs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Interactive Image

A jQuery plugin to embed interactive images on your website.

See it in action on the demo page.

Features

Interactive texts and images over large pictures
Flexible configuration of markers and items
Easily customizable with CSS
Unit tested with Mocha
Installable via package managers
No restriction on commercial use

Browser Support


Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Requirements

jQuery 1.7.2+ is required.

Installation

npm

$ npm install --save interactiveimagejs

Yarn

$ yarn add interactiveimagejs

Download

Download the production or the development version from GitHub.
All the files (.js, .css and fonts) are located in the dist directory.

Usage

How to use it

Edit the source code of your web page:

HTML

<head>
  <link rel="stylesheet" href="interactive-image.min.css" />
  <style>
  .interactive-image {
    width: 900px;
    height: 600px;
    background: url("/path/to/main-image.png");
  }
  </style>
</head>
<body>
  <div class="interactive-image"></div>  
  
  <!-- Do not forget to include jQuery here -->

  <script src="interactive-image.min.js"></script>
</body>

Note regarding the css file: You may have to rewrite the relative paths of the fonts.

JavaScript

// Items collection
var items = [
  {
    type: "text",
    title: "Fur",
    description: "The fur of clouded leopards is...",
    position: {
        left: 100,
        top: 50
    }
  },
  {
    type: "picture",
    path: "/path/to/picture.png",
    caption: "A baby clouded leopard",
    position: {
      left: 200,
      top: 300
    }
  }
];

// Plugin activation
$(document).ready(function() {
  $(".interactive-image").interactiveImage(items);
});

Style customization

You may want to change the rendering of an item, as for example the background and the front color of text items.
Adapt this CSS snippet to your needs and add it after the interactive-image css file is loaded:

.interactive-image .text-item {
  background-color: blue;
  color: yellow;
}

Debugging

In order to display some console messages to see the different steps of the processing, add an options object to the app initialization:

var options = {
  debug: true
};

$(document).ready(function() {
  $(".interactive-image").interactiveImage(items, options);
});

Configuration

Plugin configuration options

Options

Property	Type	Example	Required	Default	Purpose
debug	boolean	true	No	false	Logs enabled in console

Items

Each item has several possibilities of configuration.
You can add a link and/or a picture to your text items, or a caption to your picture items.

Text Item

Property	Type	Example	Required	Default	Purpose
type	string	"text"	Yes		Item type (text/picture)
position	object	See `Position` object	No	{left:0, top:0}	Hotspot position on the scene
title	string	"My title"	Yes		Title
description	string	"My description"	Yes		Descriptive text
picturePath	string	"/path/to/picture.png"	No		Illustration
link	object	See `Link` object	No		HTTP Link

Picture Item

Property	Type	Example	Required	Default	Purpose
type	string	"picture"	Yes		Item type (text/picture)
position	object	See `Position` object	No	{left:0, top:0}	Hotspot position on the scene
path	string	"/path/to/picture.png"	Yes		Illustration
caption	string	"My caption"	No		Illustration small description

Other objects

Position

Property	Type	Example	Required	Default	Purpose
left	integer	200	Yes		X absolute value
top	integer	50	Yes		Y absolute value

Link

Property	Type	Example	Required	Default	Purpose
url	string	"https://www.github.com"	Yes		href attribute
label	string	"My webpage"	No	`url` value	Name of the webpage

TODO

Make the plugin adaptive to all screens
Add audio items
Add video items

Dependencies

imagesloaded to detect when images have been loaded

Contribute

Feel free to contribute and open some pull requests.
This jQuery plugin uses npm to manage dependencies and webpack as bundler.
See the complete contributing guidelines here.

Alternatives

Free: iPicture (inactive)
Premium: imageLinks
For business: genially - Interactive-Img - ThingLink