###前提・実現したいこと
HTML,JavaScriptの勉強の1つとして,モーダルウィンドウ内で画像をドラッグで360度回転させられるようなものを作りたいと考えています.
実現したい動きとして,以下のようなものを考えています.
・画像をクリックするとモーダルウィンドウが開く
・モーダルウィンドウ内で画像をドラッグして360度回して見ることができる
・モーダルウィンドウ右上のバツボタンをクリックすると閉じる
画像を360度回転させられるようにするために,threesixty-slider(http://www.360slider.com/default_control.html)
というものを使おうと考えています.イメージとしてはこのサイトのデモにあるようなものをモーダルウィンドウで表示したいと考えています.
モーダルウィンドウの作成には,以下のサイトを参考にさせていただきました.
http://backyard.in4design.jp/2017/03/div.html
実際に作ってみようとしたところ,次のような問題が発生しており原因の究明ができず質問をさせていただきました.
###発生している問題・エラーメッセージ
モーダルウィンドウ内に画像は表示されるのですが,画像をドラッグしても回転して見えません.
しかしモーダルウィンドウ内で画像をドラッグした後,一度モーダルウィンドウを閉じ,開き直すとドラッグした分だけ回転した画像が表示されます.
そのため,ドラッグで回転できるようにはなっていると思うのですが回転している様子をモーダルウィンドウ内でみることができない状態です.
###該当のソースコード
HTML
1<!--クリックする画像--> 2 <div class=""> 3 <h2>Threesixty.js demonstration</h2> 4 <span class="spin-img"> 5 <img src="pic/IMG_01.jpg" width="300" height="230"> 6 </span> 7 </div> 8<!-- モーダルウィンドウ用のdiv--> 9 <div id="MODAL-WINDOW"> 10 <div class="close-btn">×</div> 11 <div class="modalcontents"></div> 12 </div> 13<!-- モータルウィンドウ内に表示させるデータ--> 14<div id="data-div"> 15 <div class="inner"> 16 <div class="threesixty nico"> 17 <div class="spinner"> 18 <span>0%</span> 19 </div> 20 <ol class="threesixty_images"></ol> 21 </div> 22 </div> 23</div>
javascript
1var car; 2window.onload = init; 3 4$(function(){ 5 6 var MW = $('#MODAL-WINDOW'); 7 var MW_CB = $('#MODAL-WINDOW > .close-btn'); 8 var MW_CO = $('#MODAL-WINDOW > .modalcontents'); 9 var Image; 10 11 /* モーダル・ウィンドウを閉じる */ 12 MW_CB.on('click', function(){ 13 MW.fadeOut(); 14 MW_CO.empty(); 15 MW.removeClass(); 16 }); 17 18 /* 非表示にしておいた div 要素をモーダル・ウィンドウに表示 */ 19 $('.spin-img img').on('click',function(){ 20 $('#data-div > .inner').clone(true).appendTo(MW_CO); 21 MW.fadeIn(); 22 }); 23 24}); 25 26function init(){ 27 car = $('.nico').ThreeSixty({ 28 totalFrames: 11, // Total no. of image you have for 360 slider 29 endFrame: 11, // end frame for the auto spin animation 30 currentFrame: 1, // This the start frame for auto spin 31 imgList: '.threesixty_images', // selector for image list 32 progress: '.spinner', // selector to show the loading progress 33 imagePath:'pic/', // path of the image assets 34 filePrefix: 'IMG_0', // file prefix if any 35 ext: '.jpg', // extention for the assets 36 width: 480, 37 height: 327, 38 navigation: true, 39 responsive: true, 40 disableSpin:true, 41 framerate:7 42 }); 43}
###試したこと
モーダルウィンドウ内でなければ,ドラッグで画像を360度回転させて見ることができることは確認できています.
chrome,Safariで試してみましたが同様の状態でうまくいきませんでした.
###補足情報(言語/FW/ツール等のバージョンなど)
確認にはGoogle Chromeを使用しています.
jQueryのバージョンとしてはjquery-2.2.4.min.jsを使っています.
IMG_01~IMG_011の画像11枚を用意しています.
あなたの回答
tips
プレビュー