Mobile-friendly Panorama Viewer With jQuery - Panoramix Image

Panoramix Image is a small, responsive, interactive jQuery image viewer for 360 degree panoramic images that supports both mouse drag and touch swipe events.

Basic usage:

1. Include the Panoramix Image's stylesheet in the head section of the webpage.

<link href="panoramix.css" rel="stylesheet">

2. Insert a panoramic image into the webpage.

<img src="1.jpg" class="panoramixImg">

3. Create the image viewer for your panoramic image.

<div id="myPanoramix" class="pano">
  <div class="controls">
    <a href="#" class="left">&laquo;</a>
    <a href="#" class="right">&raquo;</a>
  </div>
</div>

4. Activate the panorama viewer as this:

$("#myPanoramix").panoramix();

5. Override the default scrolling speed & interval:

$("#myPanoramix").panoramix({
  speed: 50,
  interval: 100
});

6. The plugin also works with image-map. (Requires jQuery rwdImageMaps plugin which allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize).

<img src="2.jpg" class="panoramixImg" usemap="#Map">

<div id="myMappedPanoramix" class="pano">
  <div class="controls">
    <a href="#" class="left">&laquo;</a>
    <a href="#" class="right">&raquo;</a>
  </div>
</div>

<map name="Map" id="Map">
  <area alt="" title="title 1" href="#" shape="rect" coords="1017,467,1097,527" style="outline:none;" target="_self">
  <area alt="" title="title 2" href="#" shape="rect" coords="4668,391,4873,490" style="outline:none;" target="_self">
  <area alt="" title="title 3" href="#" shape="rect" coords="6607,358,6812,457" style="outline:none;" target="_self">
</map>

$("#myMappedPanoramix").panoramix();
$("img[usemap]").rwdImageMaps();

6. API methods:

var myPanoramix = $("#myPanoramix").panoramix({
    // options here
});

myPanoramix.moveLeft();
myPanoramix.stopMoving();
myPanoramix.moveRight();
myPanoramix.stopMoving();

---

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