This time I will share jQuery Plugin and tutorial about Mobile-friendly Panorama Viewer With jQuery – Panoramix Image, hope it will help you in programming stack.
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.
1 |
<link href="panoramix.css" rel="stylesheet"> |
2. Insert a panoramic image into the webpage.
1 |
<img src="1.jpg" class="panoramixImg"> |
3. Create the image viewer for your panoramic image.
1 |
<div id="myPanoramix" class="pano"> |
3 |
<a href="#" class="left">«</a> |
4 |
<a href="#" class="right">»</a> |
4. Activate the panorama viewer as this:
1 |
$("#myPanoramix").panoramix(); |
5. Override the default scrolling speed & interval:
1 |
$("#myPanoramix").panoramix({ |
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).
01 |
<img src="2.jpg" class="panoramixImg" usemap="#Map"> |
03 |
<div id="myMappedPanoramix" class="pano"> |
04 |
<div class="controls"> |
05 |
<a href="#" class="left">«</a> |
06 |
<a href="#" class="right">»</a> |
10 |
<map name="Map" id="Map"> |
11 |
<area alt="" title="title 1" href="#" shape="rect" coords="1017,467,1097,527" style="outline:none;" target="_self"> |
12 |
<area alt="" title="title 2" href="#" shape="rect" coords="4668,391,4873,490" style="outline:none;" target="_self"> |
13 |
<area alt="" title="title 3" href="#" shape="rect" coords="6607,358,6812,457" style="outline:none;" target="_self"> |
1 |
$("#myMappedPanoramix").panoramix(); |
2 |
$("img[usemap]").rwdImageMaps(); |
6. API methods:
1 |
var myPanoramix = $("#myPanoramix").panoramix({ |
5 |
myPanoramix.moveLeft(); |
6 |
myPanoramix.stopMoving(); |
7 |
myPanoramix.moveRight(); |
8 |
myPanoramix.stopMoving(); |
This awesome jQuery plugin is developed by perezdans. For more Advanced Usages, please check the demo page or visit the official website.
