質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

1795閲覧

モーダルウィンドウ内でTHREESIXTY SLIDERを使って画像をドラッグで回転させられるようにしたい

rapisazure

総合スコア6

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/12/10 17:03

編集2022/01/12 10:55

###前提・実現したいこと
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枚を用意しています.

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問