jQuery Plugin For Animated Image Notes & Markers - Bullseye

Bullseye is a simple jQuery plugin to add blinking markers to an image that displays the associated notes in the animated tooltips when hovered over.

How to use it:

1. Include the jQuery bullseye plugin's CSS in the head section.

<link rel="stylesheet" href="path/to/jquery.bullseye.css">

2. Include the jQuery bullseye plugin's script at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="path/to/jquery.bullseye.js"></script>

3. Wrap your image into a container.

<div class="demo">
  <img src="demo.jpg" height="" width="" alt="">
</div>

4. Create image notes in the Javascript.

$('.demo').bullseye({
  top: 30, // Determines bullseye position from top.
  left: 5, // Determines bullseye position from left.
  bottom: 0, // Determines bullseye position from bottom.
  right: 10, // Determines bullseye position from right.
  heading: "Image Note 1", // Heading content
  content: "Content 1", // Paragraph content
  orientation: "left", // Tooltip orientation
  color: "#fzff", // Dot and dot animation color. 
  onHoverMarkAsRead: true
}).bullseye({
  bottom: 30,
  right: 4,
  heading: "Image Note 2",
  content: "Content 1",
  color: "#fff",
  orientation: "right"
}).bullseye({
  left: 600,
  bottom: 50,
  heading: "Image Note 3",
  content: "Content 3",
  orientation: "bottom",
  color: "#fff"
});

---

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