フィドルのコードがサイト上で全く動作しない

W3Schoolsや他のソースのコードは、自分のサイトでどのように動作するのでしょうか。フィドルのコードがサイト上で全く動作しない

たとえば、私はW3Schoolsのコードをコピーし、基本的にWordPressに貼り付けました。私は自分自身の画像を使用して、それをよりよく視覚化するためにdivの周りに黒い境界線を置いた。私もボタンを取り除き、onclick="plusDivs(-1)"関数をdiv自体に入れて、どこでもクリックすると次の画像にスクロールします。しかし、そうでなければ、コードはまったく同じです。ここにはlinkがあります。

W3Schoolsで同じコードがうまく動作している場合、すべての画像が最初に表示される理由、または画像がクリックごとに下に移動する理由がわかりません。

もう1つの問題はpopup functionでもWordPressでは機能しません。ポップアップメッセージのテキストはすでに表示されています。テキストをクリックするとカーソルが変わっても、何もクリックしても何もしません。リンク：http://nalawebdev.com/pop-up-doesnt-work

なぜこれが起こっているのか大いにお礼を言いたいと思います。

出典

2017-08-22 Nala Web

私たちができるように** [、最小完全、かつ検証例] **（https://stackoverflow.com/help/mcve）に関連し、関連するコードを記載してください何が起こっているのか、なぜそれがうまくいかないのかを見てください。 – FluffyKitten

あなたが求めているのではなく、divのクリックハンドラが次の画像へのスクロールの唯一のトリガーである場合、あなたのページはマウスなどを使用していない（または使用できない）人にとっては使用できないことに注意してくださいポインティングデバイス。キーボードのみのユーザーが同じ機能にアクセスする方法を提供する必要があります。 – nnnnnn

ここに私が使用しているコードはあります： –

$(document).ready(function() { 
 
    $('#fullpage').fullpage({ 
 
    sectionsColors: ['#f2f2f2', '#4BBFC3', '#7BAABE'], 
 
    navigation: true, 
 
    scrollOverflow: false, 
 
    afterRender: function(autoplay) { 
 
     setInterval(function() { 
 
     $.fn.fullpage.moveSection(); 
 
     }, 1500); 
 
    } 
 
    }); 
 
});

.section { 
 
    font-size: 3em; 
 
    font-family: helvetica, arial; 
 
    color: #333; 
 
    text-align: center; 
 
    position: relative; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative" rel="stylesheet"> 
 
    <link rel="stylesheet" type="text/css" href="/wp-admin/css/jquery.fullPage.css"> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <script src="/wp-admin/js/jquery.easings.min.js"></script> 
 
    <script src="/wp-admin/js/jquery.fullPage.js"></script> 
 
</head> 
 

 
<body style="background-color:black;"> 
 
    <div id="fullpage"> 
 
    <div class="section"> 
 
     <div id="video-overlay"> 
 
     <video id="video-background" loop="" muted="" data-autoplay="" src="http://nalawebdev.com/wp-content/uploads/2017/08/Free-Motion-Background-Golden-Light.mp4"> 
 
</video> 
 
     <img id="logo" src="http://nalawebdev.com/wp-content/uploads/2017/08/logowhite.png" /> 
 
     <h1>N a l a</h1> 
 
     <h6>Web Design & &nbsp;Development<img id="gif" src="http://nalawebdev.com/wp-content/uploads/2017/08/scrolldown-1.gif" /></h6> 
 
     </div> 
 
    </div> 
 

 
    <div class="section" style="background-color:black;"> 
 
     <div class="slidetest">[ngg_images source="galleries" container_ids="7" display_type="photocrati-nextgen_basic_slideshow" gallery_width="1000" gallery_height="500" cycle_effect="fade" cycle_interval="0" show_thumbnail_link="0" thumbnail_link_text="&#91;Show thumbnails&#93;" 
 
     order_by="sortorder" order_direction="ASC" returns="included" maximum_entity_count="500"]</div> 
 
    </div> 
 

 
    <div class="section" style="background-color:black;"> 
 
     <div class="slidetest">[ngg_images source="galleries" container_ids="8" display_type="photocrati-nextgen_basic_slideshow" gallery_width="1000" gallery_height="500" cycle_effect="fade" cycle_interval="0" show_thumbnail_link="0" thumbnail_link_text="&#91;Show thumbnails&#93;" 
 
     order_by="sortorder" order_direction="ASC" returns="included" maximum_entity_count="500"]</div> 
 
    </div> 
 

 
    <div class="section" style="background-color:black;"> 
 
     <div class="slidetest">[ngg_images source="galleries" container_ids="9" display_type="photocrati-nextgen_basic_slideshow" gallery_width="1000" gallery_height="500" cycle_effect="fade" cycle_interval="0" show_thumbnail_link="0" thumbnail_link_text="&#91;Show thumbnails&#93;" 
 
     order_by="sortorder" order_direction="ASC" returns="included" maximum_entity_count="500"]</div> 
 
    </div> 
 

 
    <div class="section" style="background-color:black;"> 
 
     <div class="slidetest">[ngg_images source="galleries" container_ids="10" display_type="photocrati-nextgen_basic_slideshow" gallery_width="1000" gallery_height="500" cycle_effect="fade" cycle_interval="0" show_thumbnail_link="0" thumbnail_link_text="&#91;Show thumbnails&#93;" 
 
     order_by="sortorder" order_direction="ASC" returns="included" maximum_entity_count="500"]</div> 
 
    </div> 
 
    <div class="section" style="background-color:black;"></div> 
 

 
    </div> 
 
</body> 
 

 
</html>

出典

2017-08-24 21:11:25

ここに私のコードです^^あなたが私に何か理由を教えてもらえないかと疑問に思っていました。 -index？ありがとう！ –

フィドルのコードがサイト上で全く動作しない

答えて

関連する問題