JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 4
  • Score
    100M100P100Q53521F
  • License MIT

A jQuery plugin to embed interactive images on your website

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 npm version Code Climate

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

See it in action

Installation

NPM

npm install --save interactiveimagejs

or

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

License

Copyright (c) 2015-2018 Jean-Philippe Chateau. This content is released under the MIT license.