前提・実現したいこと
スマホサイトに多回層のドロワーメニューを設置しています。
(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/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
あなたの回答
tips
プレビュー