Interactive-Image – a jQuery plugin to embed interactive images

Embed interactive images on your website with Interactive-Image. With no pain.

How to embed interactive images on the website? It’s so easy!

We can use Interactive-Image jQuery plugin, which brings nice features, such as:

– Flexible configuration of markers and items

– Interactive videos, sounds, images and texts over large pictures

– Support for popular content providers

– Social media sharing capabilities

– Easily customizable with CSS

– Unit tested with Mocha

– Installable via package managers

And no restriction on commercial use!

Interactive Image jQuery plugin
Interactive Image jQuery plugin


$ npm install --save interactiveimagejs

Usage / samples


  <!-- Include Interactive Image jQuery plugin Styles -->
  <link rel="stylesheet" href="interactive-image.min.css" />
  <!-- Specific styles of a scene -->
  .interactive-image {
    width: 900px;
    height: 600px;
    background: url("/path/to/main-image.png");
  <!-- Main container of a scene -->
  <div id="my-interactive-image"></div>  
  <!-- Include jQuery -->
  <script src="jquery.min.js"></script>

  <!-- Include Interactive Image jQuery plugin JavaScript -->
  <script src="interactive-image.min.js"></script>


// 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
    type: "audio",
    path: "/path/to/sound.mp3",
    caption: "A clouded leopard growl",
    position: {
      left: 300,
      top: 500
    type: "video",
    path: "/path/to/video.mp4",
    caption: "A clouded leopard walking",
    poster: "/path/to/poster.png",
    position: {
      left: 400,
      top: 550
    type: "provider",
    providerName: "youtube",
    parameters: {
      videoId: "iPRiQ6SBntQ"
    position: {
      left: 600,
      top: 550
    sticky: true

// Plugin activation
$(document).ready(function() {

Copy and run this code to see the results.

License: MIT




You may also like

Creating 3D rotatable objects with jQuery Interactive 3D plugin

Leaflet: open-source JavaScript library for mobile-friendly interactive maps

Highcharts: Interactive JavaScript charts for your website

PragmaticPlayerJs – jQuery plugin for embedded youtube and HTML5 videos

JS video and photo gallery – blueimp

ScriptCam :: A fully customizable jQuery webcam plugin

Responsive ReactJS carousel gallery: react-image-gallery

Medium-zoom – a JavaScript library for zooming images