Q&A
初心者ですが、wordpressを使用しホームページを作成しております。
ギャラリーとして、動画サムネイルをクリックすると
youtube動画を貼り付けたモダールウィンドウが開くよう
こちらで教えていただき作成しました。
そのギャラリーは「wordpressのテーマオプション＞セクション」の部分に
下記を記述し問題なく表示されるのですが
ページ自体に設定している「バックグラウンドでのyoutube再生」が停止してしまいます。
（再生されない状態です）
そこで
下記にあります
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>を外してみたところバックグラウンドが自動再生されます。
ですが、同時にモダールウィンドウが開かなくなります。
#modal-overlay { z-index: 1; display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba( 255,255,255, 0.75 ); } #modal-content { width: 910px; height: 360px; margin: 0; padding: 20px 20px; border: 0px solid #aaa; background: #fff; position: fixed; /*display: none;*/ } .button-link { color: #00f ; text-decoration: underline; } .button-link:hover { cursor: pointer ; color: #f00 ; } .css_btn_class { font-size:16px; font-family:Arial; font-weight:normal; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; border:0px solid #d83526; padding:9px 18px; text-decoration:none; background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% ); background:-ms-linear-gradient( top, #fe1a00 5%, #ce0100 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100'); background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fe1a00), color-stop(100%, #ce0100) ); background-color:#fe1a00; color:#ffffff; display:inline-block; } </STYLE> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function() { // modal-overlay内にmodal-contentを配置しているためイベントバブルにより、 // modal-overlayのクリック(タッチ)イベントが発生してしまうためバブリングを停止させる $("#modal-content").click(function(evt) { evt.stopPropagation(); }); //リサイズされたら、センタリングをする $(window).resize(centeringModalSyncer); //ボタンのクリック(タッチ)イベント $(".modal-syncer").click(function() { //ボタンからフォーカスを外す this.blur(); //プレイヤー(iframe)のsrcにYouTube動画のURLを設定 $("#vimeoPlayer").attr("src", "https://www.youtube.com/embed/" + $(this).data("videoId") + "?autoplay=0"); $("#modal-overlay").fadeIn("fast"); $("#modal-content img").attr("src", $(this).data("description")); // センタリング centeringModalSyncer(); }); //[#modal-overlay]、または[#modal-close]をクリックしたら… $("#modal-overlay, #modal-close").click(function() { //[#modal-content]と[#modal-overlay]をフェードアウトした後に… $("#modal-overlay").fadeOut("fast", function() { $("#vimeoPlayer").attr("src", ""); // プレイヤーのsrcをクリア }); }); //センタリングを実行する関数 function centeringModalSyncer() { //画面(ウィンドウ)の幅、高さを取得 var w = $(window).width(); var h = $(window).height(); //コンテンツ(#modal-content)の幅、高さを取得 var cw = $("#modal-content").outerWidth(); var ch = $("#modal-content").outerHeight(); //センタリングを実行する $("#modal-content").css({ left: ((w - cw) / 2), top: ((h - ch) / 2) }); } }); </script> <div id="modal-overlay"> <div id="modal-content"> <iframe src="" width="512" height="288" align="left" frameborder="0" id="vimeoPlayer" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="display: block;" padding_right="10"></iframe> <img src="説明文書画像" alt="0" width="350" height="283" size-full wp-image-117 /> <a id="modal-close" class="button-link css_btn_class">閉じる</a> </div> </div> <!-- モーダルウィンドウのコンテンツ終了 --> <table> <tr> <td> <a class="modal-syncer button-link css_btn_class" data-video-id="Pii-LaWOyuo">動画１</a> </td> <td> <a class="modal-syncer button-link css_btn_class" data-video-id="FajnnR-9mhE">動画２</a> </td> </tr> <tr> <td> <a class="modal-syncer button-link css_btn_class" data-video-id="OC7tgJP1D4s">動画３</a> </td> <td> <a class="modal-syncer button-link css_btn_class" data-video-id="OC7tgJP1D4s">動画４</a> </td> </tr> </table>
自動再生の設定は、wordpressのテーマオプションで
youtubeのIDを入力しただけですので難しいことはわかりません。
またサイトの仕様ですが
http://www.theqcamera.com/
このサイトのように自動で背景が再生され、スクロールで下に行くと
同じページ内にギャラリーがある作りになっています。
回答1件
0
ベストアンサー
WordPress自体ですでにjQueryライブラリは呼ばれており、またほかのライブラリとの衝突を避けるために.noConflict()が実行されているようです。
ですので
は不要ということですので、この行を削除して
js
1$(xxx)
といった記述をすべて
js
1jQuery(xxx)
に変更してみてください。
js
1jQuery(function() { 2 // modal-overlay内にmodal-contentを配置しているためイベントバブルにより、 3 // modal-overlayのクリック(タッチ)イベントが発生してしまうためバブリングを停止させる 4 jQuery("#modal-content").click(function(evt) { 5 evt.stopPropagation(); 6 }); 7 //リサイズされたら、センタリングをする 8 jQuery(window).resize(centeringModalSyncer); 9 //ボタンのクリック(タッチ)イベント 10 jQuery(".modal-syncer").click(function() { 11 //ボタンからフォーカスを外す 12 this.blur(); 13 //プレイヤー(iframe)のsrcにYouTube動画のURLを設定 14 jQuery("#vimeoPlayer").attr("src", "https://www.youtube.com/embed/" + jQuery(this).data("videoId") + "?autoplay=0"); 15 jQuery("#modal-overlay").fadeIn("fast"); 16 jQuery("#modal-content img").attr("src", jQuery(this).data("description")); 17 // センタリング 18 centeringModalSyncer(); 19 }); 20 21 //[#modal-overlay]、または[#modal-close]をクリックしたら… 22 jQuery("#modal-overlay, #modal-close").click(function() { 23 //[#modal-content]と[#modal-overlay]をフェードアウトした後に… 24 jQuery("#modal-overlay").fadeOut("fast", function() { 25 jQuery("#vimeoPlayer").attr("src", ""); // プレイヤーのsrcをクリア 26 }); 27 }); 28 //センタリングを実行する関数 29 function centeringModalSyncer() { 30 //画面(ウィンドウ)の幅、高さを取得 31 var w = jQuery(window).width(); 32 var h = jQuery(window).height(); 33 //コンテンツ(#modal-content)の幅、高さを取得 34 var cw = jQuery("#modal-content").outerWidth(); 35 var ch = jQuery("#modal-content").outerHeight(); 36 //センタリングを実行する 37 jQuery("#modal-content").css({ 38 left: ((w - cw) / 2), 39 top: ((h - ch) / 2) 40 }); 41 } 42});
投稿2016/12/24 17:24
総合スコア4267
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/24 17:31
2016/12/26 08:37