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

Setup

$ npm install --save interactiveimagejs

Usage / samples

HTML

<head>
  <!-- Include Interactive Image jQuery plugin Styles -->
  <link rel="stylesheet" href="interactive-image.min.css" />
  
  <!-- Specific styles of a scene -->
  <style>
  .interactive-image {
    width: 900px;
    height: 600px;
    background: url("/path/to/main-image.png");
  }
  </style>
</head>
<body>
  <!-- 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>
</body>

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
    }
  },
  {
    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() {
  $("#my-interactive-image").interactiveImage(items);
});

Copy and run this code to see the results.

License: MIT

Homepage

https://www.jpchateau.com/demo/interactive-image

GitHub

https://github.com/jpchateau/Interactive-Image

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

Enjoy!