The “Interactive Image” is a multifunctional and highly customizable image marker plugin for jQuery. It supports videos, sounds, images, and texts over large pictures. This jQuery plugin helps you to place markers on image with flexible configuration options.
The plugin comes with multiple configuration options to highly customize it. You can easily enable/disable each functionality of the plugin through boolean value. Similarly, you can also customize the design with additional CSS.
Furthermore, you can easily add markers, notes, and comments on your images. Besides these, you can also embed SoundCloud tracks, HTML5/Youtube/Vimeo videos. The plugin has built-in social sharing buttons to share these interactive elements on different social media.
How to Place Markers on Image
In order to place markers on your images, we need to getting started with the “Interactive Image” plugin. So, load the jQuery JavaScript library and plugin assets into your HTML document.
<!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Interactive Image CSS --> <link rel="stylesheet" href="dist/interactive-image.css"> <!-- Interactive Image JS --> <script src="dist/interactive-image.js"></script>
After loading all necessary assets, create a div element with a unique id in which your interactive image will be rendered. You can place it anywhere in your HTML page.
<!-- Main container of a scene --> <div id="my-interactive-image"></div>
Now, define the width, height, and background image in CSS for the interactive container. You can use the custom values according to your needs.
.interactive-image {
margin: auto;
width: 800px;
height: 600px;
background-image: url('docs/_static/background.jpg');
}
Define your interactive items in JavaScript array with the following mentioned options.
// Plugin Items collection
var items = [
// Text items
{
type: "text",
title: "Text title",
description: "Text item with picture and HTTP link",
position: {
left: 700,
top: 50
},
picturePath: "https://www.jpchateau.com/bundles/jpcjpchateau/images/demo/interactive-image/clouded-leopard-head.jpg",
link: {
url: "https://www.jpchateau.com/demo/interactive-image",
label: "Interactive Image Demo"
}
},
// Picture items
{
type: "picture",
path: "https://www.jpchateau.com/bundles/jpcjpchateau/images/demo/interactive-image/clouded-leopard-head.jpg",
position: {
left: 100,
top: 150
},
sticky: true
},
// Audio items
{
type: "audio",
path: "http://www.healthfreedomusa.org/downloads/iMovie.app/Contents/Resources/iMovie%20%2708%20Sound%20Effects/Leopard%20Snarl.mp3",
position: {
left: 100,
top: 250
},
sticky: true
},
// Video items
{
type: "video",
path: "https://www.videvo.net/videvo_files/converted/2015_08/videos/Tiger.mp460597.mp4",
position: {
left: 100,
top: 350
},
sticky: true
},
{
type: "video",
path: "https://upload.wikimedia.org/wikipedia/commons/1/11/Le_regard_du_f%C3%A9lin.webm",
caption: "Video WebM with caption and <i>sticky</i> behavior",
position: {
left: 300,
top: 350
}
},
{
type: "video",
path: "https://www.videvo.net/videvo_files/converted/2015_08/videos/Tiger.mp460597.mp4",
caption: "Video with caption and poster and <i>sticky</i> behavior and a large description",
poster: "../docs/_static/poster.jpg",
position: {
left: 500,
top: 350
}
},
// Provider items
{
type: "provider",
providerName: "youtube",
parameters: {
videoId: "iPRiQ6SBntQ"
},
position: {
left: 100,
top: 450
},
sticky: true
},
{
type: "provider",
providerName: "dailymotion",
parameters: {
videoId: "x59y3j6"
},
position: {
left: 300,
top: 450
}
},
{
type: "provider",
providerName: "vimeo",
parameters: {
videoId: "198191339"
},
position: {
left: 500,
top: 450
}
},
{
type: "provider",
providerName: "soundCloud",
parameters: {
soundId: "568421244"
},
position: {
left: 700,
top: 450
}
}
];
Likewise, define an array for plugin configuration options as follows. The purpose of each option has been defined in the code comment. Set the possible value for options to achieve your desired output.
// Plugin configuration
var options = {
debug: true, // display console logs (default: false)
allowHtml: true, // allow HTML markup inside items (default: false)
shareBox: true, // display the social media share box (default: true)
triggerEvent: 'hover', // event on the hotspots that triggers the display of items (default: 'hover')
socialMedia: { // custom configuration of the social media share box
url: "https://www.jpchateau.com/demo/interactive-image",
text: "Clouded Leopard",
hashtags: ["jQuery", "cloudedLeopard"],
twitterUsername: "jpchateau",
}
};
Finally, initialize the plugin in the jQuery document ready function to activate markers on your images.
// Plugin activation
$(document).ready(function() {
$("#my-interactive-image").interactiveImage(items, options);
});
That’s all! Let us know by comment below if you are able to place markers on your image with this jQuery plugin. If you are facing any issue or finding it hard to implement this interactive image plugin, feel free to ask your question.
