Auto Scaling Image Annotation Plugin For jQuery - Scalize

Scalize is a jQuery plugin used for adding custom markers (hotspots) with custom popovers and animations to containers or images. The plugin has the ability to automatically scale the container and re-postion the markers on window resize. Currently supports 2 simple shapes (circle and square) and you're able to add custom markers using your own content.

Basic usage:

1. Include the stylesheet scalize.min.css in the header of the webpage, and the JavaScript file scalize.min.js after jQuery library as this:

<link rel="stylesheet" href="css/scalize.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="js/scalize.min.js"></script>

2. Include the animated.css for more popover animations:

<link rel="stylesheet" href="/path/to/animate.min.css">

3. Insert the image into a container with the CSS class of 'scalize' and add your own markers using data-POSITION attributes:

<div class="scalize">
  <img src="product.jpg" class="target">
  <div class="item-point" data-top="730" data-left="227"></div>
  <div class="item-point" data-top="380" data-left="862"></div>
  <div class="item-point" data-top="470" data-left="1550"></div>
</div>

4. Initialize the plugin with default options. That's it.

$('.scalize').scalize();

5. If you want to add custom popover content to the markers:

<div class="scalize">
  <!-- Start Popover Template -->
  <div id="content1" class="content right bottom">
      <div class="head">
          <a href="#" class="exit"><img src="img/close.png" alt="" /></a>
          <h6 class="title">Lorem Ipsum 1</h6>
      </div>
      <div class="body">
          <p>Lorem ipsum dolor sit amet, ne est populo dictas, et pri ferri ubique labitur.</p>
          <p>Mel ad euismod adipiscing moderatius eos an decore quodsi animal.</p>
      </div>
  </div>
  ...
  <!-- End Popover Template -->

  <img src="product.jpg" alt="" class="target">
  <!-- Start Item Point -->
  <div class="item-point" data-top="730" data-left="227" data-popover="#content1">
      <div><a href="#" class="toggle"></a></div>
  </div>
  ...
</div>

6. All possible options and callback functions.

$('.scalize').scalize({

  // width/height
  width : 0,
  height : 0,

  // selector of markers
  selector : '.item-point',

  // circle, square, content
  styleSelector : 'circle',

  // pulse, pulse2, marker
  animationSelector : '',

  // custom animation classes
  animationPopoverIn : '',
  animationPopoverOut : '', 

  // functions
  onInit : null,
  getSelectorElement : null,
  getValueRemove : null
  
});

Author:

Author: Adam M Nurdin

Website & More Examples: http://danurstrap.com/scalize/

---

This awesome jQuery plugin is developed by adamnurdin01. For more Advanced Usages, please check the demo page or visit the official website.