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
- Insert interactive texts and images over large pictures
- Flexible configuration
- Easily customizable with CSS
- Fully tested
- Installable via package managers
Getting started
Important note: jQuery is required.
First, install interactive-image.
npm install interactiveimagejs --saveThen, include the plugin files that were generated in the lib directory of this project in your page. Do not forget the fonts.
<link rel="stylesheet" href="interactive-image.css" />
<script src="interactive-image.js"></script>Finally, edit the source code of your web pages.
HTML
<div class="interactive-image" style="width: 900px; height: 600px; background: url('/path/to/images/image.jpg');"></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/images/picture.jpg"
},
{
title: "Threats",
description: "Many of the remaining forest areas are too small to ensure...",
position: {
left: 660,
top: 70
},
link: {
href: "http://www.website.org/",
label: "Website"
}
}
];
// Activate the plugin
$(document).ready(function() {
$('.interactive-image').interactiveImage(items, options);
});Configuration
Item
| Option name | Type | Example | Required | Default | Purpose |
|---|---|---|---|---|---|
| title | string | "Threats" | Yes | Title | |
| description | string | "Many of the..." | Yes | Descriptive text | |
| position | object | Yes | Marker position | ||
| picture | string | "/path/to/your/picture.png" | No | Illustration | |
| link | object | No | 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 | "http://www.website.com/" | Yes | href attribute | |
| label | string | "Website" | No | href value | Label |
Plugin 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 |
Contribute
Feel free to contribute to this project and open some pull requests.
Interactive Image plugin uses npm and webpack. QUnit is required to execute the tests.
See the complete contributing guidelines here.
Alternatives
License
Copyright (c) 2015-2018 Jean-Philippe Chateau. This content is released under the MIT license.