jQuery Plugin For Interactive Image Notes - Interactive Image

jQuery Plugin For Interactive Image Notes - Interactive Image

Interactive Image is a simple, flexible jQuery plugin to create interactive notes / markers / comments on images embedded in your webpage.

Basic usage:

1. Add the required stylesheet interactive-image.css to the document's head section.

<link href="css/interactive-image.css" rel="stylesheet">

2. Create a container to hold your image and image notes.

<div class="interactive-image"></div>

3. Add a background image to the container.

.interactive-image {
  background: url('demo.jpg');
}

4. Add interactive notes to the image.

var items = [{
    title: "Note 1",
    description: "Image Note 1",
    left: 360,
    top: 280
},
{
    title: "Note 2",
    description: "Image Note 2",
    left: 530,
    top: 440
},
{
    title: "Note 3",
    description: "Image Note 3",
    left: 1000,
    top: 380
}];

5. Initialize the plugin..

$('.interactive-image').interactiveImage(items);

6. Available options.

var options = {
    fontColor: "#000",
    backgroundColor: "#fff"
};
$('.interactive-image').interactiveImage(items, options);

Change logs:

v0.6 (2018-02-16)

  • added autoprefixer and changed fonts filenames

v0.5 (2015-08-25)

  • improved hover event

2015-08-12

  • items are now objects
  • CSS update.

This awesome jQuery plugin is developed by jpchateau. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 16.02.2018
  • Source