のスクリプトを利用させてもらい、webサイトにパノラマ写真埋め込みをしてみました。
サンプルとして入っているファイルを、手を加えずに表示します。
http://qp.jpn.org/apachot-jquery/demos/index.html
画像の指定だけ変えてみました。
http://qp.jpn.org/apachot-jquery/demos/qp01.html
リンク用のmapが３箇所に見えます。また、画像がスタート時に切れて、空白が見えています。
<script type="text/javascript">
$(document).ready(function(){
$("img.advancedpanorama").panorama({
auto_start: 0,
start_position: 1527
});
});
</script>
とスタート位置が指定されていますが、
start_position: 0
に変更してみます。
また３箇所のマップ指定を１つだけにして、位置・サイズを変更しました。
http://qp.jpn.org/apachot-jquery/demos/qp02.html
見出しなどを削ってシンプルに。
また、ヘッダ中の
<script type="text/javascript">
$(document).ready(function(){
$("img.advancedpanorama").panorama({
auto_start: 0,
start_position: 0
});
});
</script>
のオートスタートを有効にします。
auto_start: 1,
http://qp.jpn.org/apachot-jquery/demos/qp03.html
<script type="text/javascript" src="../jquery.panorama_qp.js"></script>
で指定されている
jquery.panorama_qp.js
の冒頭の
(function($) {
$.fn.panorama = function(options) {
this.each(function(){
var settings = {
viewport_width: 600,
speed: 20000,
direction: 'left',
control_display: 'auto',
start_position: 0,
auto_start: true,
mode_360: true
};
表示幅・移動スピード・方向の３つの値を変えてみます。また、埋め込みに使っているiframeのborderを無効にしてみます。
http://qp.jpn.org/apachot-jquery/demos/qp04.html
