Jquery.panorama 360度全景圖使用說明外加修改版

Jquery.panorama 可以讓圖360度的轉

非常適合放寬景圖得照片

作者網站:http://www.openstudio.fr/Un-viewer-de-panoramas-simple-en.html

在head裡加入

<link rel="stylesheet" type="text/css" href="css/jquery.panorama.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.panorama.js"></script>

在body裡加入

<img src="img/atelier.jpg" class="panoramas" width="2642" height="375"/>

在最後面裡加入

<script type="text/javascript">
$(document).ready(function(){
	$("img.panoramas").panorama({
                 viewport_width: 500,
                 speed: 30000,
                 direction: 'right',
                 control_display: 'yes'
         });
});
</script>

下列是一些參數設定

viewport_width  :指定顯示窗口寬度(默認是:600)

speed  :控制旋轉速度。(默認:20000)

direction  :旋轉”left”或”right”(默認:”right”)

control_display  :顯示控制面板(默認:”auto”)

start_position  :圖的起點位置(默認:0)

auto_start  :自動轉動(默認為true)

mode_360  :360度的轉圖(默認為true)

以上這些是原本的用法

原本的設定是如果mode_360 設定為false的話

轉到底的話就會停止了!我把它改為轉到底就反轉

還有多加了一個加速按鈕

speed_turbo: 加速按扭倍率數字越小越快(默認為0.5)

還有原本需要在img設定width才能抓的到圖片寬度

我把它改為等圖載完在抓取元素的寬度

這一來在不知道圖片寬度時也能使用

範例:http://night.ipushs.com/night/only_photo/64
載點:按我下載

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *