We use cookies to give you the best possible website experience.
By using COIDEA, you agree to our Privacy Policy.OK, CLOSE

Ultra lightweight, customizable, simple widget with zero dependencies, built with modern standards for modern browsers.

COIDEA - ciNote Plugin for Adding Notes to Any Image

ciNote is a jQuery plugin that allow annotations (eg markers and notes) to be added to an image. It's ultra lightweight, customizable, simple widget with zero dependencies, built with modern standards for modern browsers.

Usage

Create HTML structure:

<div class="ci-note">
  
  <div class="ci-target">
    <img src="path/to/image" alt="ci-target-img">
    <!-- points START -->
    <div class="ci-item-point" data-detail=".ci-item-content-1" data-top="17" data-left="54"></div>
    <!-- points END -->
    ...
  </div>

  <!-- contents START -->
  <div class="ci-item-detail ci-item-content-1 right">
    <p>My hair never looked so good after using this!</p>
  </div>
  <!-- contents END -->
  ...

</div>

Include plugin's CSS

<link rel="stylesheet" href="assets/css/demo.css">

Include jQuery, plugin's JS & call the plugin with options:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="assets/js/demo.js"></script>

$('.ci-note').ciNote({
  point: '.ci-item-point',
  pointStyle: 'default', // default: default, circled, customized (text)
  pointWidth: 32, // default 32 (number)
  pointHeight: 32, // default 32 (number)
  detailOffset: -6, // default: 0, positive or negative numbers ( in percent ) (number)
  closeDetail: 'X', // default: X, image, icon or text
  targetWidth: 480 // default: 9999, choose between px or % to set max width of detail (number)
});

References and Credits