A jQuery plugin to embed interactive images on your website.
Branch: master
Clone or download
Latest commit eac139f Feb 15, 2019

README.md

Interactive Image npm version Build Status Code Climate

A jQuery plugin to embed interactive images on your website.

Demo

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

Chrome Safari Firefox Edge Opera
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

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

License

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