How do i call user details dynamically using jQuery plugin interactive images on your website

Last Reply 9 days ago By dharmendr

Posted 12 days ago

This example is like tootltip popup of image and discription, but i want to fetch the data from table instead of displaying static image and details.

here is the markup

 

<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>

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);
});

css

 

.interactive-image .text-item {
  background-color: blue;
  color: yellow;
}

example link

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

You are viewing reply posted by: Andrea 12 days ago.