Jqueryでパノラマ画像を動かす
Jqueryでパノラマ画像を動かすプログラムは仕組みさえわかればそこまで難しくありません。今更、わざわざ作る必要もないと思うのですが、やはり独自で作りたいという人もいると思います。まずは私の作成したプログラムを使ってパノラマ画像を動かしてみることにしましょう。以下からダウンロードしてください。
scrollpanorama.zip
<link rel="stylesheet" href="/wp-content/themes/otakuneko/panorama/scrollpanorama.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/wp-content/themes/otakuneko/panorama/scrollpanorama.js"></script>
<script>
$(function(){
var speed = 10; // スピード
var box_width = '700px'; // パノラマの横幅 px指定
var box_height = '540px'; // パノラマの縦幅 px指定
setInit(box_width,box_height);
startPanorama(speed);
});
<div class="js-img-size">
<img src="/wp-content/themes/otakuneko/panorama/panorama.jpg">
</div>
<div class="panorama-btn">
デモバージョン
これを独自で作成したいという方も多くいると思いますので、コーディングの組み方のコツを記載しておきます。この際、CSSは大幅に変更する必要はないと思いますが、ボタンを画像にしたいなどの場合はカスタマイズしないといけません。とりあえず今のCSSを載せておきます。
.js-img-size{
margin: 0 auto;
overflow: hidden;
position: relative;
}
.js-img-size img {
width: auto;
max-width: none;
height: 100%;
position: absolute;
margin: auto;
}
.js-img-size .producelink{
position: absolute;
bottom: 0;
width: 100%;
text-align: right;
bottom: 5px;
}
.js-img-size .producelink a{
display: inline;
font-size: 10px;
text-decoration: underline;
padding-right: 5px;
color: #fff;
}
.js-img-size .producelink a:hover{
color: #999;
}
.panorama-btn{
height: auto;
margin: 0 auto;
background: #000;
color: #fff;
}
.panorama-btn a{
display: block;
font-size: 24px;
color: #fff;
float: left;
width: 33%;
text-decoration: none;
}
.btn_stop, .btn_start{
text-align: center;
}
.btn_left{
text-align: right;
}
.btn_right{
padding-left: 5px;
}
JSの部分ですが、ボタンの部分はInitにしています。ここも必要に応じてカスタムするといいでしょう。box_widthはパノラマ画像を表示させるためのフレームのwidthで、box_heightはパノラマ画像の高さです。
function setInit(box_width,box_height){
$('.js-img-size').css('width',box_width);
$('.js-img-size').css('height',box_height);
$('.panorama-btn').css('width',box_width);
$('.panorama-btn').append('<<');
$('.panorama-btn').append('x');
$('.panorama-btn').append('');
$('.panorama-btn').append('>>');
$('.panorama-btn').append('');
$('.panorama-btn').append('');
$('.panorama-btn').append('');
$('.panorama-btn').append('');
$('.panorama-btn').append('');
}
問題はここからのJSになります。あえてここからのソースは記載しませんが、手順と構造としては次のようになります。
① パノラマ画像そのもののwidth（幅）とheight（高さ）を取得する
② modeを設定しておき1の場合は右へスクロール、2の場合は左へスクロールをするようにする
③ modeの切り替えをして一番右側へスクロールすればmodeを2に変更してcssで自動にカウントをマイナスしながら左側へスクロールをするが、一番右側というのはパノラマ画像そのもののサイズから初期設定している横幅を引いたものになる。（一番右側にしてしまうと余白が出る）
④ modeが2になっていて、一番右側にスクロールした場合の処理は左側へcssで自動にカウントをプラスして1のほうが大きくなった場合はmodeを1に変更して右側にスクロールする
少しわかりにくいと思いますのでヒントとなるコードを載せておきます。
var max_left = width - box_width;
・
・
・
panoramaTimer = setInterval(function() {
if(mode == 1){
if(i > max_left){mode = 2;}else{i = i + 1;}
}if(mode == 2){
if(i < 1){mode = 1;}else{i = i - 1;}
}
left = -1 * i;
$('.js-img-size img').css('left', left);
}, speed);
