2015-10-25

javascript：パノラマ写真をドラッグでスクロール（Jqueryプラグイン）

サンプル

javascript：パノラマ写真をドラッグでスクロール を Jqueryプラグインに変更。

プラグインよりもjqueryを先に読み込むこと[参]。


２～３機能も追加した。

  • スクロールボタンを追加（オプションで非表示も可能）
  • 切り替え画像に対応（オプション）。例えば、説明を追記した画像を切り替え画像に用いる。
  • 360°パノラマ対応（オプション）

◆html

11～13行目：width, height, src で画像を表示するサイズと画像を定義する（必須）
19～25行目：オプションでパラメータを定義する。
  1. <html>
  2. <head>
  3. <title>dragPanorama</title>
  4. <meta http-equiv="imagetoolbar" content="no" />
  5. <script src="jquery.js"></script>
  6. <script src="jQuery.dragPanorama.js"></script>
  7.  
  8. <script>
  9. $(function() {
  10.  $("#panorama_wrapper").dragPanorama({
  11.   width: 800,
  12.   height: 400,
  13.   src: "001.jpg"
  14.  });
  15.  $("#panorama_wrapper2").dragPanorama({
  16.   width: 1000,
  17.   height: 300,
  18.   src: "00.jpg",
  19.   round: true,
  20.   buttonSize: "20px",
  21.   buttonTextLeft: "左",
  22.   buttonTextRight: "右",
  23.   buttonTextPause: "停止",
  24.   switchText: "表示切替",
  25.   src2: "00_2.jpg",
  26.  });
  27. });
  28. </script>
  29.  
  30. </head>
  31.  
  32. <body>
  33. <div align="center">
  34.      <h1>九十九谷</h1>
  35.      <div id="panorama_wrapper"></div>
  36.      <br/>
  37.      <h1>谷川岳</h1>
  38.      <div id="panorama_wrapper2"></div>
  39. </div>
  40. </body>
  41. </html>

◆javascript(panorama.js)

10～29行のパラメータをオプションで設定できる。


  1. (function($) { // 無名関数でラップしてプラグインを独立させておく。jQueryキーワードの代わりにドル記号($)を使用する。
  2.  
  3.  $.fn.dragPanorama = function(opts) { // プラグインを定義する。
  4.   return this.each(function() { // each();で回して全ての要素に対して同様に処理していく
  5.    new $.Panorama(this,opts);
  6.   });
  7.  };
  8.  
  9.  var defaults = {
  10.   dx: 0, // マウスダウンした場所の画像の座標
  11.   xcache: 0,  // 画像の左端のスクリーンの左端に対する座標
  12.   dragObj: false,  // ドラッグの状態を表す。　null→ドラッグしていない状況
  13.   width: 320,
  14.   height: 240,
  15.   round: false, // 360°パノラマのときはtrue
  16.   scroll: true, // 自動スクロールをするときは true
  17.   speed: 100, // 自動スクロールのスピード
  18.   mouseoverVisibility: "visible", // mouseover の時のスクロールボタンの表示/非表示
  19.   mouseoutVisibility: "hidden", // mouseout の時のスクロールボタンの表示/非表示
  20.   buttonSize: "100px", // スクロールボタンの大きさ
  21.   buttonColor: "grey", // スクロールボタンの色
  22.   buttonOpacity: "0.5", // スクロールボタンの透明度
  23.   buttonTextLeft: "<", // スクロールボタン（左）のテキスト
  24.   buttonTextRight: ">", // スクロールボタン（右）のテキスト
  25.   buttonTextPause: "=", // スクロールボタン（pause）のテキスト
  26.   switchSize: "18px", // 切り替えボタンのサイズ
  27.   switchText: "switch", // 切り替えボタンのテキスト
  28.   src2: "", // 切り替え用の画像
  29.   durationTime: 1000 // 画像切り替え時間
  30.  };
  31.  
  32.  $.Panorama = function(elements, opts){
  33.  
  34.   this.opts = $.extend({}, defaults, opts); // デフォルトオプションと渡されたオプションのマージ
  35.  
  36.   this.$id = $(elements);
  37.   this.$id.width(this.opts.width).height(this.opts.height);
  38.   this.srcCurrent = this.opts.src;
  39.  
  40.   var self = this; // 以下の関数で用いるために要素(this）を変数(self)に退避
  41.  
  42.   var baseBlockCss = {
  43.    position: "absolute",
  44.    cursor: "pointer",
  45.    height: "100%",
  46.    width: "100%"
  47.   };
  48.   var baseInlineCss = {
  49.    position: "absolute",
  50.    cursor: "pointer",
  51.   };
  52.  
  53.   this.$id.css({ 
  54.    overflow: "hidden",
  55.    position: "relative",
  56.    textAlign: "left",
  57.   }).append(
  58.    $('<div></div>').css(baseBlockCss) // 画像用の<div>
  59.   ).append(
  60.    $('<div></div>').css(baseBlockCss) // 切り替え画像用の<div>
  61.   );
  62.  
  63.   if ( this.opts.scroll == true || this.opts.src2) {
  64.    this.$id.mouseover(function(){
  65.      $(this).find('span').css({
  66.       visibility: self.opts.mouseoverVisibility
  67.      })
  68.    }).mouseout(function(){
  69.      $(this).find('span').css({
  70.       visibility: self.opts.mouseoutVisibility
  71.      }) 
  72.    });
  73.   }
  74.  
  75.   if ( this.opts.scroll == true ) {
  76.    var $table = $('<table></table>').css(baseBlockCss).css({  
  77.     border: "0", 
  78.     borderSpacing: "0",
  79.     tableLayout: "fixed", // <td>を均等に割り付ける（キャメルケースで記載）
  80.     fontSize: self.opts.buttonSize,
  81.     color: self.opts.buttonColor,
  82.     opacity: self.opts.buttonOpacity,
  83.     verticalAlign: "middle",
  84.     visibility: self.opts.mouseoutVisibility
  85.    }).append(
  86.     $('<tr></tr>').append(
  87.      $('<td></td>').css({
  88.       textAlign: "left",
  89.      }).append(
  90.       $('<span></span>', { text: self.opts.buttonTextLeft}).click(function(){
  91.        self.automovePrc(-1);
  92.       })
  93.      )
  94.     ).append(
  95.      $('<td></td>').css({
  96.       textAlign: "center"
  97.      }).append(
  98.       $('<span></span>', { text: self.opts.buttonTextPause}).click(function(){
  99.        clearInterval(self.timer);
  100.        self.timer = "";
  101.        })
  102.      )
  103.     ).append(
  104.      $('<td></td>').css({
  105.       textAlign: "right"
  106.      }).append(
  107.       $('<span></span>', { text: self.opts.buttonTextRight}).click(function(){
  108.        self.automovePrc(1);
  109.       })
  110.      )
  111.     )
  112.    );
  113.    this.$id.append($table);
  114.   }
  115.  
  116.   if ( this.opts.src2 ) { // 画像の切り替え
  117.    var $switch = $('<span></span>', { text: self.opts.switchText }).css(baseInlineCss).css({
  118.     fontSize: self.opts.switchSize,
  119.     color: self.opts.buttonColor,
  120.     opacity: self.opts.buttonOpacity,
  121.     verticalAlign: "top",
  122.     textAlign: "left",
  123.     visibility: self.opts.mouseoutVisibility
  124.    }).click(function(){
  125.     if ( self.$id.find('div:last').css("opacity") == 0 ) {
  126.      self.$id.find('div:last').animate({opacity: 1.0},self.opts.durationTime);
  127.     } else {
  128.      self.$id.find('div:last').animate({opacity: 0.0},self.opts.durationTime);
  129.     }
  130.    });
  131.    this.$id.append($switch);
  132.   }
  133.  
  134.   this.img = new Image();
  135.  
  136.   this.img.onload = function(){ // imageが読み込まれたら、imageの幅を取得して、maxLeftを定義する。
  137.  
  138.    var imgRatio = self.$id.height() / self.img.height;  // 画像の高さを合わせて表示するための変形比率を定義
  139.    self.imgWidth = self.img.width * imgRatio; // 変形画像の幅
  140.    self.imgHeight = self.$id.height(); // 変形画像の高さ
  141.  
  142.    if ( self.opts.round == false ) {
  143.     self.maxLeft = self.$id.width() - self.imgWidth; 
  144.      // もっとも左に移動したときの画像の左端のスクリーンの左端に対する座標<0
  145.    } else {  // 360°パノラマの場合
  146.     self.maxLeft = self.$id.width() - self.imgWidth * 2;
  147.      // もっとも左に移動したときの画像の左端のスクリーンの左端に対する座標<0
  148.    }
  149.    self.$id.find('div:first').css({ // 画像用の<div>を設定
  150.     opacity: 1.0,
  151.     backgroundImage: "url(" + self.opts.src + ")", // キャメルケースで記載（"background-image"→backgroundImage)
  152.     backgroundSize: self.imgWidth + "px," + self.imgHeight + "px", // 変形比率で表示 
  153.     width: self.imgWidth*2 + "px"
  154.    });
  155.    self.$id.find('div:last').css({ // 切り替え画像用の<div>を設定
  156.     opacity: 0.0,
  157.     backgroundImage: "url(" + self.opts.src2 + ")", // キャメルケースで記載（"background-image"→backgroundImage)
  158.     backgroundSize: self.imgWidth + "px," + self.imgHeight + "px", // 変形比率で表示 
  159.     width: self.imgWidth*2 + "px"
  160.    });
  161.   }
  162.  
  163.   this.img.src = this.opts.src;
  164.   this.maxLeft = self.maxLeft;
  165.   this.imgWidth = self.imgWidth;
  166.   this.imgHeight = self.Height;
  167.  
  168.   this.$id.mousedown( function(e) { 
  169.    self.opts.dragObj = true;
  170.    var x = e.pageX ;  // マウスダウンした場所のスクリーンの座標
  171.    self.opts.dx = x - self.opts.xcache;  // マウスダウンした場所の画像の座標
  172.    return false;  // ドラッグで文字が選択されないようにする。
  173.   });
  174.   this.$id.mouseup( function(e) { 
  175.    self.opts.dragObj = false;
  176.   });
  177.   this.$id.mousemove( function(e) { 
  178.    if(!self.opts.dragObj)return;
  179.    var x = e.pageX ;
  180.    self.xcache_tmp = x - self.opts.dx; // ドラッグによる移動量
  181.    if ( self.opts.round == true ) { self.roundPrc(); }; // 360°パノラマの場合
  182.    if(self.maxLeft < self.xcache_tmp && 0 > self.xcache_tmp){ self.movePrc(); }; // 画像が可動の範囲であれば実行
  183.   });
  184.  
  185.  };
  186.  
  187.  $.extend($.Panorama.prototype,{
  188.  
  189.   roundPrc: function() { // 360°パノラマの場合の処理
  190.    if ( this.xcache_tmp >= 0 ) {this.xcache_tmp -= this.imgWidth;}
  191.    if ( this.xcache_tmp <= this.maxLeft ) {this.xcache_tmp += this.imgWidth;}
  192.   },
  193.  
  194.   movePrc: function() { // 移動処理
  195.    this.$id.find('div').css("left", this.xcache_tmp + "px");
  196.    this.opts.xcache = this.xcache_tmp; // 画像の左端のスクリーンの左端に対する座標
  197.   },
  198.  
  199.   automovePrc: function(moveStep) { // 自動移動
  200.    if (this.timer) return;
  201.    var self = this;
  202.    this.timer = setInterval(function(){
  203.     self.xcache_tmp = self.opts.xcache - moveStep;
  204.     if ( self.opts.round == true ) { self.roundPrc(); }; // 360°パノラマの場合
  205.     if(self.maxLeft < self.xcache_tmp && self.xcache_tmp < 0){ // 画像が可動の範囲であれば実行
  206.      self.movePrc();
  207.     } else {
  208.      clearInterval(self.timer);
  209.      self.timer = "";
  210.     }
  211.    }, 1000/self.opts.speed )
  212.   }
  213.  });
  214.  
  215. })(jQuery);

◆その他

パノラマ写真を作るにはImage Composite Editorが便利です。

参考にしたページ

Javascriptでパノラマ写真をドラッグ
投稿者 時刻: