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

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

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

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

Q&A

0回答

492閲覧

多階層ドロワーメニューサイトのトップにフルスクリーンのスライドショーを設置したい

sarudemowakaru

総合スコア4

jQuery

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

0グッド

0クリップ

投稿2020/03/02 08:17

前提・実現したいこと

スマホサイトに多回層のドロワーメニューを設置しています。
http://git.blivesta.com/drawer/ を利用しました。)
このサイトトップにフルスクリーンのスライドショーを設置したいと考えています。

ここに質問の内容を詳しく書いてください。

そこで、
http://black-flag.net/jquery/20141028-5428.html
を参考にしてトップページにフルスクリーンのスライドショーをコンテンツ上部に追加したところ、ドロワーメニュー内の子メニューをタップしても勝手に閉じるようになってしまいました。(選択する前に閉じてしまう)

jquery以外でフルスクリーンのスライドショーを設置する方法を探したのですがどれもうまくいかず、困っています。
コードを修正すればよいのか、もしくは他の方法でフルスクリーンのスライドショーを背景ではなくコンテンツ上部に設置する方法があれば教えていただけると助かります。

お話にならないくらいの超初心者で、理屈などは分からないまま見様見真似で作成しましたので
質問の仕方などもよくわかっておらず、不適切な表記がありましたら申し訳ありません。

大変恐縮なのですがどなたか猿でもわかるようにご教授くださいましたら幸いです。

発生している問題・エラーメッセージ

該当のソースコード

<link href="drawer/dist/css/drawer-171105.css" rel="stylesheet"> <link href="css.css" rel="stylesheet"> <script type="text/javascript"> jQuery(function() {//ページトップ var showFlag = false; var topBtn = jQuery('#page-top'); topBtn.css('bottom', '-100px'); var showFlag = false; jQuery(window).scroll(function () { if (jQuery(this).scrollTop() > -200) { if (showFlag == false) { showFlag = true; topBtn.stop().animate({'bottom' : '0px'}, 200); } } else { if (showFlag) { showFlag = false; topBtn.stop().animate({'bottom' : '-100px'}, 200); } } }); topBtn.click(function () { jQuery('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script> <script src="drawer/dist/js/drawer.min.js" charset="utf-8"></script> <script> $(document).ready(function() { $('.drawer').drawer(); }); </script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(function(){ setElm = $('.fullSlideShow'); fadeSpeed = 1000; switchDelay = 3000; easing = 'linear'; sideNavi = 'off'; // 'on' or 'off' sideHide = 'hide'; // 'hide' or 'show' naviOpc = 0.5; pnOpacity = 0.5; ua = navigator.userAgent; $(window).load(function(){ setElm.each(function(){ var targetObj = $(this), findUl = targetObj.find('ul'), findLi = findUl.find('li'), findLiCount = findLi.length, findLiFirst = findUl.find('li:first'); findLi.each(function(i){ $(this).attr('class','viewList' + (i + 1).toString()); }); findLi.css({display:'block',opacity:'0',zIndex:'99'}); findLiFirst.addClass('mainActive').css({zIndex:'100'}).stop().animate({opacity:'1'},fadeSpeed); if(findLiCount > 1){ // ページネーションSET var pagination = $('<div class="pagiNation"></div>'); targetObj.append(pagination); findLi.each(function(i){ pagination.append('<a href="javascript:void(0);" class="pn'+(i+1)+'"></a>'); }); var pnPoint = pagination.children('a'), pnFirst = pagination.children('a:first'), pnLast = pagination.children('a:last'), pnCount = pagination.children('a').length; pnFirst.addClass('pnActive'); if(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1){ pnPoint.css({opacity:(pnOpacity)}); } else { pnPoint.css({opacity:(pnOpacity)}).hover(function(){ $(this).stop().animate({opacity:'1'},300); }, function(){ $(this).stop().animate({opacity:(pnOpacity)},300); }); } pnPoint.click(function(){ clearInterval(setAutoTimer); var setNum = pnPoint.index(this), showCont = setNum+1; findUl.find('.viewList' + (showCont)).siblings().removeClass('mainActive').stop().animate({opacity:'0'},fadeSpeed,function(){$(this).css({zIndex:'99'});}); findUl.find('.viewList' + (showCont)).addClass('mainActive').stop().animate({opacity:'1'},fadeSpeed,function(){$(this).css({zIndex:'100'});}); pnPoint.removeClass('pnActive'); $(this).addClass('pnActive'); fadeTimer(); }); // ボタン移動動作 function switchNext(){ var setActive = pagination.find('.pnActive'); setActive.each(function(){ var pnLengh = pnPoint.length, pnIndex = pnPoint.index(this), pnCount = pnIndex+1; if(pnLengh == pnCount){ pnFirst.click(); } else { $(this).next('a').click(); } }); } function switchPrev(){ var setActive = pagination.find('.pnActive'); setActive.each(function(){ var pnLengh = pnPoint.length, pnIndex = pnPoint.index(this), pnCount = pnIndex+1; if(1 == pnCount){ pnLast.click(); } else { $(this).prev('a').click(); } }); } function fadeTimer(){ setAutoTimer = setInterval(function(){ switchNext(); },switchDelay); } fadeTimer(); // サイドナビボタン(有り無し) if(sideNavi == 'on'){ targetObj.append('<a href="javascript:void(0);" class="btnPrev"></a><a href="javascript:void(0);" class="btnNext"></a>'); var btnPrev = targetObj.find('.btnPrev'),btnNext = targetObj.find('.btnNext'),btnPrevNext = targetObj.find('.btnPrev,.btnNext'); if(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1){ btnPrevNext.css({opacity:naviOpc}); } else { btnPrevNext.css({opacity:naviOpc}).hover(function(){ $(this).stop().animate({opacity:'1'},200); },function(){ $(this).stop().animate({opacity:naviOpc},200); }); } if(sideHide == 'hide'){ if(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1){ btnPrevNext.css({visibility:'visible'}); } else { btnPrevNext.css({visibility:'hidden'}); targetObj.hover(function(){ btnPrevNext.css({visibility:'visible'}); },function(){ btnPrevNext.css({visibility:'hidden'}); }); } } btnPrev.click(function(){switchPrev();}); btnNext.click(function(){switchNext();}); } } // メイン画像をベースにエリアの幅と高さを設定 var setLiImg = findLi.find('img'), baseWidth = setLiImg.width(), baseHeight = setLiImg.height(), selfWH = baseWidth / baseHeight; // フルスクリーン(レスポンシブ)動作メイン function setArea(){ var wdWidth = $(window).width(), wdHeight = $(window).height(), rwdHeight = wdWidth / selfWH; if(rwdHeight < $(window).height()){ rwdHeight = $(window).height(); wdWidth = rwdHeight * selfWH; } targetObj.css({height:wdHeight}); findUl.css({marginTop:-rwdHeight/2,marginLeft:-wdWidth/2,width:wdWidth,height:rwdHeight}); findLi.css({height:rwdHeight}); } $(window).resize(function(){setArea();}).resize(); $('body').css({visibility:'visible'}); }); }); }); </script> </head>

試したこと

表記の順番を変えて、ドロワーメニューのjqueryを後ろに読み込んだところ、androidでは正常になったのですが、iPhonだとスライド自体が消えて表示されなくなってしまいました…

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

hwatarig

2020/03/02 12:12

状況が再現できるよう、htmlとcssも質問文に追記してください。
sarudemowakaru

2020/03/03 00:36

申し訳ありません、上記追記いたしました。 まだ足りない情報がありましたらご指摘くださいませ。 どうぞよろしくお願い致します。
hwatarig

2020/03/03 13:40

追記されていないようです……?(質問文の編集履歴が表示されていない) お手数ですがもう一度編集いただけますでしょうか。
Lhankor_Mhy

2020/03/04 00:30

jQueryの多重読み込みはおすすめできないです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問