Cyclotron - 360°Panorama Image Display Plugin

File Size: 295 KB
Views Total: 21443
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Cyclotron - 360°Panorama Image Display Plugin

Cyclotron is a simple and easy-to-use jQuery plugin that allows you to drag 360° panoramas and other seamlessly looping images around.

Supports both mouse drag and touch swipe events.

How to use it:

1. Include jQuery Library and Cyclotron.js on the page.

<script src="jquery.min.js"></script>
<script src="jquery.cyclotron.js"></script>

2. Markup a element with a background image

<div class="cycle" style="background:url(panorama.jpg);height:512px"></div>

3. Call the function with default option to initialize the plugin.

$(document).ready(function ($) {
  $('.cycle').cyclotron();
});

4. Available options.

  • dampingFactor - should be somewhere around 0.9, should be > 0 and < 1 (default: 0.93)
  • historySize - size of the array which stores the deltas (default: 5)
$(document).ready(function ($) {
  $('.cycle').cyclotron({
    dampingFactor: 0.93,
    historySize: 5
  });
});

Changelog:

2024-01-22

  • Add support for mobile devices.

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