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.
Features
- Interactive texts and images over large pictures
- Flexible configuration
- Easily customizable with CSS
- Lightweight
- Installable via package managers
Installation
NPM
npm install --save interactiveimagejsor
Download
You can also download the production version or the development version from GitHub.
All these files (js, css and fonts) are located in the lib directory.
<head>
<link rel="stylesheet" href="interactive-image.min.css" />
</head>
<body>
<script src="interactive-image.min.js"></script>
</body>Usage
Important: jQuery is required. Install it via your package manager, a CDN or simply download it.
Edit the source code of your web page:
HTML
<!-- Main container of a scene -->
<div class="interactive-image" style="width:900px;height:600px;background:url('/path/to/main-image.png');">
</div>JavaScript
// Items collection
var items = [
{
title: "Fur",
description: "The fur of clouded leopards is of a dark grey or ochreous...",
position: {
left: 710,
top: 290
}
},
{
title: "Canines",
description: "They are often referred to as a \"modern-day saber tooth\"...",
position: {
left: 305,
top: 345
},
picture: "/path/to/picture.jpg"
},
{
title: "Threats",
description: "Many of the remaining forest areas are too small to ensure...",
position: {
left: 660,
top: 70
},
link: {
href: "https://www.mydomain.com/",
label: "Website title"
}
}
];
// Plugin configuration example (all parameters are optional)
var options = {
fontColor: "#333333",
backgroundColor: "#EFEFEF",
debug: true
};
// Activate the plugin
$(document).ready(function () {
$('.interactive-image').interactiveImage(items, options);
});That's it!
Configuration
Item
Item
| Option name | Type | Example | Required | Default | Purpose |
|---|---|---|---|---|---|
| title | string | "Lorem ipsum" | Yes | Title | |
| description | string | "Lorem ipsum dolor sit amet" | Yes | Descriptive text | |
| position | object | Yes | Marker position | ||
| picture | string | "/path/to/picture.png" | No | Illustration | |
| link | object | No | HTTP Link | ||
| fontColor | string | "#337733" | No | "#000000" | Text color |
| backgroundColor | string | "#EEEEEE" | No | "#FFFFFF" | Background color |
Position
| Option name | Type | Example | Required | Default | Purpose |
|---|---|---|---|---|---|
| left | integer | 200 | Yes | X absolute value | |
| top | integer | 50 | Yes | Y absolute value |
Link
| Option name | Type | Example | Required | Default | Purpose |
|---|---|---|---|---|---|
| href | string | "https://www.website.net" | Yes | href attribute | |
| label | string | "Webpage name" | No | href value | Name of the webpage |
Plugin configuration options
| Option name | Type | Example | Required | Default | Purpose |
|---|---|---|---|---|---|
| debug | boolean | true | No | false | Logs enabled in console |
| fontColor | string | "#337733" | No | "#000000" | Text color |
| backgroundColor | string | "#EEEEEE" | No | "#FFFFFF" | Background color |
TODO
- Make the plugin adaptive to all screens
- Picture items
- Audio items
- Video items
Contribute
Feel free to contribute to this project 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
- Premium: imageLinks
- For business: ThingLink
License
Copyright (c) 2015-2018 Jean-Philippe Chateau. This content is released under the MIT license.