Responsive Circle Infographic Plugin - jQuery Circle Info Box

Circle Info Box is a jQuery plugin to generate animated, responsive, customizable circle infographics on the webpage.

It provides an engaging and interactive way to present your information by automatically switching between data points and cross-fading informative text within the central area of the graph. In addition, visitors can manually switch between the information by clicking on the individual points within the infographic.

How to use it:

1. Include the latest jQuery library and the Circle Info Box plugin's JS and CSS files in your project.

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Circle Info Box -->
<link rel="stylesheet" href="./src/s8CyrcleInfoBox.css" />
<script src="./src/s8CyrcleInfoBox.js"></script>

2. Create an HTML structure for the circle infographic.

<div class="example">
  <ul class="circleWrapper wStyle">
    <li>
      <div class="circleFeature fStyle" data-cyrcleBox="f1">
        Point 1
      </div>
      <div class="circleBox" id="f1">
        Info 1
      </div>
    </li>
    <li>
      <div class="circleFeature fStyle" data-cyrcleBox="f2">
        Point 2
      </div>
      <div class="circleBox" id="f2">
        Info 2
      </div>
    </li>
    <li>
      <div class="circleFeature fStyle" data-cyrcleBox="f3">
        Point 3
      </div>
      <div class="circleBox" id="f3">
        Info 3
      </div>
    </li>
    ...
  </ul>
</div>

3. Initialize the plugin to generate a basic circle infographic.

$(function(){ 
  $(".example").s8CircleInfoBox();
});

4. Apply your own CSS styles.

.wStyle {
  border: 3px dashed rgb(250, 132, 64);
}

.fStyle {
  background-color: rgb(250, 132, 64);
  color: #fff;
  font-weight: 600;
}

5. Available plugin options to customize the circlr infographic.

• autoSlide: determine whether to switch between points automatically
• slideSpeed: animation speed in ms
• notResponsive: determine if is not responsive
• action: trigger event
• responsive: determine whether to resize the infographic on window resize
• breakpoint: break down into a list if the screen size is smaller than this value
• hoverStyle: CSS hover styles
• spreadStyle: "all", "top", "left", or "right"

$(".example").s8CircleInfoBox({
  autoSlide: true,
  slideSpeed: 3000,
  notResponsive: false,
  action: "mouseover",
  responsive: true,
  breakpoint: 760, 
  hoverStyle: "circleSelect",
  spreadStyle: "all",
});

---

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